Hi I'm trying to use a template item into the code behind c#
I'm trying to access the PictureBox which is WindowsFormHost.
And then set it to what I want.
<Style x:Key="ScreenListBox" TargetType="{x:Type ToggleButton}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Padding" Value="2,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true" Margin="-0.001,0" Background="#FFABABAB" Width="120" Height="117">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="stackPanel">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected"/>
<VisualState x:Name="SelectedUnfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="InvalidFocused"/>
<VisualState x:Name="InvalidUnfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel Orientation="Vertical" Name="TestStackPanel" d:LayoutOverrides="Height">
<Grid Margin="3" Height="85" Name="TestGrid" Background="White">
<WindowsFormsHost Name="wrapper" Margin="0,0,0,0" Background="{x:Null}">
<Forms:PictureBox Name="Picture"></Forms:PictureBox>
</WindowsFormsHost>
<StackPanel x:Name="stackPanel" Margin="0" Width="Auto" Opacity="0">
<DockPanel Margin="0" Width="Auto" Height="45">
<Rectangle Fill="#FFD8D8D8" Margin="0" Width="16" HorizontalAlignment="Left"/>
<Rectangle Fill="#FFEBE77A" Margin="0" Width="17" HorizontalAlignment="Left"/>
<Rectangle Fill="#FF60CDE9" Margin="0" Width="16" HorizontalAlignment="Left"/>
<Rectangle Fill="#FF60E98E" Margin="0" Width="16" HorizontalAlignment="Left"/>
<Rectangle Fill="#FFC65F9C" Margin="0" Width="16" HorizontalAlignment="Left"/>
<Rectangle Fill="#FFC43232" Margin="0" Width="17" HorizontalAlignment="Left"/>
<Rectangle Fill="#FF0A37A5" Margin="0" Width="16" HorizontalAlignment="Left"/>
</DockPanel>
<DockPanel HorizontalAlignment="Stretch" Height="5" Width="Auto">
<Rectangle Fill="#FF0A37A5" Margin="0" Width="16" HorizontalAlignment="Left" Height="Auto"/>
<Rectangle Fill="Black" Margin="0" Width="16" HorizontalAlignment="Left" Height="Auto"/>
<Rectangle Fill="#FFC65F9C" Margin="0" Width="17" HorizontalAlignment="Left" Height="Auto"/>
<Rectangle Fill="Black" Margin="0" Width="16" HorizontalAlignment="Left" Height="Auto"/>
<Rectangle Fill="#FF60CDE9" Margin="0" Width="16" HorizontalAlignment="Left" Height="Auto"/>
<Rectangle Fill="Black" Margin="0" Width="16" HorizontalAlignment="Left" Height="Auto"/>
<Rectangle Fill="#FFD8D8D8" Margin="0" Width="17" HorizontalAlignment="Left" Height="Auto"/>
</DockPanel>
<DockPanel HorizontalAlignment="Stretch" Height="15" VerticalAlignment="Bottom">
<TextBlock x:Name="textBlock" TextWrapping="Wrap" Opacity="0" FontWeight="Bold" Width="60" TextAlignment="Center" FontSize="9.333"/>
</DockPanel>
</StackPanel>
</Grid>
<Grid Margin="5,0" Height="20" VerticalAlignment="Bottom">
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Bottom" Margin="15,0" HorizontalAlignment="Center">
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource WrappingStyle}"/>
</ContentPresenter.Resources>
</ContentPresenter>
<Button Content="Button" Margin="0" VerticalAlignment="Top" HorizontalAlignment="Right" Style="{DynamicResource Edit}"/>
<Path x:Name="path" Data="F1M29.2007,72.9482L25.9947,75.2372L25.9947,73.7922L18.5627,73.7922L18.5627,78.9302L25.9947,78.9302L25.9947,77.4862L29.2007,79.7752z" Fill="#FF231F20" Height="9.327" Stretch="Fill" Width="14.534" HorizontalAlignment="Left" Margin="0" VerticalAlignment="Top" Opacity="0"/>
<Rectangle x:Name="rectangle" Fill="#FF231F20" Margin="0" Width="20" Height="20" Opacity="0" VerticalAlignment="Top" d:LayoutOverrides="Width, Height, VerticalMargin" HorizontalAlignment="Left"/>
</Grid>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
<Setter Property="Opacity" TargetName="path" Value="1"/>
<Setter Property="Background" TargetName="Bd" Value="#FF26A1E5"/>
</Trigger>
<Trigger Property="Selector.IsSelected" Value="False"/>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Whenever I use this style in C# I do :
var listboxitem = new ToggleButton();
listboxitem.Style = (Style)FindResource("ScreenListBox");
VideoListBox.Items.Add(listboxitem);
//Here I want to be able to use the PictureBox in ScreenListBox.
To pass it to another function.
I've been trying with Template.FindName and it didn't work.
Could anyone have a look and try to bring me into the right direction.
Thanks.
Hi I guess only one way to implement this will be to create a custom Control which you can inherit form ToggleButton. Somewhere you should define control template for your control (like generic.xaml or App.xaml). In your custom control you should override OnApplyTemplate method, where you can get access at least to the WindowsFormsHost (but maybe to PictureBox as well) with FindName method.
You can also try to use your code, before you will try to get access to PictureBox - try to invoke ApplyTemplate, maybe this will force ToggleButton to load everything and it will give you access to it's children.
Related
<Style x:Key="CSButton" TargetType="Button">
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ControlTemplate.Resources>
<Storyboard x:Key="CSImageAnimation">
<PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="image">
<EasingPointKeyFrame KeyTime="0" Value="0.5,0.5"/>
<EasingPointKeyFrame KeyTime="0:0:0.3" Value="0.5,0.5"/>
<EasingPointKeyFrame KeyTime="0:0:0.6" Value="0.5,0.5"/>
</PointAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="image">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Border
CornerRadius="2" Opacity="1">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFE27F" Offset="0"/>
<GradientStop Color="#FFFFC500" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0">
<TextBlock x:Name="CSLabel" HorizontalAlignment="Center" Margin="0,20,0,20"
VerticalAlignment="Top"
Text="Current Session" FontSize="20"
Foreground="#FF303030"/>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button x:Name="bttnPreviousSession" Height="30" Width="30"
Style="{StaticResource LeftInsideButton}" Command="{Binding UpdateSessionCommand}" />
<Image x:Name="image" Margin="0,0,0,0"
Source="/Overseer;component/Resources/CurrentSession.png"
Height="120">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Button x:Name="bttnNextSession" Height="30" Width="30" Style="{StaticResource RightInsideButton}"/>
</StackPanel>
<TextBlock x:Name="CSYLabel" HorizontalAlignment="Center" Margin="0,5,0,0"
VerticalAlignment="Top"
Text="{Binding SessionUsed}" FontSize="18"
Foreground="#FF303030"/>
</StackPanel>
<StackPanel Grid.Column="0" Grid.Row="1" Margin="10,0,10,10"
HorizontalAlignment="Stretch" VerticalAlignment="Center">
<Rectangle Fill="#FFFFF300"
Height="1" Width="220" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,10,0,0"/>
<TextBlock x:Name="ContentLabel" HorizontalAlignment="Center"
Text="1980" FontFamily="Segoe UI" VerticalAlignment="Center"
FontSize="25" Foreground="White"/>
<TextBlock x:Name="RLabel" HorizontalAlignment="Center"
Text="Strength" FontSize="24" VerticalAlignment="Center"
Foreground="#FF303030"/>
</StackPanel>
</Grid>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource CSImageAnimation}"/>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I want to click the bttnPreviousSession button which is inside the CSButton Style. I have passed the command but its not working. Clicking it fires the command on main button. I know how to do this with code behind, but want to do this with MVVM pattern, either through view or viewmodel.
I am using the ExtendedToolkit for WPF C#. Specifically I am using the DateTimePicker, I have tried changing the font size for this element however it does not change the size of the attached calendar that you use to select the date;
Is there a way to change it's FontSize in the ExtendedToolkit so it appears larger?
I have the requirement for Calendar control to display larger numbers and since DateTimePicker uses Calendar, the same solution applies here.
Calendar has CalendarDayButtonStyle property for customizing date fields. The only property to change is CalendarDayButton.FontSize:
<xctk:DateTimePicker VerticalAlignment="Top">
<xctk:DateTimePicker.Resources>
<Style TargetType="Calendar">
<Setter Property="CalendarDayButtonStyle">
<Setter.Value>
<Style TargetType="CalendarDayButton"
BasedOn="{StaticResource {x:Type CalendarDayButton}}">
<Setter Property="FontSize" Value="16"/>
</Style>
</Setter.Value>
</Setter>
</Style>
</xctk:DateTimePicker.Resources>
</xctk:DateTimePicker>
You can generate a copy of template and style for Calendar and CalendarItem through Blend tool and override the default FontSize. The copy I have generated through Blend is :
<Style x:Key="CalendarStyle1" TargetType="{x:Type Calendar}">
<Setter Property="Foreground" Value="#FF333333"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE4EAF0" Offset="0"/>
<GradientStop Color="#FFECF0F4" Offset="0.16"/>
<GradientStop Color="#FFFCFCFD" Offset="0.16"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Calendar}">
<StackPanel x:Name="PART_Root" HorizontalAlignment="Center">
<CalendarItem x:Name="PART_CalendarItem" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Style="{DynamicResource CalendarItemStyle1}"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CalendarItemStyle1" TargetType="{x:Type CalendarItem}">
<Setter Property="Margin" Value="0,3,0,3"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CalendarItem}">
<ControlTemplate.Resources>
<DataTemplate x:Key="{x:Static CalendarItem.DayTitleTemplateResourceKey}">
<TextBlock Foreground="#FF333333" FontWeight="Bold" FontSize="9.5" FontFamily="Verdana" HorizontalAlignment="Center" Margin="0,6,0,6" Text="{Binding}" VerticalAlignment="Center"/>
</DataTemplate>
</ControlTemplate.Resources>
<Grid x:Name="PART_Root">
<Grid.Resources>
<SolidColorBrush x:Key="DisabledColor" Color="#A5FFFFFF"/>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_DisabledVisual"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="1">
<Border BorderBrush="#FFFFFFFF" BorderThickness="2" CornerRadius="1">
<Grid>
<Grid.Resources>
<ControlTemplate x:Key="PreviousButtonTemplate" TargetType="{x:Type Button}">
<Grid Cursor="Hand">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="#FF73A9D8" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="(Shape.Fill).(Brush.Opacity)" Storyboard.TargetName="path"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Fill="#11E5EBF1" Opacity="1" Stretch="Fill"/>
<Grid>
<Path x:Name="path" Data="M288.75,232.25 L288.75,240.625 L283,236.625 z" Fill="#FF333333" HorizontalAlignment="Left" Height="10" Margin="14,-6,0,0" Stretch="Fill" VerticalAlignment="Center" Width="6"/>
</Grid>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="NextButtonTemplate" TargetType="{x:Type Button}">
<Grid Cursor="Hand">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="#FF73A9D8" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="(Shape.Fill).(Brush.Opacity)" Storyboard.TargetName="path"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Fill="#11E5EBF1" Opacity="1" Stretch="Fill"/>
<Grid>
<Path x:Name="path" Data="M282.875,231.875 L282.875,240.375 L288.625,236 z" Fill="#FF333333" HorizontalAlignment="Right" Height="10" Margin="0,-6,14,0" Stretch="Fill" VerticalAlignment="Center" Width="6"/>
</Grid>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="HeaderButtonTemplate" TargetType="{x:Type Button}">
<Grid Cursor="Hand">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="#FF73A9D8" Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="buttonContent"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="buttonContent"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="buttonContent" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" TextElement.Foreground="#FF333333" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1,4,1,9" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button x:Name="PART_PreviousButton" Grid.Column="0" Focusable="False" HorizontalAlignment="Left" Height="20" Grid.Row="0" Template="{StaticResource PreviousButtonTemplate}" Width="28"/>
<Button x:Name="PART_HeaderButton" Grid.Column="1" FontWeight="Bold" Focusable="False" FontSize="10.5" HorizontalAlignment="Center" Grid.Row="0" Template="{StaticResource HeaderButtonTemplate}" Height="100" VerticalAlignment="Center"/>
<Button x:Name="PART_NextButton" Grid.Column="2" Focusable="False" HorizontalAlignment="Right" Height="20" Grid.Row="0" Template="{StaticResource NextButtonTemplate}" Width="28"/>
<Grid x:Name="PART_MonthView" Grid.ColumnSpan="3" HorizontalAlignment="Center" Margin="6,-1,6,6" Grid.Row="1" Visibility="Visible">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
</Grid>
<Grid x:Name="PART_YearView" Grid.ColumnSpan="3" HorizontalAlignment="Center" Margin="6,-3,7,6" Grid.Row="1" Visibility="Hidden">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
</Grid>
</Grid>
</Border>
</Border>
<Rectangle x:Name="PART_DisabledVisual" Fill="{StaticResource DisabledColor}" Opacity="0" RadiusY="2" RadiusX="2" Stretch="Fill" Stroke="{StaticResource DisabledColor}" StrokeThickness="1" Visibility="Collapsed"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Visibility" TargetName="PART_DisabledVisual" Value="Visible"/>
</Trigger>
<DataTrigger Binding="{Binding DisplayMode, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}}" Value="Year">
<Setter Property="Visibility" TargetName="PART_MonthView" Value="Hidden"/>
<Setter Property="Visibility" TargetName="PART_YearView" Value="Visible"/>
</DataTrigger>
<DataTrigger Binding="{Binding DisplayMode, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}}" Value="Decade">
<Setter Property="Visibility" TargetName="PART_MonthView" Value="Hidden"/>
<Setter Property="Visibility" TargetName="PART_YearView" Value="Visible"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Try This.
Step 1 :
Create a Style for a Calender
<Style x:Key="styleCalendar" TargetType="{x:Type Calendar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Calendar}">
<!-- Wrapping in ViewBox will enlarge calendar of that size.-->
<Viewbox Height="400"
Width="400">
<CalendarItem x:Name="CalendarItem"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"/>
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
Step 2 :
Apply Style for your DatePicker.
<DatePicker CalendarStyle="{StaticResource styleCalendar}"
Height="25" HorizontalAlignment="Left" Name="datePicker1" Width="120" />
I've try to make the header of pivot stay at center (in image, head1 was align left). I try to change the style of pivot but it didn't work.
Here's the custom style ( I tried to add HorizontalAlignment="Center" to every where related to the header of pivot, but neither of them worked )
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
<Canvas HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
<Style x:Key="PivotHeaderItemStyle1" TargetType="Primitives:PivotHeaderItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="21,0,1,0"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Primitives:PivotHeaderItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="Center" Margin="{TemplateBinding Padding}" Opacity="{StaticResource PhonePivotUnselectedItemOpacity}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="PivotStyle1" TargetType="phone:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="{TemplateBinding Background}" Grid.RowSpan="3"/>
<ContentControl ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" HorizontalAlignment="Left" Margin="24,17,0,-7" Style="{StaticResource PivotTitleStyle}"/>
<Primitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1" ItemsPanel="{StaticResource ItemsPanelTemplate1}" ItemContainerStyle="{StaticResource PivotHeaderItemStyle1}" />
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And in Page.xaml:
<phone:Pivot Style="{StaticResource PivotStyle1}">
<phone:PivotItem x:Name="head1">
<phone:PivotItem.Header>
<TextBlock Text="head1" FontSize="30" HorizontalAlignment="Center" TextAlignment="Center"/>
</phone:PivotItem.Header>
<Grid/>
</phone:PivotItem>
<phone:PivotItem x:Name="head2">
<phone:PivotItem.Header>
<TextBlock Text="head2" FontSize="30" HorizontalAlignment="Center" TextAlignment="Center"/>
</phone:PivotItem.Header>
</phone:PivotItem>
<phone:PivotItem x:Name="head3">
<phone:PivotItem.Header>
<TextBlock Text="head3" FontSize="30" HorizontalAlignment="Center" TextAlignment="Center"/>
</phone:PivotItem.Header>
</phone:PivotItem>
<phone:PivotItem x:Name="head4">
<phone:PivotItem.Header>
<TextBlock Text="head4" FontSize="30" HorizontalAlignment="Center" TextAlignment="Center"/>
</phone:PivotItem.Header>
</phone:PivotItem>
<phone:PivotItem x:Name="head5">
<phone:PivotItem.Header>
<TextBlock Text="head5" FontSize="30" HorizontalAlignment="Center" TextAlignment="Center"/>
</phone:PivotItem.Header>
</phone:PivotItem>
</phone:Pivot>
I am trying to change background of my listpicker to some image. I was searching and I guess for do this I must implement my own version of listpicker, am I right? So I downloaded code from Windows Phone toolkit and get code for listpicker from it and other necessary things. I build my project and It's working but the problem is that I don't have rectangle where can I click to see choices in listpicker but I have list with choices in place where should be just that rectangle. What I am doing wrong? How can I fix this problem. Then I guess I could change ListPickerPage.xaml and use PickerPageUri property. Is it right? Thanks
Edit:
Code in xaml page with listpicker:
<customControls:ListPicker x:Name="LpkViolations" BorderBrush="{StaticResource PhoneForegroundBrush}"
SelectionChanged="LpkViolations_OnSelectionChanged"
FullModeItemTemplate="{StaticResource LpkFullItemTemplate}"
ItemTemplate="{StaticResource LpkItemTemplate}"
PickerPageUri="/Design/CustomControls/ListPickerPage.xaml">
and resources:
<phone:PhoneApplicationPage.Resources>
<converters:UpperConverter x:Key="upperConverter"></converters:UpperConverter>
<DataTemplate x:Name="LpkItemTemplate">
<TextBlock Text="{Binding Path=AppResources.add_user_violation_title, Source={StaticResource LocalizedStrings}}" />
</DataTemplate>
<DataTemplate x:Name="LpkFullItemTemplate">
<Grid Margin="0,0,0,36">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Points}" FontSize="48"
Foreground="DarkBlue"
VerticalAlignment="Top"
HorizontalAlignment="Center"
Width="50"
Visibility="{StaticResource PhoneLightThemeVisibility}"/>
<TextBlock Text="{Binding Points}" FontSize="48"
Foreground="SkyBlue"
VerticalAlignment="Top"
HorizontalAlignment="Center"
Width="50"
Visibility="{StaticResource PhoneDarkThemeVisibility}"/>
<StackPanel Grid.Column="1" VerticalAlignment="Top" >
<TextBlock Text="{Binding Label}" TextWrapping="Wrap"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
HorizontalAlignment="Left"
VerticalAlignment="Top" FontSize="{StaticResource PhoneFontSizeMedium}" FontWeight="Bold"
Foreground="{StaticResource PhoneForegroundBrush}"/>
<StackPanel Orientation="Horizontal">
<Image Source="/Assets/Images/List/ic_fine.png" Visibility="{Binding FineVisibility}"
Margin="12,4" />
<TextBlock Text="{Binding FineToView}" TextWrapping="Wrap"
Opacity="0.65" FontSize="{StaticResource PhoneFontSizeNormal}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
HorizontalAlignment="Left"
Foreground="{StaticResource PhoneForegroundBrush}"
VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Image Source="/Assets/Images/List/ic_administrative_fine.png" Visibility="{Binding AdministrativeFineVisibility}"
Margin="12,4" />
<TextBlock Text="{Binding AdministrativeFineToView}" TextWrapping="Wrap"
Opacity="0.65" FontSize="{StaticResource PhoneFontSizeNormal}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
VerticalAlignment="Center"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
ListPickerPage.xaml is exact same as in toolkit:
<phone:PhoneApplicationPage
x:Class="BodovySystem.Design.CustomControls.ListPickerPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
shell:SystemTray.IsVisible="True"
shell:SystemTray.BackgroundColor="{StaticResource PhoneChromeColor}"
toolkit:TiltEffect.IsTiltEnabled="True">
<phone:PhoneApplicationPage.Resources>
<Style x:Key="ListBoxItemCheckedStyle" TargetType="ListBoxItem" >
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Margin" Value="-6 0 0 -1"/>
<Setter Property="Padding" Value="12 0 0 0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyLight}"/>
<Setter Property="FontSize" Value="43"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<CheckBox IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected, Mode=TwoWay}"
Content="{TemplateBinding Content}"
x:Name="ContentContainer"
ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{TemplateBinding Foreground}"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Margin}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Padding="{TemplateBinding Padding}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
<Grid Background="{StaticResource PhoneChromeBrush}" x:Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!-- Header Title -->
<TextBlock
x:Name="HeaderTitle"
Grid.Row="0"
FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeMedium}"
Foreground="{StaticResource PhoneForegroundBrush}"
Margin="24 12 12 12">
<TextBlock.Projection>
<PlaneProjection RotationX="-90"/>
</TextBlock.Projection>
</TextBlock>
<!-- List of Items -->
<ListBox
x:Name="Picker"
Grid.Row="1"
ItemsSource="{Binding}"
Opacity="0"
toolkit:TiltEffect.IsTiltEnabled="True"
Margin="24 12 0 0"
Tap="OnPickerTapped"/>
</Grid>
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="False">
<shell:ApplicationBarIconButton
IconUri="/Toolkit.Content/ApplicationBar.Check.png"
Text="DONE"/>
<shell:ApplicationBarIconButton
IconUri="/Toolkit.Content/ApplicationBar.Cancel.png"
Text="CANCEL"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>
Here is how looks result:
.
Use this style, This colors the fullModeGrid in Green. You can customize that by putting an image as the background-
<Style TargetType="toolkit:ListPicker" x:Key="customStyle123">
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Margin" Value="{StaticResource PhoneTouchTargetOverhang}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:ListPicker">
<StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PickerStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneTextBoxEditBackgroundColor}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Foreground="{StaticResource PhoneSubtleBrush}"
FontSize="{StaticResource PhoneFontSizeNormal}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="0 0 0 8"/>
<Grid>
<Border
x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding Background}"
BorderThickness="2">
<Canvas x:Name="ItemsPresenterHost" MinHeight="46">
<ItemsPresenter x:Name="ItemsPresenter">
<ItemsPresenter.RenderTransform>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform"/>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</Canvas>
</Border>
<Popup x:Name="FullModePopup">
<Border Background="{StaticResource PhoneChromeBrush}">
<!-- Popup.Child should always be a Border -->
<!-- Set the background of this grid to any image, I am setting it to GREEN -->
<Grid Background="Green">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<ContentControl
Grid.Row="0"
Content="{TemplateBinding FullModeHeader}"
Foreground="{StaticResource PhoneForegroundBrush}"
FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeMedium}"
HorizontalAlignment="Left"
Margin="24 12 0 0"/>
<ListBox
x:Name="FullModeSelector"
Grid.Row="1"
ItemTemplate="{TemplateBinding FullModeItemTemplate}"
FontSize="{TemplateBinding FontSize}"
Margin="{StaticResource PhoneMargin}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
<!-- Ensures Sall containers will be available during the Loaded event -->
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</Border>
</Popup>
</Grid>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
also, ListPicker UI Declaration
<toolkit:ListPicker ItemCountThreshold="1" Background="White" Width="180" Foreground="Black" Style="{StaticResource customStyle123}" Name="lpkCategories" Height="67" VerticalAlignment="Top">
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<TextBlock FontSize="28" Text="{Binding}" HorizontalAlignment="Left" />
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock FontSize="36" Text="{Binding}" HorizontalAlignment="Left" />
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
Hope this helps.
I have a template for Combobox, code is mostly from msdn documentation.
I want to change the color of the arrow to gray, when the combo box is disabled.
any ideas?
here's the code:
<!--ComboBoxStyle-->
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid DataContext="{Binding}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="0" BorderThickness="1" BorderBrush="{StaticResource AlpmGray}" Background="Transparent" />
<Border Grid.Column="0" CornerRadius="0" Margin="1" Background="White"/>
<ContentControl Content="{Binding ComboPath}"/>
<Path x:Name="Arrow" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z" Fill="{StaticResource AlpmRed}"/>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox"
TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
</ControlTemplate>
<Style x:Key="{x:Type ComboBox}" TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="MinWidth" Value="30" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="EditStates">
<VisualState x:Name="Editable">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="PART_EditableTextBox">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="ContentSite">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Uneditable" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ToggleButton x:Name="ToggleButton" Template="{StaticResource ComboBoxToggleButton}" Grid.Column="2"
Focusable="false"
ClickMode="Press"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay,
RelativeSource={RelativeSource TemplatedParent}}" DataContext="{Binding}" />
<ContentPresenter x:Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,23,3"
VerticalAlignment="Stretch"
HorizontalAlignment="Left">
</ContentPresenter>
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Margin="3,3,23,3"
Focusable="True"
Background="Transparent"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}" />
<Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True"
Focusable="False" PopupAnimation="Slide">
<Grid x:Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder" BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="{StaticResource AlpmColorLightGray}" />
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush Color="White" />
</Border.Background>
</Border>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Border" Padding="2" SnapsToDevicePixels="true" Background="White">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource AlpmColorLightGray}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource AlpmColorLightGray}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I think the best way is to bind the Fill on the shape to the foreground of the toggle button, which you can either do per-instance, or for all combo boxes using this control template; this solution uses the latter:
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid DataContext="{Binding}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="0" BorderThickness="1" BorderBrush="{StaticResource AlpmGray}" Background="Transparent" />
<Border Grid.Column="0" CornerRadius="0" Margin="1" Background="White"/>
<ContentControl Content="{Binding ComboPath}"/>
<Path x:Name="Arrow" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z" Fill="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}">
</Path>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource TemplatedParent}}" Value="False">
<Setter Property="Foreground" Value="{StaticResource AlpmGray}"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource TemplatedParent}}" Value="True">
<Setter Property="Foreground" Value="{StaticResource AlpmRed}"></Setter>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
This binds the Fill to the TemplatedParent (in this case the ToggleButton), and thus the enabled state of the button (generally tied to the parent control).