Recommended

Skip Navigation LinksHome / Tips / Controls and UI

Controls and UI

+
Page 
Items Resolution

  • 0 comments  /  posted by  Martin Mihaylov  on  Sep 05, 2008 (more than a year ago)

    You can draw a line decleratively in the Xaml or dynamically in the codebehind. Here it is how it's done in the both ways:

    Xaml

    <Line x:Name="MyLine" X1="0" Y1="0" X2="100" Y2="100" Stroke="Yellow" StrokeThickness="2" />

    C#

    Line myLine = new Line();
    myLine.X1 = 0;
    myLine.Y1 = 0;
    myLine.X2 = 100;
    myLine.Y2 = 100;
    myLine.Stroke = new SolidColorBrush( Colors.Yellow );
    myLine.StrokeThickness = 2;

    X1 and Y1 represent the start point of the line and X2 and Y2 - the end point.

    Share


  • 2 comments  /  posted by  Martin Mihaylov  on  Sep 05, 2008 (more than a year ago)

    If you want your rectangle to have rounded edges, you can use the RadiusX and RadiusY properties of the Rectangle control.

    Xaml

    <Rectangle x:Name="MyRect" Width="100" Height="100" RadiusX="10" RadiusY="10" Fill="Red" />

    RadiusX determines the radius of the corners on the x-axis and RadiusY determines the radius of the corners on the y-axis.

    That's it!

    Share
  • 0 comments  /  posted by  Denislav Savkov  on  Sep 03, 2008 (more than a year ago)

    Text box control in Silverlight supports multi line mode but surprisingly it does not have such property as Multyline. That is why, in order to make one text box multi line, you have to set its property AcceptsReturn to true.

    Xaml

    <TextBox x:Name="textBox" AcceptsReturn="True"></TextBox>

    C#

    TextBox textBox = new TextBox();
    textBox.AcceptsReturn = true;

    That's it!

    Share
  • 6 comments  /  posted by  Denislav Savkov  on  Sep 03, 2008 (more than a year ago)

    Yes, that is right, there is no Label control in Silverlight. Instead you should use the new control System.Windows.Controls.TextBlock. Keep in mind that it can display only text, no images or other type of content, just text.

    Xaml

    <TextBlock x:Name="statusText" Text="Active" TextWrapping="Wrap" TextAlignment="Left" VerticalAlignment="Center"/>

    C#

    TextBlock statusText = new TextBlock();
    statusText.Text = "Active";
    statusText.TextWrapping = TextWrapping.Wrap;
    statusText.TextAlignment = TextAlignment.Left;
    statusText.VerticalAlignment = VerticalAlignment.Center;

    That's it!

     

    Share
  • 0 comments  /  posted by  Denislav Savkov  on  Sep 03, 2008 (more than a year ago)
    Tags: Silverlight , Grid , columns , rows

    The System.Windows.Controls.Grid control is one of the most commonly used containers in Silverlight. It allows you to organize its content into rows and columns as a regular grid. By default a Grid control has only one cell and everything you add goes there overlapping the previous content. In order to define multiple rows and columns to your Grid control you have to add as many <RowDefinition> and <ColumnDefinition> as you need, see the sample below.

    Xaml

    <Page
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
       <Grid x:Name="MyGrid" ShowGridLines="True">
         <Grid.RowDefinitions>
           <RowDefinition></RowDefinition>
           <RowDefinition></RowDefinition>
           <RowDefinition></RowDefinition>
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
           <ColumnDefinition></ColumnDefinition>
           <ColumnDefinition></ColumnDefinition>
           <ColumnDefinition></ColumnDefinition>
         </Grid.ColumnDefinitions>
       </Grid>
    </Page>

     

    C#

    Grid MyGrid = new Grid();
     
    RowDefinition row1 = new RowDefinition();
    RowDefinition row2 = new RowDefinition();
    RowDefinition row3 = new RowDefinition();
    MyGrid.RowDefinitions.Add( row1 );
    MyGrid.RowDefinitions.Add( row2 );
    MyGrid.RowDefinitions.Add( row3 );
    ColumnDefinition col1 = new ColumnDefinition();
    ColumnDefinition col2 = new ColumnDefinition();
    ColumnDefinition col3 = new ColumnDefinition();
    MyGrid.ColumnDefinitions.Add( col1 );
    MyGrid.ColumnDefinitions.Add( col2 );
    MyGrid.ColumnDefinitions.Add( col3 );

    As you can see we have added 3 rows and 3 columns definitions in our Grid control.

    Share
  • 0 comments  /  posted by  Denislav Savkov  on  Sep 03, 2008 (more than a year ago)

    In Silverlight the Button, as some other controls does not have the old well known Text property. It is replaced by a new property named Content of type object. The idea is to remove the limitation to show only strings as content of a control. Now with this new approach you can put whatever you wish inside of a Button. This makes the presentation layer extremely powerful. However if you provide a regular string for the Content then the result will be exactly as if we used the Text property.

    Share
  • 5 comments  /  posted by  Denislav Savkov  on  Sep 02, 2008 (more than a year ago)
    Tags: Silverlight , Grid


    Let's imagine we would like to add a button at a specific cell (row:column) in our grid control. How this could be done? How to define the row and column of that cell? Well, the answer is pretty easy - you just have to define values for the two attached properties Grid.Row and Grid.Column inside the control you wish to add. Like this:

    Xaml

    <Grid x:Name="MyGrid" ShowGridLines="True">
       <Grid.RowDefinitions>
          <RowDefinition></RowDefinition>
          <RowDefinition></RowDefinition>
       </Grid.RowDefinitions>
       <Grid.ColumnDefinitions>
          <ColumnDefinition></ColumnDefinition>
          <ColumnDefinition></ColumnDefinition>
       </Grid.ColumnDefinitions>
       <Button x:Name="MyButton" Content="Button at Cell(R:0, C:1)" Grid.Row="0" Grid.Column="1"></Button>
    </Grid>
    Share
  • 7 comments  /  posted by  Ivan Dragoev  on  Sep 02, 2008 (more than a year ago)
    Tags: Silverlight , ScrollViewer , ItemsControl

    To add scrollbars to ItemsControl you have to modify the control template and to add ScrollViewer for the ItemsPresenter.

    Xaml

    <ItemsControl >
    <
    ItemsControl.Template>
    <
    ControlTemplate>
    <
    ScrollViewer x:Name="ScrollViewer" Padding="{TemplateBinding Padding}">
    <
    ItemsPresenter />
    </
    ScrollViewer>
    </
    ControlTemplate>
    </
    ItemsControl.Template>
    </
    ItemsControl>

     

    Share
  • 0 comments  /  posted by  Denislav Savkov  on  Sep 02, 2008 (more than a year ago)
    Tags: Silverlight , cursor

    Control's cursors can be changed very easily in Silverlight. All controls that derive from System.Windows.FrameworkElement have Cursor property that can be set from Xaml or the code behind. The value for that property should be one of the predefined cursors such as Hand, Wait, Arrow, IBeam etc. declared in the static class System.Windows.Input.Cursors.

    Xaml

       <Button x:Name="pushMeButton" Content="Push me now!" Cursor="Hand"></Button>
     
    C#
       pushMeButton.Cursor = Cursors.Hand;
    That's it!
    Share
  • 0 comments  /  posted by  Denislav Savkov  on  Sep 01, 2008 (more than a year ago)


    There is a special control in Silverlight responsible for scrolling of content. The full name of this control is System.Windows.Controls.ScrollViewer. You can use it like a regular container by placing all of the content you want to scroll inside of it. The control's properties that worth mentioning are two: HorizontalScrollBarVisibility and VerticalScrollBarVisibility. As you can guess they allow you to control the visibility of the vertical and horizontal scrollbars. The possible values are Auto, Disabled, Hidden and Visible.

    Share

Page 
Help us make SilverlightShow even better and win a free t-shirt. Whether you'd like to suggest a change in the structure, content organization, section layout or any other aspect of SilverlightShow appearance - we'd love to hear from you! Need a material (article, tutorial, or other) on a specific topic? Let us know and SilverlightShow content authors will work to have that prepared for you. (hide this)