Welcome again! Today I’ll talk about XAML styling. How you can make your XAML controls more beautiful and customized. If you search “windows phone xaml style” you’ll get some helpful references. Styling XAML is not only for customizing your controls but also make code much clean and easily readable. So let’s get crack in Windows Phone XAML Styling.
I’ll just try to explain how you can use XAML styling in you existent projects. I’m just going to modify my existing user control to show you the procedure. If you’ve read my Windows Phone Controls – Part 1 article, then you can understand the difference between previous and current XAML code. I’ll not modify all the controls, but the “Popup Window”. I’ve used a “User Control”, I’ll just modify that page.
First of take a new Project and add a new “User Control”. We’ve used these XAML code in our previous Project.
<Grid>
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="1" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="1">
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="1">
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="1">
<StackPanel Orientation="Vertical" Height="200" Width="200" VerticalAlignment="Center">
<TextBlock Text="This is a Popup!" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,60,0,0"/>
<TextBlock Text="Hit the button again to hide me" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,10,0,0" TextWrapping="Wrap" TextAlignment="Center"/>
<Button HorizontalAlignment="Center" Content="Close Popup" Click="ClosePopup" />
</StackPanel>
</Border>
</Border>
</Border>
</Border>
</Grid>
and the design is look like this.
Now, we’ll use XAML styling in the same XAML code and make it much clean and customized as well. To do so, you’ve to put resources as shown below.
<UserControl
...
d:DesignWidth="400">
<UserControl.Resources>
...
</UserControl.Resources>
<Grid>
...
</Grid>
</UserControl>
All you’ve to do, is put all your style properties inside the Resources tag. First of all we’ll create a “Border Style” for our “Border” control.
<UserControl.Resources> <Style x:Key="BorderStyle" TargetType="Border"> <Setter Property="BorderThickness" Value="2"/> <Setter Property="CornerRadius" Value="0,10,0,10"/> </Style> </UserControl.Resources>
Note: If you’re using this in Blank of Basic pages, the code will be like this.
<Page.Resources> <Style x:Key="BorderStyle" TargetType="Border"> <Setter Property="BorderThickness" Value="2"/> <Setter Property="CornerRadius" Value="0,10,0,10"/> </Style> </Page.Resources>
As we’re using a “User Control”, so we used “UserControl.Resources”.
Here, we’re considering only one “Border” control. If you look above the code, we gave the style name “BorderStyle” and set target to “Border”. In which control you work, you’ve to give a unique name and set target of that contol. Also, we’ve set a property name “BorderThickness” and set value to “2”, which will make the thickness of the border’s outer edges. And we’ve also set “CornerRadious” to “0,10,0,10”, which will make the upper right and lower left corner edges little bit round.
Now, similarly we’ve added “TextBox” and “Button” styles.
<UserControl.Resources> <Style x:Key="BorderStyle" TargetType="Border"> <Setter Property="BorderThickness" Value="2"/> <Setter Property="CornerRadius" Value="0,10,0,10"/> </Style> <Style x:Key="StackPanelStyle" TargetType="StackPanel"> <Setter Property="Orientation" Value="Vertical"/> <Setter Property="VerticalAlignment" Value="Center"/> <Setter Property="Height" Value="200"/> <Setter Property="Width" Value="200"/> </Style> <Style x:Key="ButtonStyle" TargetType="Button"> <Setter Property="HorizontalAlignment" Value="Center"/> <Setter Property="Content" Value="Close Popup"/> <Setter Property="Background" Value="Green"/> </Style> <Style x:Key="TextBlockStyle" TargetType="TextBlock"> <Setter Property="VerticalAlignment" Value="Center"/> <Setter Property="HorizontalAlignment" Value="Center"/> <Setter Property="Text" Value="This is a Popup!"/> <Setter Property="Margin" Value="0,60,0,0"/> <Setter Property="Foreground" Value="Red"/> </Style> <Style x:Key="TextBlockStyle1" TargetType="TextBlock"> <Setter Property="VerticalAlignment" Value="Center"/> <Setter Property="HorizontalAlignment" Value="Center"/> <Setter Property="TextAlignment" Value="Center"/> <Setter Property="TextWrapping" Value="Wrap"/> <Setter Property="Text" Value="Hit the button again to hide me."/> <Setter Property="Margin" Value="0,10,0,0"/> <Setter Property="Foreground" Value="Gray"/> </Style> </UserControl.Resources>
If you take a look the old XAML code, you can see all the properties are here exactly, exception in “Botton” click event. You’ve to put this event in the main Grid’s “Button” control code.
<Grid>
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
Style="{StaticResource BorderStyle}">
<StackPanel Style="{StaticResource StackPanelStyle}">
<TextBlock Style="{StaticResource TextBlockStyle}"/>
<TextBlock Style="{StaticResource TextBlockStyle1}"/>
<Button Style="{StaticResource ButtonStyle}" Click="ClosePopup" />
</StackPanel>
</Border>
</Grid>
All you need to do is just reference the styles in corresponding controls. Like in “Border” control we’ve used “Style=”{StaticResource BorderStyle}”.. “. After the “StaticResource” name the Style name.
Another important thing you can do is to separate the XAML styling into different location. To make much clean XAML. To do so, just open “App.xaml” and put the same code there, like this
<Application
...
>
<!--Application Resources-->
<Application.Resources>
<Style x:Key="BorderStyle" TargetType="Border">
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="CornerRadius" Value="5"/>
</Style>
<Style x:Key="StackPanelStyle" TargetType="StackPanel">
<Setter Property="Orientation" Value="Vertical"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Height" Value="200"/>
<Setter Property="Width" Value="200"/>
</Style>
</Application.Resources>
</Application>
Only difference is the tag, here it should be “Application.Resources”, because it’s in “App.xaml” file. So, the tag structure should like “Type.Resources”. Here type can “Page”, “Application”, “UserControl” etc.
Now, in “Main Page.xaml” take Button control to show the “Popup Window”,
<Page.Resources>
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Name" Value="PopupButton"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Width" Value="140"/>
<Setter Property="Margin" Value="10,0,0,0"/>
<Setter Property="Content" Value="Show Popup"/>
</Style>
</Page.Resources>
<Grid>
<Button Style="{StaticResource ButtonStyle}" Click="PopupButton_Click"/>
</Grid>
and C# code of this “Button” event handler is given below.
private void PopupButton_Click(object sender, RoutedEventArgs e)
{
if (!popup.IsOpen)
{
popup.Child = new PopupPanel();
popup.VerticalOffset = 250.0;
popup.HorizontalOffset = 100.0;
popup.IsOpen = true;
}
}
Popup popup = new Popup();
So, if you run the application it’ll look like this.
Here, we’ve another sample, which “Popup Window” is round. You can simply do that just changing this code in “PopupPanel.xaml”
<Page.Resources> <Style x:Key="BorderStyle" TargetType="Border"> <Setter Property="BorderThickness" Value="2"/> <Setter Property="CornerRadius" Value="100"/> </Style> </Page.Resources>
Hope, you’ve understand the basic of XAML styling. I’ll be here with a new topic soon. Till then good bye. Have nice day. Happy coding.
You can download the full source code from here,
Download link: http://1drv.ms/1xVS0Qj
Download link: http://1drv.ms/1xVS0Qj
Comments
Post a Comment