|
In this article we will explore how to use slider in Windows Phone 7. Scrollbars and sliders are always useful in selecting continuous range based values. We will explore slider feature of Windows Phone 7 using a simple example of Color Scroll.
Let's write some code.
Step 1: Create a Windows Phone Application project and choose Silverlight for Windows Phone from template. Name the project as Windows Phone 7 - Slider.
Step 2: Create style resource collection for TextBlock as well as Slider.
<phone:PhoneApplicationPage.Resources>
<Style x:Key="textStyle" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
<Style x:Key="sliderStyle" TargetType="Slider">
<Setter Property="Minimum" Value="0" />
<Setter Property="Maximum" Value="255" />
<Setter Property="Orientation" Value="Vertical" />
</Style>
</phone:PhoneApplicationPage.Resources>
Scrollbar and Slider have their own orientation property which is entirely unrelated to PhoneApplicationPage orientation. It resembles to orientation propertly of stack panel. The default orientation of slider is horizontal. The maximum value of slider is associated with top of vertical slider which can be changed using IsDirectionReversed property.
Step 3: Place below code in the ContentPanel of the grid.
< Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Name="rect" Grid.Row="0" Grid.Column="0" />
<Grid Name="controlGrid" Grid.Row="1" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- Red column -->
<TextBlock Grid.Column="0" Grid.Row="0" Text="Red" Foreground="Red" Style="{StaticResource textStyle}" />
<Slider Name="redSlider" Grid.Column="0" Grid.Row="1" Foreground="Red" Style="{StaticResource sliderStyle}" ValueChanged="OnSliderValueChanged" />
<TextBlock Name="redText" Grid.Column="0" Grid.Row="2" Text="0" Foreground="Red" Style="{StaticResource textStyle}" />
<!-- Green column -->
<TextBlock Grid.Column="1" Grid.Row="0" Text="Green" Foreground="Green" Style="{StaticResource textStyle}" />
<Slider Name="greenSlider" Grid.Column="1" Grid.Row="1" Foreground="Green" Style="{StaticResource sliderStyle}" ValueChanged="OnSliderValueChanged" />
<TextBlock Name="greenText" Grid.Column="1" Grid.Row="2" Text="0" Foreground="Green" Style="{StaticResource textStyle}" />
<!-- Blue column -->
<TextBlock Grid.Column="2" Grid.Row="0" Text="Blue" Foreground="Blue" Style="{StaticResource textStyle}" />
<Slider Name="blueSlider" Grid.Column="2" Grid.Row="1" Foreground="Blue" Style="{StaticResource sliderStyle}" ValueChanged="OnSliderValueChanged" />
<TextBlock Name="blueText" Grid.Column="2" Grid.Row="2" Text="0" Foreground="Blue" Style="{StaticResource textStyle}" />
</Grid>
</Grid>
Step 4: All the Slider have their ValueChanged events set to same handler.
void OnSliderValueChanged(object sender, RoutedPropertyChangedEventArgs<double> args)
{
Color clr = Color.FromArgb(255, (byte)redSlider.Value,(byte)greenSlider.Value,(byte)blueSlider.Value);
rect.Fill = new SolidColorBrush(clr);
redText.Text = clr.R.ToString("X2");
greenText.Text = clr.G.ToString("X2");
blueText.Text = clr.B.ToString("X2");
}
Value of the Slider is not initiated in the XAML, the reason is if Value is set to Slider in the construction of this page, ValueChanged event will be triggered. It is quite possible that ValueChanged event will be fired before the page is contructed completely.
Step 5: Set the slider value after the InitializeComponent.
public MainPage()
{
InitializeComponent();
redSlider.Value = 128;
greenSlider.Value = 128;
blueSlider.Value = 128;
}
Step 6: Two Rows of portrait mode and two columns for landscape mode needs to be swaped to create the GridDefinitition and ColumnDefinition objects for new orientation. The portrait of landscape can be checked using bitwise OR operation between the Orientation property and the Portrait or Landscape members and then check for non-zero result.
protected override void OnOrientationChanged(OrientationChangedEventArgs args)
{
ContentPanel.RowDefinitions.Clear();
ContentPanel.ColumnDefinitions.Clear();
// Landscape
if ((args.Orientation & PageOrientation.Landscape) != 0)
{
ColumnDefinition coldef = new ColumnDefinition();
coldef.Width = new GridLength(1, GridUnitType.Star);
ContentPanel.ColumnDefinitions.Add(coldef);
coldef = new ColumnDefinition();
coldef.Width = new GridLength(1, GridUnitType.Star);
ContentPanel.ColumnDefinitions.Add(coldef);
Grid.SetRow(controlGrid, 0);
Grid.SetColumn(controlGrid, 1);
}
// Portrait
else
{
RowDefinition rowdef = new RowDefinition();
rowdef.Height = new GridLength(1, GridUnitType.Star);
ContentPanel.RowDefinitions.Add(rowdef);
rowdef = new RowDefinition();
rowdef.Height = new GridLength(1, GridUnitType.Star);
ContentPanel.RowDefinitions.Add(rowdef);
Grid.SetRow(controlGrid, 1);
Grid.SetColumn(controlGrid, 0);
}
base.OnOrientationChanged(args);
}
Step 7: Change the page orientation from Portrait to PortraitOrLandscape
SupportedOrientations ="PortraitOrLandscape"
Now run the application and turn the phone in landscape mode.
This ends the article of slider in Windows Phone 7.
|