XAML (WPF) BLOG

Hi,

Here is an example of how to change in a WPF application the theme at runtime.

As you can see  when we cahnge the selected combobox item it automatically changes the theme, which actually clears the application’s resources and loads adifferent xaml file with resources and added this to the SelectionChanged event.

 private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ResourceDictionary skin = new ResourceDictionary();
skin.Source = new Uri(@”" + cbxThemes.SelectedValue.ToString() + “.xaml”, UriKind.Relative);
Application.Current.Resources.MergedDictionaries.Clear();
Application.Current.Resources.MergedDictionaries.Add(skin);
}
Here you can download the sample files.

WPF change Theme sample

Hi,

Sorry for not posting any news tutorials, I’ve been busy with trying to add a news section to my site and now i’m currently working and a Silverlight version of my site.

As you can see in the picture below I’ve tried to  reproduce the Treeview from 2advanced.com website:

Here is the code sample if you have any question please ask them and i will try to respond to them.

Hi,

Today I have designed a slick ComboBox, which is composed of a ToggleButton and a PopUp.

Here is the code for TogleButton:

<Style x:Key="ComboBoxReadonlyToggleButton" TargetType="{x:Type ToggleButton}">

<Setter Property="OverridesDefaultStyle" Value="true"/>

<Setter Property="IsTabStop" Value="false"/>

<Setter Property="Focusable" Value="false"/>

<Setter Property="ClickMode" Value="Press"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ToggleButton}">

<Border x:Name="Chrome" SnapsToDevicePixels="true" BorderBrush="#7F4FAD36" BorderThickness="0,0,1,1" CornerRadius="4,4,4,4">

<Border.Background>

<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">

<GradientStop Color="#FFFFFFFF" Offset="0"/>

<GradientStop Color="#FFD7E9C1" Offset="1"/>

</LinearGradientBrush>

</Border.Background>

<Grid HorizontalAlignment="Right" Width="20">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="3"/>

<ColumnDefinition/>

</Grid.ColumnDefinitions>

<Rectangle Width="1" Fill="{DynamicResource BurshDots}" Margin="0,3,0,4"/>

<Path Grid.Column="1" Fill="#FF436B13" HorizontalAlignment="Center" Margin="3,1,0,0" x:Name="Arrow" VerticalAlignment="Center" Data="{StaticResource DownArrowGeometry}"/>

</Grid>

</Border>

<ControlTemplate.Triggers>

<Trigger Property="IsChecked" Value="True">

<Setter Property="BorderThickness" TargetName="Chrome" Value="1,1,1,0"/>

<Setter Property="CornerRadius" TargetName="Chrome" Value="4,4,0,0"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

The style for the PopUp which actualy is in the template of the ComboBox:

<Popup Margin="1" x:Name="PART_Popup" AllowsTransparency="true" IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Grid.ColumnSpan="2">

<Border x:Name="DropDownBorder" Background="#FFD7E9C1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding Path=ActualWidth, ElementName=MainGrid}" BorderBrush="#7F4FAD36" BorderThickness="1,0,1,1" CornerRadius="0,0,4,4">

<ScrollViewer CanContentScroll="true">

<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.DirectionalNavigation="Contained"/>

</ScrollViewer>

</Border>

</Popup>

And here is the style for the ComboBox:

<Style x:Key="ComboBoxStyle" TargetType="{x:Type ComboBox}">

<Setter Property="FocusVisualStyle" Value="{StaticResource ComboBoxFocusVisual}"/>

<Setter Property="Foreground" Value="#FF436B13"/>

<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>

<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>

<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>

<Setter Property="Padding" Value="4,3"/>

<Setter Property="Margin" Value="5"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ComboBox}">

<Grid x:Name="MainGrid" SnapsToDevicePixels="true">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

<ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>

</Grid.ColumnDefinitions>

<Popup Margin="1" x:Name="PART_Popup" AllowsTransparency="true" IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Grid.ColumnSpan="2">

<Border x:Name="DropDownBorder" Background="#FFD7E9C1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding Path=ActualWidth, ElementName=MainGrid}" BorderBrush="#7F4FAD36" BorderThickness="1,0,1,1" CornerRadius="0,0,4,4">

<ScrollViewer CanContentScroll="true">

<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.DirectionalNavigation="Contained"/>

</ScrollViewer>

</Border>

</Popup>

<ToggleButton Style="{StaticResource ComboBoxReadonlyToggleButton}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" Grid.ColumnSpan="2" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>

<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" IsHitTestVisible="false" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>

</Grid>

<ControlTemplate.Triggers>

<Trigger Property="HasItems" Value="false">

<Setter Property="Height" TargetName="DropDownBorder" Value="95"/>

</Trigger>

<Trigger Property="IsEnabled" Value="false">

<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>

<Setter Property="Background" Value="#FFF4F4F4"/>

</Trigger>

<Trigger Property="IsGrouping" Value="true">

<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="FontFamily" Value="Tahoma"/>

<Setter Property="FontSize" Value="11"/>

<Style.Triggers>

<Trigger Property="IsEditable" Value="true">

<Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}"/>

<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>

<Setter Property="IsTabStop" Value="false"/>

<Setter Property="Padding" Value="3"/>

<Setter Property="Template" Value="{StaticResource ComboBoxEditableTemplate}"/>

</Trigger>

</Style.Triggers>

</Style>

Sources for the project and here is the Microsoft Expressions Design source which isthe drawing brush you can see between the arrow and the selected item.