Silverlight - Content Model

The buttons offer a form of content to the model content. Models crop up a lot in controls. The idea is simple. It will accept any content and not just text. If you want to create a truly exotic button, you could even place other content controls such as text boxes and buttons inside (and nest still elements inside these). It is doubtful that such an interface would make much sense, but it is possible.

Let us have a look at a simple example with button, inside button other content controls.

<UserControl x:Class = "ContentModel.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
	
      <Button Margin = "3" Height = "70" Width = "215"> 
         <Grid Margin = "5"> 
            <Polygon Points = "100,25 125,0 200,25 125,50" Fill = "LightSteelBlue" /> 
            <Polygon Points = "100,25 75,0 0,25 75,50" Fill = "LightGray"/> 
         </Grid> 
      </Button> 
		
   </Grid> 
	
</UserControl>

When the above code is compiled and executed, you will see the following button.

RangeControl

The scrollbar and slider controls are closely related. They both allow the user to choose an input value from a particular range. Conventionally, these controls signify different things. Scrollbars are normally used to set the position into a scrotal area whereas, the slider is used to specify some value or setting. These are just conventions; the controls have similar behaviors and APIs.

The range controls are simple to use. You specify the minimum and maximum values to indicate the range of values you would like the slider to represent. The Value property will vary as the use of drags varies.

The hierarchical inheritance of Slider class is as follows −

Given below are the commonly used properties of Slider.

Given below are the commonly used events in Slider class.

Given below are the commonly used methods in Slider class.

Example

Let us have a look at a simple example in which a slider and an ellipse are added and the slider controls the width of the ellipse.

<UserControl x:Class = "SliderExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" xmlns:mc = "
   http://schemas.openxmlformats.org/markup-compatibility/2006"  
   mc:Ignorable = "d" d:DesignWidth = "640" d:DesignHeight = "480"> 
   
   <Grid x:Name = "LayoutRoot">
	
      <Grid.RowDefinitions> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition /> 
      </Grid.RowDefinitions>  
		
      <Slider Minimum = "1" Maximum = "400" Value = "1" 
         ValueChanged = "Slider_ValueChanged" />  
			
      <Ellipse Grid.Row = "1" Fill = "Aqua" Width = "1" x:Name = "myEllipse" /> 
		
   </Grid> 
	
</UserControl>

Given below is the value changed event implementation is C#.

using System.Windows; 
using System.Windows.Controls; 
 
namespace SliderExample { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      }
	  
      private void Slider_ValueChanged(object sender, 
         RoutedPropertyChangedEventArgs<double> e) { 
			
            if (myEllipse != null) { 
               myEllipse.Width = e.NewValue; 
            } 
      } 
   } 
}

When the above code is compiled and executed, you will see the following output. As you can see, when you move the slider from left to right, the ellipse width increases.