Aug 212012
 
 August 21, 2012  Posted by at 8:51 am WinRT  Add comments

I was asked on Twitter last week how style or content template can be changed at runtime and I never got around to publish the example. I’ve shown plenty of examples how a style can be changed, but not how you can switch between styles or content templates. I have to examples for you but I’ll post them separately.

Changing from a gray button (boring button)

To a red (party button)

In the first example I will set the style of a button in code behind from one predefined style to another (defined in the resource dictionary).

Resourcedictionary, the two styles

[sourcecode language=”XML”]
<Style x:Key="RedStyle" TargetType="Button">
<Setter Property="Background" Value="red"/>
</Style>

<Style x:Key="GrayStyle" TargetType="Button">
<Setter Property="Background" Value="SlateGray"/>
</Style>

[/sourcecode]

The mainview

[sourcecode language=”XML”]

<Page
x:Class="StyleSwitcher.MainPage"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:StyleSwitcher"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
</Page.Resources>

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<StackPanel>
<Button x:Name="theButton" Style="{Binding BtnStyle}" Width="500" Height="500" VerticalAlignment="Center" HorizontalAlignment="Center" Click="theButton_Click"/>
</StackPanel>
</Grid>
</Page>
[/sourcecode]

The code behind

[sourcecode language=”csharp”]
using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace StyleSwitcher
{

public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
theButton.Style = Application.Current.Resources["GrayStyle"] as Style;
}

protected override void OnNavigatedTo(NavigationEventArgs e)
{
}

private void theButton_Click(object sender, RoutedEventArgs e)
{
var res = new ResourceDictionary()
{
Source = new Uri("ms-appx:///Common/StandardStyles.xaml", UriKind.Absolute)
};
theButton.Style = res["RedStyle"] as Style;

theButton.Style = Application.Current.Resources["RedStyle"] as Style;
}
}
}

[/sourcecode]

  4 Responses to “Example Metro app /WinRT: Change/switch styles or datatemplates at runtime using code behind”

  1. […] will help you to create the welcome screen that will use a WinJS ListView control…”Example Metro app /WinRT: Change/switch styles or datatemplates at runtime using code behind (Iris Classon)“I was asked on Twitter last week how style or content template can be changed […]

  2. this Solution helped me so much thx iris

  3. this Solution helped me too, thx iris

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

What is 8 + 3 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)