I'm creating a wpf app that can be controlled by a remote control or a keyboard. I'm trying to create a ComboBox that when focus moves to it, the text will glow. By clicking ok on the remote (Or enter on the keyboard) the dropdown appears allowing the user to make their choice.
To make the keyboard navigation work I created a custom control which extends a combobox. Everything is working as it should but I'm having trouble styling it.
I want the ComboBox to be a textbox with the Glow effect mentioned above but I'm having trouble working out where to place the Triggers.
In the below Xaml I get an error that "FlowMenuComboBoxContentTemplateGlow" can't be found. I'm also having trouble working out what I need to bind to in the Textbox to show the Selected Item's text.
Can anyone help?
Thanks
<!--Flow Menu Text-->
<Style x:Key="FlowMenuText"
TargetType="TextBlock">
<Setter Property="Foreground"
Value="LightGray" />
<Setter Property="FontFamily"
Value="Segoe UI Light, Lucida Sans Unicode, Verdana" />
<Setter Property="FontSize"
Value="24" />
<Setter Property="TextOptions.TextHintingMode"
Value="Animated" />
</Style>
<!--Flow Menu KN ComboBox ContentTemplate-->
<DataTemplate x:Key="FlowMenuComboBoxContentTemplate">
<TextBlock Text="WHAT SHOULD I BIND TO?" Style="{DynamicResource FlowMenuText}">
<TextBlock.Effect>
<DropShadowEffect x:Name="FlowMenuComboBoxContentTemplateGlow" BlurRadius="8" Color="LightGray" ShadowDepth="0" Opacity="0" />
</TextBlock.Effect>
</TextBlock>
</DataTemplate>
<!--Flow Menu KNComboBox-->
<Style x:Key="FlowMenuComboBox"
TargetType="ComboBox">
<Setter Property="BorderBrush"
Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid x:Name="MainGrid" SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Popup x:Name="Popup" AllowsTransparency="true" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
<Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
<ScrollViewer x:Name="DropDownScrollViewer">
<Grid RenderOptions.ClearTypeHint="Enabled">
<Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}"/>
</Canvas>
<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ScrollViewer>
</Border>
</Popup>
<ContentPresenter ContentTemplate="{DynamicResource FlowMenuComboBoxContentTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="true" Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<!-- THIS CURRENTLY THROWS AN ERROR
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="GotFocus">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FlowMenuComboBoxContentTemplateGlow" Storyboard.TargetProperty="Opacity" From="0"
To="1" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="LostFocus">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FlowMenuComboBoxContentTemplateGlow" Storyboard.TargetProperty="Opacity" From="1"
To="0" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</ControlTemplate.Triggers>-->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Moving the triggers into the ItemTemplate and using relative source to to get the isFocused path of the comboboxitem fixed this issue.
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Border x:Name="FlowMenuComboBoxItemTemplatePosterGlow" Style="{DynamicResource PosterBorder}" BorderThickness="1" Opacity="0">
<Border.Effect>
<BlurEffect KernelType="Gaussian" Radius="3" />
</Border.Effect>
</Border>
<Grid Margin="5,5,5,5">
<TextBlock Text="{Binding}" Style="{DynamicResource FlowMenuText}">
<TextBlock.Effect>
<DropShadowEffect x:Name="FlowMenuComboBoxItemTemplateGlow" BlurRadius="8" Color="LightGray" ShadowDepth="0" Opacity="0" />
</TextBlock.Effect>
</TextBlock>
</Grid>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ComboBoxItem}},Path=IsFocused}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FlowMenuComboBoxItemTemplatePosterGlow" Storyboard.TargetProperty="Opacity" From="0"
To="1" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FlowMenuComboBoxItemTemplateGlow" Storyboard.TargetProperty="Opacity" From="0"
To="1" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FlowMenuComboBoxItemTemplatePosterGlow" Storyboard.TargetProperty="Opacity" From="1"
To="0" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FlowMenuComboBoxItemTemplateGlow" Storyboard.TargetProperty="Opacity" From="1"
To="0" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
Related
I am currently working on my own Themes for all the wpf controls.
I can't really get the Checkbox Usercontrol working.
I'm trying to get a smooth color fade in / fade out when checking the checkbox.
This is the relevant part of my code in my ressource dictionary:
<Border x:Name="checkbox" CornerRadius="5" Width="18" Height="18" BorderThickness="1" BorderBrush="Black">
<!-- Checkmark -->
<TextBlock Text="" ClipToBounds="True" FontFamily="Segoe MDL2 Assets" HorizontalAlignment="Left"
Background="Transparent" Foreground="White" FontSize="15" FontWeight="ExtraBold"/>
<Border.Style>
<Style TargetType="Border">
<!-- Animations (Color fade in and out) -->
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsChecked}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#006092" Duration="0:0:0.2" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsChecked}" Value="False">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#FFFFFF" Duration="0:0:0.2" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
The fade out works (Value=false), but the fade in never triggers. I added a "From" value to confirm / test this, it doesn't trigger at all.
All help would be much appreciated!
Kind Regards
The proper way is to use the EnterAction and ExitAction of the Trigger and to move the trigger from the Style to the ControlTemplate. Also note how the Border properties are wired to the templated parent to allow local values having an effect.
<CheckBox IsChecked="True" BorderThickness="1" BorderBrush="Black">
<CheckBox.Template>
<ControlTemplate TargetType="CheckBox">
<Border x:Name="checkbox"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="5"
Width="18" Height="18" >
<!-- Checkmark -->
<TextBlock Text="" ClipToBounds="True" FontFamily="Segoe MDL2 Assets" HorizontalAlignment="Left"
Background="Transparent" Foreground="White" FontSize="15" FontWeight="ExtraBold"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#006092" Duration="0:0:0.2" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#FFFFFF" Duration="0:0:0.2" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</CheckBox.Template>
</CheckBox>
I'm new to WPF and I would like to change to color of the text and icon of a button template. But it seems I can only change the opacity.
I guess I should apply the style to the children of the button but I don't know how.
Here is the template:
<Button x:Name="btnApp1" Width="56" Height="66" Margin="0,0,0,0" Style="{StaticResource AppButton}">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<iconPacks:PackIconMaterial Kind="StarOutline" Width="48" Height="48" VerticalAlignment="Top" HorizontalAlignment="Center" Foreground="#FFFFFFFF" />
<TextBlock x:Name="tButton" HorizontalAlignment="Center" VerticalAlignment="Bottom" Foreground="#FFFFFFFF" FontWeight="Bold">PVIE</TextBlock>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
And here is the style:
<Style x:Key="AppButton" TargetType="{x:Type Button}">
<Setter Property="Opacity" Value="0.25" />
<Setter Property="Foreground" Value="#FFFF9966" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0:0.3" />
<!--<ColorAnimation Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" To="Green" Duration="0:0:0:0.3" />-->
<ColorAnimationUsingKeyFrames Storyboard.Target="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Storyboard.TargetProperty="(TextBox.Foreground).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="Green" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.25" Duration="0:0:0:0.3" />
<!--<ColorAnimation Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" To="White" Duration="0:0:0:0.3" />-->
<ColorAnimationUsingKeyFrames Storyboard.Target="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Storyboard.TargetProperty="(TextBox.Foreground).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="White" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
Thanks for your help.
Bind the Foreground property of the TextBlock and the Icon in the ControlTemplate using a {TemplateBinding}:
<Button x:Name="btnApp1" Width="56" Height="66" Margin="0,0,0,0" Style="{StaticResource AppButton}">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<iconPacks:PackIconMaterial Kind="StarOutline" Width="48" Height="48" VerticalAlignment="Top" HorizontalAlignment="Center"
Foreground="{TemplateBinding Foreground}" />
<TextBlock x:Name="tButton" HorizontalAlignment="Center" VerticalAlignment="Bottom"
Foreground="{TemplateBinding Foreground}" FontWeight="Bold">PVIE</TextBlock>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
I have an expander that is styled (the toggle button basically spins around) which is good for when the expander expands in an upwardley mobile direction.
However I now want it to move in a horizontal direction, but I cant figure out what I need to add/change.
The main thing I tried was the obvious ExpandDirection="Left" property on the expander but that had no effect
This is my XAML:
<UserControl.Resources>
<!--Import the value converter-->
<helpers:MultiplyConverter x:Key="MultiplyConverter" />
<!--The control template for a toggle button (this will be used for the expander button)-->
<ControlTemplate x:Key="AnimatedExpanderButtonTemp" TargetType="{x:Type ToggleButton}">
<Border x:Name="ExpanderButtonBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}" >
<Grid>
<Rectangle Fill="Transparent"
Grid.ColumnSpan="2"/>
<Ellipse Name="Circle"
Grid.Column="0"
Stroke="DarkGray"
Width="20"
Height="20"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<Path x:Name="Arrow"
Grid.Column="0"
Data="M 1,1.5 L 4.5,5 8,1.5"
Stroke="#FF666666"
StrokeThickness="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<RotateTransform Angle="90"/>
</Path.RenderTransform>
</Path>
</Grid>
</Border>
<!--The triggers for the toggle button (will animate the rotation from pointing down to up and vice versa-->
<ControlTemplate.Triggers>
<Trigger Property="IsChecked"
Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)"
To="270"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)"
To="90"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<!-- MouseOver, Pressed behaviours-->
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Stroke"
Value="#FF3C7FB1"
TargetName="Circle"/>
<Setter Property="Stroke"
Value="#222"
TargetName="Arrow"/>
</Trigger>
<Trigger Property="IsPressed"
Value="true">
<Setter Property="Stroke"
Value="#FF526C7B"
TargetName="Circle"/>
<Setter Property="StrokeThickness"
Value="1.5"
TargetName="Circle"/>
<Setter Property="Stroke"
Value="#FF003366"
TargetName="Arrow"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!--A style for the expander-->
<ControlTemplate x:Key="RevealExpanderTemp" TargetType="{x:Type Expander}">
<DockPanel>
<ToggleButton x:Name="ExpanderButton"
DockPanel.Dock="Left"
Template="{StaticResource AnimatedExpanderButtonTemp}"
Content="{TemplateBinding Header}"
IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
OverridesDefaultStyle="True"
Padding="1.5,0">
</ToggleButton>
<ScrollViewer x:Name="ExpanderContentScrollView" DockPanel.Dock="Bottom"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Bottom"
>
<ScrollViewer.Tag>
<sys:Double>0.0</sys:Double>
</ScrollViewer.Tag>
<ScrollViewer.Height>
<MultiBinding Converter="{StaticResource MultiplyConverter}">
<Binding Path="ActualHeight" ElementName="ExpanderContent"/>
<Binding Path="Tag" RelativeSource="{RelativeSource Self}" />
</MultiBinding>
</ScrollViewer.Height>
<ContentPresenter x:Name="ExpanderContent" ContentSource="Content"/>
</ScrollViewer>
</DockPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ExpanderContentScrollView"
Storyboard.TargetProperty="Tag"
To="1"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ExpanderContentScrollView"
Storyboard.TargetProperty="Tag"
To="0"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</UserControl.Resources>
<!--The expandr which encapsulates the settings for the given image-->
<Expander Name="expanderImageSettings"
Margin="5"
HorizontalAlignment="Stretch"
Grid.Row="1"
ExpandDirection="Left"
Template="{StaticResource RevealExpanderTemp}"
OverridesDefaultStyle="True"
VerticalAlignment="Top">
<!--The main grid for all controls-->
<Grid Name="grdMain">
<ContentPresenter Name="FeatureContentPresenter" Grid.Row="1"/>
</Grid>
</Expander>
Any help would be most appreciated
I set up a control template for a button in my wpf application but I'm having trouble animating the ContentPresenter (which is text) Foreground colour in my storyboard.
Below is the xaml to set up the button
<ControlTemplate x:Key="SaveButton" TargetType="{x:Type ButtonBase}">
<Border x:Name="buttonBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Control Grid.Column="0" Template="{DynamicResource save_icon}"
Margin="10,0,0,0"
/>
<TextBlock x:Name="buttonContent"
Text="Save"
Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Grid.Column="1"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsDefaulted" Value="True">
<Setter Property="BorderBrush" TargetName="buttonBorder" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
To="#000" Duration="0:0:0.2"
Storyboard.TargetName="buttonBorder"
Storyboard.TargetProperty="Background.Color"/>
<ColorAnimation
To="#fff" Duration="0:0:0.2"
Storyboard.TargetName="buttonContent"
Storyboard.TargetProperty="TextElement.Foreground"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
To="#fff" Duration="0:0:0.2"
Storyboard.TargetName="buttonBorder"
Storyboard.TargetProperty="Background.Color"/>
<ColorAnimation
To="#000" Duration="0:0:0.2"
Storyboard.TargetName="buttonContent"
Storyboard.TargetProperty="TextElement.Foreground"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
However on mouse hover I get the following error - Cannot resolve all property references in the property path 'TextElement.Foreground'
Why is this and how do I fix this?
<ColorAnimation Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)" To="Red"/>
<ColorAnimation Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="Red"/>
Full example for doubters
<Button Content="Context">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border Name="bord" Background="CadetBlue">
<TextBlock Name="tekst" Text="text" Foreground="Black"/>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="bord" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Red"/>
<ColorAnimation Storyboard.TargetName="tekst" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="White"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
I am trying to make a the text of a selected cell bold in Silverlight 4 using XAML. I have tried modifying the DataGridCell template, but I have come only as far as modifying the background color on selection and can't find anything for the font weight.
This is what I did and works for me:
<UserControl.Resources>
<Style x:Key="DataGridCellStyle1" TargetType="sdk:DataGridCell">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="sdk:DataGridCell">
<Grid x:Name="Root" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CurrentStates">
<VisualState x:Name="Regular"/>
<VisualState x:Name="Current">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty="(Content).FontWeight"
Duration="0">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Bold" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="Invalid">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="InvalidVisualElement"/>
<ColorAnimation Duration="0" To="#FFFFFFFF" Storyboard.TargetProperty="(Fill).Color" Storyboard.TargetName="FocusVisual"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="FocusVisual" Fill="#66FFFFFF" HorizontalAlignment="Stretch" IsHitTestVisible="false" Opacity="0" Stroke="Blue" StrokeThickness="3" VerticalAlignment="Stretch"/>
<ContentPresenter x:Name="contentPresenter"
Margin="0"
FlowDirection="RightToLeft"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
</ContentPresenter>
<Rectangle x:Name="InvalidVisualElement" HorizontalAlignment="Stretch" IsHitTestVisible="False" Opacity="0" Stroke="#FFDC000C" StrokeThickness="1" VerticalAlignment="Stretch"/>
<Rectangle x:Name="RightGridLine" Grid.Column="1" VerticalAlignment="Stretch" Width="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<sdk:DataGrid AutoGenerateColumns="False"
Height="154"
HorizontalAlignment="Left"
Margin="38,41,0,0"
Name="dataGrid1"
VerticalAlignment="Top"
Width="182" CellStyle="{StaticResource DataGridCellStyle1}" >
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Binding="{Binding Key}" />
<sdk:DataGridTextColumn Binding="{Binding Value}" />
</sdk:DataGrid.Columns>
</sdk:DataGrid>
</Grid>
The binding code in MainPage.cs
IDictionary<string, object> test = new Dictionary<string, object>();
test.Add(new KeyValuePair<string, object>("Name", "A"));
test.Add(new KeyValuePair<string, object>("Height", 2));
this.dataGrid1.ItemsSource = test;
look at this code in the cell style:
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty="(Content).FontWeight"
Duration="0">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Bold" />
</ObjectAnimationUsingKeyFrames>