I edited the default Pivot Header Item Style to change its foreground property when a user changes the selected pivot item to a color of mine (See VisualState Selected, I didn't pasted everything):
<Style TargetType="PivotHeaderItem">
<!-- ... -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="PivotHeaderItem">
<Grid x:Name="Grid" Background="{TemplateBinding Background}">
<!-- ... -->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<!-- ... -->
</VisualStateGroup.Transitions>
<VisualState x:Name="Disabled">
<!-- ... -->
</VisualState>
<VisualState x:Name="Unselected" />
<VisualState x:Name="UnselectedLocked">
<!-- ... -->
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MyColor}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<!-- ... -->
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!-- ... -->
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If my PivotItem.Header is defined as a TextBlock, the foreground changes as expected.
Now I want the same with Ellipse. The problem is that Ellipse doesn't have a foreground property. I thought I maybe have to bind the fill brush to the foreground brush, but I don't know how to do it.
<Pivot Grid.Row="1">
<PivotItem x:Name="Test">
<PivotItem.Header>
<Grid>
<Ellipse
Fill="{How to bind PivotItemHeader Foreground?}"
Width="20" Height="20" />
</Grid>
</PivotItem.Header>
</PivotItem>
<PivotItem x:Name="Test2">
<PivotItem.Header>
<Grid>
<Ellipse
Fill="{How to bind PivotItemHeader Foreground?}"
Width="20" Height="20" />
</Grid>
</PivotItem.Header>
</PivotItem>
</Pivot>
I tried with no success:
Fill="{Binding ElementName=Test, Path=HeaderItem.Foreground}"
In your Template, you change the Foreground of ContentPresenter in the Selected VisualState. So I assume that you want to make a Ellipse as header of each item, and change the color of these ellipses when you select each item.
To do this, you can use your modified template with Pivot.HeaderTemplate and use the RelativeSource property like this:
<Pivot Grid.Row="1">
<Pivot.HeaderTemplate>
<DataTemplate>
<Grid>
<Ellipse Width="20" Height="20" Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Foreground}" />
</Grid>
</DataTemplate>
</Pivot.HeaderTemplate>
<PivotItem>
<TextBlock Text="11111" />
</PivotItem>
<PivotItem>
<TextBlock Text="22222" />
</PivotItem>
</Pivot>
Here the DataTemplate is applied to the ContentPresenter in your modified template, so we can use TemplatedParent to bind the Ellipse to its Parent.
Or here is another method, you can modify your template like this:
<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentPresenter.RenderTransform>
<TranslateTransform x:Name="ContentPresenterTranslateTransform" />
</ContentPresenter.RenderTransform>
<Ellipse Width="20" Height="20" Fill="{Binding ElementName=ContentPresenter, Path=Foreground}" />
</ContentPresenter>
and meanwhile use Pivot control like this:
<Pivot Grid.Row="1">
<PivotItem>
<TextBlock Text="11111" />
</PivotItem>
<PivotItem>
<TextBlock Text="22222" />
</PivotItem>
</Pivot>
Just be aware that your "change color" part of the template target the ContentPresenter, not a HeaderItem, you can see this ContentPresenter with the help of LiveVisual Tree.
Related
I try to change the Stroke of an Ellipse that is the Content of a Button on mouse hover using a custom button style like this:
<Style x:Key="MyButtonStyle" TargetType="ButtonBase">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ButtonBase">
<Grid x:Name="RootGrid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="Blue" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter
x:Name="ContentPresenter"
Foreground="{TemplateBinding Foreground}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Why does only the TextBlock with the Text "Working" change its Foreground property?
<Button x:Name="MyButton" Style="{StaticResource MyButtonStyle}">
<StackPanel>
<Ellipse Width="20" Height="20" Stroke="{x:Bind MyButton.Foreground, Mode=OneWay}"></Ellipse>
<TextBlock Foreground="{x:Bind MyButton.Foreground, Mode=OneWay}" Text="Not Working" />
<TextBlock Text="Working" />
</StackPanel>
</Button>
Your visual state animation is modifying the ContentPresenter's foreground not the Button (MyButton)'s foreground.
Use a ContentControl instead of a ContentPresenter in order to access other properties within the template.
Access some other control's Foreground such as the following.
Code:
<StackPanel>
<Ellipse Width="20" Height="20" Stroke="{x:Bind MyText.Foreground, Mode=OneWay}"></Ellipse>
<TextBlock Foreground="{x:Bind MyText.Foreground, Mode=OneWay}" Text="Not Working" />
<TextBlock x:Name="MyText" Text="Working" />
</StackPanel>
In my windows store App , I am trying to create a button style, like the navigation back button. So I created a ButtonStyle which contains a Path (a circle) and a ContentPresenter.
Inside ResourceDictionary of App.xaml:
<Style x:Key="CnSCircleButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Circle" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Circle" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemForegroundThemeBrush}" />
<!-- Can I access the Fill property of the Path inside Button and set it to Black? -->
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border"
Margin="0"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Path x:Name="Circle"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="Transparent"
Stroke="White"
StrokeThickness="2"
UseLayoutRounding="False">
<Path.Data>
<EllipseGeometry Center="20, 20"
RadiusX="20"
RadiusY="20" />
</Path.Data>
</Path>
<ContentPresenter x:Name="ContentPresenter"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}" />
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And inside a page:
<Button Width="45"
Height="45"
Margin="0 0 0 20"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Background="Transparent"
BorderThickness="0"
Command="{Binding LoginCommand}"
Style="{StaticResource CnSCircleButtonStyle}">
<Grid Width="44" Height="44">
<Path Name="Test"
Width="20"
Height="20"
Margin="0 0 23 5"
Data="{StaticResource tickIcon}"
Fill="White"
Stretch="Uniform" />
</Grid>
</Button>
So on Pressed I can fill easily the circle Path with White. But I want also the Path that is inside Button to be filled with Black. So my question is: Is there any way in xaml when the VisualState is Pressed to search the ContentPresenter and if there is a Path child inside set its Fill Property to Black?
i am using pivot control, and i want to change the forground color of headers!
but somehow i am not able to do it with pretty easy guess !
<Pivot x:Name="pivot1">
<PivotItem x:Name="pivot1item1" Header="Profile" Style="{StaticResource PuzzlePivotItemHeader}">
<Controls:Profile />
</PivotItem>
<PivotItem x:Name="pivot1item2" Header="Filters" Style="{StaticResource PuzzlePivotItemHeader}">
<Controls:Filters />
</PivotItem>
</Pivot>
and style is :
<Style x:Key="PuzzlePivotItemHeader" TargetType="PivotItem">
<Setter Property="Foreground" Value="White"/>
</Style>
i just want the header fontsize change and color as white !!
how could it possible?
Here's how you'd change the foreground color and font size of the pivot item headers for all pivot controls in your app (I'm not sure how to do it per pivot control It turns out it is a bug; see this thread):
In App.xaml override these resources:
<Application.Resources>
<SolidColorBrush x:Key="PivotHeaderForegroundSelectedBrush" Color="Red" />
<SolidColorBrush x:Key="PivotHeaderForegroundUnselectedBrush" Color="Cyan" />
<x:Double x:Key="PivotHeaderItemFontSize">40</x:Double>
</Application.Resources>
If you don't care about having different colors for the selected and unselected pivot items, you can style the headers on a per-pivot basis like this instead:
<Pivot>
<Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Foreground="Cyan" FontSize="40" />
</DataTemplate>
</Pivot.HeaderTemplate>
<PivotItem Header="one" />
<PivotItem Header="two" />
<PivotItem Header="three" />
<PivotItem Header="four" />
<PivotItem Header="five" />
<PivotItem Header="six" />
</Pivot>
If you just want to change the background color of all the headers, this is how you can do it in Window Phone 8.1.
First, use Expression Blend to generate the default style of the Pivot control.
<Thickness x:Key="PivotPortraitThemePadding">19,38,0,0</Thickness>
<Thickness x:Key="PivotLandscapeThemePadding">19,25,0,0</Thickness>
<Style x:Key="CustomPivotStyle" TargetType="Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Pivot">
<Grid x:Name="RootElement" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Orientation">
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Landscape">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}"/>
<ScrollViewer x:Name="ScrollViewer" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="{TemplateBinding Padding}" Grid.Row="1" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Stretch" ZoomMode="Disabled">
<PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
<PivotHeaderPanel x:Name="Header" Background="{TemplateBinding BorderBrush}">
<PivotHeaderPanel.RenderTransform>
<CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0"/>
</PivotHeaderPanel.RenderTransform>
</PivotHeaderPanel>
<ItemsPresenter x:Name="PivotItemPresenter">
<ItemsPresenter.RenderTransform>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0"/>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</PivotPanel>
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Find this line below, the only change I have made to the default style is adding Background="{TemplateBinding BorderBrush}" to the PivotHeaderPanel which is the panel that hosts all the headers.
<PivotHeaderPanel x:Name="Header" Background="{TemplateBinding BorderBrush}">
The reason that I use TemplateBinding here is because doing this gives me the flexibility to change the headers background by specifying the BorderBush of the Pivot. As the BorderBrush is not used anywhere in the control, there won't be any side effect if we change it.
So, all you need to do in your Pivot is this.
<Pivot x:Uid="Pivot" Title="MY APPLICATION" x:Name="pivot" CommonNavigationTransitionInfo.IsStaggerElement="True" Style="{StaticResource CustomPivotStyle}" BorderBrush="{StaticResource PhoneAccentBrush}">
Is it possible to style a xaml button tag to look like an application bar button by changing the style? and how can it be done.
Hope this Helps.
<Page.Resources>
<Style x:Key="RoundedButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
</Grid.RowDefinitions>
<Ellipse Name="Ellipse" Grid.Row="0" StrokeThickness="1" Fill="{TemplateBinding Background}" Height="40" Width="40" Stroke="White"></Ellipse>
<ContentPresenter Name="Content" Grid.Row="0" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
<TextBlock Text="{TemplateBinding Tag}" Grid.Row="1" Margin="0,-2,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="12" Foreground="White" FontFamily="Segoe Ui"></TextBlock>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Ellipse">
<DiscreteObjectKeyFrame KeyTime="0" Value="0.8"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Ellipse">
<DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Content">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Content="" Style="{StaticResource RoundedButton}" FontSize="19" FontFamily="Segoe Ui Symbol" Tag="Delete" Background="RoyalBlue" />
<Button Content="" Margin="10,0,0,0" Style="{StaticResource RoundedButton}" FontSize="16" FontFamily="Segoe Ui Symbol" Tag="Mail" Background="ForestGreen" />
<Button Content="" Margin="10,0,0,0" Style="{StaticResource RoundedButton}" FontSize="17" FontFamily="Segoe Ui Symbol" Tag="Back" Background="Red" />
</StackPanel>
Output
Check this page for existing styles which you can reuse to create a similar button.
http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff769552(v=vs.105).aspx
But there is no style that renders a button to look like an app bar button (e.g. a circle instead of a rectangle). You will have to render this on your own using this brush:
PhoneChromeBrush
or this color:
PhoneChromeColor
But you should first check the Microsoft style guidelines whether this is a good idea or not. I am not aware of a limitation to not mimic app bar buttons, but the user would probably not expect to see such buttons somewhere else than on the bottom.
You can get the ready to use class for round button here: Create a round button control for Windows Phone.
This is driving me nuts. I can't seem to get the data template within my ComboBox to stretch the width of the pulldown. What gives?
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ComboBox x:Name="SearchesComboBox" HorizontalContentAlignment="Stretch" Width="150">
<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ComboBox.ItemContainerStyle>
<ComboBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{Binding}" Margin="2" />
</Border>
</DataTemplate>
</ComboBox.ItemTemplate>
<sys:String>Two</sys:String>
<sys:String>Four</sys:String>
<sys:String>Six</sys:String>
</ComboBox>
</Grid>
<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ComboBox.ItemContainerStyle>
I just confirmed the following works in WPF, moving the HorizontalContentAlignment up to the ComboBox:
<ComboBox x:Name="SearchesComboBox" HorizontalContentAlignment="Stretch" Width="150">
<ComboBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{Binding}" Margin="2" />
</Border>
</DataTemplate>
</ComboBox.ItemTemplate>
<sys:String>Two</sys:String>
<sys:String>Four</sys:String>
<sys:String>Six</sys:String>
</ComboBox>
Let me know if this also fixes the problem in Silverlight. The issue as I was seeing it was the items in the drop-down were correctly sized, while the content that showed in the pull-down was not stretching.
Ok, after about a day of fiddling with it, I have a solution. I HATE it, but it works. Basically, I reflected into the System.Windows.dll for Silverlight, and I ripped out the default template for ListBoxItem (which ComboBoxItem uses).
It turns out that in that template, there is a ContentPresenter with the HorizontalAlignment hard-coded to Left. So, I ripped off the template, and added a TemplateBinding for HorizontalAlignment, so it can use whatever the HorizontalAlignment of ComboBoxItem is.
That being said, what follows is the working code. If ANYONE has a better way to do this, please tell me. I haven't checked yet if this is fixed in 3.0. I hope it is. It should really bind all the way from ComboBox.HorizontalContentAlignment.
<UserControl.Resources>
<Style x:Key="FixedComboBoxItem" TargetType="ComboBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Grid Background="{TemplateBinding Background}">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity" Duration="0" To=".35"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To=".55" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="SelectionStates">
<vsm:VisualState x:Name="Unselected" />
<vsm:VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity" Duration="0" To=".75"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Rectangle x:Name="fillColor" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>
<Rectangle x:Name="fillColor2" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>
<ContentPresenter
x:Name="contentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
Margin="{TemplateBinding Padding}"/>
<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed" RadiusX="1" RadiusY="1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ComboBox x:Name="SearchesComboBox" Width="150" ItemContainerStyle="{StaticResource FixedComboBoxItem}" HorizontalContentAlignment="Stretch">
<ComboBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1" >
<TextBlock Text="{Binding}" Margin="2" />
</Border>
</DataTemplate>
</ComboBox.ItemTemplate>
<sys:String>Two</sys:String>
<sys:String>Four</sys:String>
<sys:String>Six</sys:String>
</ComboBox>
</Grid>