Editable combo box selection text overflows - wpf

In my WPF application, I have an editable combo box with 150px fixed width. Although, if the item's length is more than the combo box length, the selection color overflows from the combo box area and overlaps over the toggle button as well as the controls towards its right.
Screenshot:
The controltemplate used is as follows:
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox"
Storyboard.TargetProperty="(TextElement.Foreground).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource DisabledForegroundColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</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}}"/>
<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="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush Color="{DynamicResource ControlLightColor}" />
</Border.Background>
</Border>
<ScrollViewer Margin="4,6,4,6"
SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems"
Value="false">
<Setter TargetName="DropDownBorder"
Property="MinHeight"
Value="95" />
</Trigger>
<Trigger Property="IsGrouping"
Value="true">
<Setter Property="ScrollViewer.CanContentScroll"
Value="false" />
</Trigger>
<Trigger SourceName="Popup"
Property="AllowsTransparency"
Value="true">
<Setter TargetName="DropDownBorder"
Property="CornerRadius"
Value="4" />
<Setter TargetName="DropDownBorder"
Property="Margin"
Value="0,2,0,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Any idea what is happening and how can it be fixed?
EDIT The textbox template:
<ControlTemplate x:Key="ComboBoxTextBox"
TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost"
Focusable="False"
Background="{TemplateBinding Background}" />
</ControlTemplate>

I just answered a similar question ...
The reason is you are overwritting the default ControlTemplate for the TextBox as something that doesn't implement scrolling automatically, so your Text is simply continuing outside the bounds it is given.
Change your TextBox.ControlTemplate to something like a ScrollViewer instead of a Border and it will work correctly.
<ControlTemplate x:Key="ComboBoxTextBox"
TargetType="{x:Type TextBox}">
<ScrollViewer x:Name="PART_ContentHost"
Focusable="False"
Background="{TemplateBinding Background}" />
</ControlTemplate>

As stated above in the Comment section the issue was the ComboBoxTextBox Template.

Related

Binding the textbox width of a ComboBox to the width of its parent ComboBox in Window.Resources (WPF)

I designed a custom ComboBox.
I'd like to bind my ComboBox's textbox width to the width of its parent ComboBox.
For example, if the width of the ComboBox changes in Grid.Children, its TextBox should likewise change.
XAML:
Note: Some unnecessary blocks have been removed for readability and convenience.
Note: I'm aware that the PART EditableTextBox section needs to be edited, but I'm not sure how.
<Window.Resources>
<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="20" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="Padding" Value="4,4,0,0"/>
<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">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox" Storyboard.TargetProperty="(TextElement.Foreground). (SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="#FF888888" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</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}}"/>
<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 ComboBoxTextBoxTemplate}"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Margin="3,3,23,3"
Focusable="True"
Foreground="{TemplateBinding Foreground}"
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" BorderBrush="DarkGray" BorderThickness="1" Background="White">
</Border>
<ScrollViewer BorderBrush="DarkGray" Padding="3,3,3,11" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
<Trigger SourceName="Popup" Property="AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="9" />
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Resources>
<Style TargetType="ScrollBar" >
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="True"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid>
<Border CornerRadius="0,9,9,0" Background="{StaticResource ScrollBarNormalBackground}" Width="15" Margin="2,2,0,0" BorderBrush="DarkGray" BorderThickness="1"/>
<Track x:Name="PART_Track" IsDirectionReversed="True" Uid="PART_Track">
<Track.Thumb>
<Thumb Uid="Thumb_0">
<Thumb.Template>
<ControlTemplate>
<Border Background="LightGoldenrodYellow" Width="15" Height="12" Margin="2,2,0,0" CornerRadius="0,9,9,0" BorderBrush="DarkGray" Cursor="Hand" BorderThickness="1"/>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Track.Thumb>
</Track>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Style.Resources>
</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" CornerRadius="9" SnapsToDevicePixels="true" Background="Transparent">
<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="#FFC5CBF9" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="#FFDDDDDD" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Grid.Children>
<ComboBox x:Name="Category_ComboBox" GotFocus="Category_ComboBox_GotFocus" LostFocus="Category_ComboBox_LostFocus" ContextMenu="{StaticResource CustomContextMenu}" IsEditable="True" BorderBrush="DarkGray" HorizontalAlignment="Left" Height="30" VerticalAlignment="Top" Width="267" Margin="21,138,0,0"/>
</Grid.Children>
</Grid>
Thanks
The text box PART_EditableTextBox is only visible when the ComboBox is in edit mode (which is when ComboBox.IsEdit is enabled).
To make it stretch simply set the TextBox.HorizontalAlignment property to HorizontalAlignment.Stretch:
<TextBox x:Name="PART_EditableTextBox"
HorizontalAlignment="Stretch" />
In case you meant to make the items in the selection box to stretch set ComboBox.HorizontalContentAlignment to HorizontalAlignment.Stretch:
<ComboBox HorizontalContentAlignment="Stretch" />

WPF Highlight brush for Combobox template

I can't figure out how to set the Highlight brush of a Combobox (the color that will mark the item being selected on mouse over) to a certain Brush. I have used Edit Template -> Copy to get copy of the template where I try to set the SystemColors.HighlightBrushKey. I have seen answers that one should be able to set the brush by defining it like this in the Style resource, but it just does not work.
I have also tried to set the Grid's Style.Resource in which the comobox is placed, that did not help either.
Please see line 3 and line 15 where I set the color to red. No effect. What am I doing wrong?
<Style x:Key="TeachpendantVMVisionServerComboBoxStyle" TargetType="{x:Type ComboBox}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Red" />
</Style.Resources>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid x:Name="grid">
<Grid.Style>
<Style>
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Red" />
</Style.Resources>
</Style>
</Grid.Style>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition MaxWidth="18"/>
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="InvalidFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="PART_EditableTextBox">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="Red"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="path">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MoveTextBox.Invalid.BorderBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="toggleButton">
<EasingColorKeyFrame KeyTime="0" Value="#FFFB0000"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="InvalidUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="PART_EditableTextBox">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MoveTextBox.Invalid.BorderBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="toggleButton">
<EasingColorKeyFrame KeyTime="0" Value="Red"/>
</ColorAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="path">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="Red"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBox x:Name="PART_EditableTextBox"
Padding="5,0,0,0"
Height="{TemplateBinding Height}">
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Border
x:Name="border"
CornerRadius="3,0,0,3"
BorderThickness="1,1,0,1"
Background="{DynamicResource Button.Static.Background}"
BorderBrush="{DynamicResource Button.Static.Background}">
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
</Grid>
</ControlTemplate>
</TextBox.Template>
</TextBox>
<ToggleButton x:Name="toggleButton" Grid.Column="1" Margin="0"
Height="{TemplateBinding Height}"
Focusable="False"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press" BorderBrush="#FFABADB3">
<ToggleButton.Template>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border
Background="{DynamicResource Button.Checked.Background}"
x:Name="border"
CornerRadius="0,3,3,0"
BorderThickness="0,1,1,1"
BorderBrush="{DynamicResource Button.Static.Background}">
<ContentPresenter />
</Border>
</ControlTemplate>
</ToggleButton.Template>
<Path x:Name="path" Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="Gold" />
</ToggleButton>
<ContentPresenter x:Name="ContentSite"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Margin="5,0,0,0" RecognizesAccessKey="True"/>
<Popup x:Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="True"
PopupAnimation="Slide"
OverridesDefaultStyle="True">
<Grid x:Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border
x:Name="DropDownBorder"
BorderThickness="1"
CornerRadius="5"
Background="Azure"
BorderBrush="DarkGray">
</Border>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate/>
</Setter.Value>
</Setter>
</Style>
It was fairly simple after all (but not obvious where to find it).
Just edit a copy of the ItemsContainerStyle and all these Brushes can be set from there.
To Change the layout of the ComboBox (creating a round combobox or changing colors)
Style="{DynamicResource MyComboBoxStyle}"
To Change the hoover and selected Highlight colors
ItemContainerStyle="{DynamicResource MyComboBoxItemS}"
The complete Combobox would look like this then in XAML
<ComboBox x:Name="positionsComboBox"
Grid.Column="1"
Grid.ColumnSpan="3"
IsReadOnly = "True"
IsEditable = "False"
Margin="3,0,3,0"
ItemsSource="{Binding IDs, Source={StaticResource Locator}, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
SelectedValue="{Binding SelectedID, Source={StaticResource Locator}, Mode=TwoWay}"
Style="{DynamicResource MyComboBoxStyle}"
IsSynchronizedWithCurrentItem="True"
ItemContainerStyle="{DynamicResource MyComboBoxItemContainerStyle}"
FontWeight="Bold"
FontSize="24"/>

Styling MouseOver SubMenuItem WPF/XAML

I'm currently trying to style the Submenu/SubmenuHeader in a similar way to the top level MenuItem, However I want to change the background and border to a different color (not the default)
Where in the template can I set this? or are there any better ways to go about styling the submenu?
Here is my code for the MenuItem Template:
<!-- MenuItem Template -->
<ControlTemplate
x:Key="MenuItem"
TargetType="MenuItem">
<Border
Name="border"
BorderThickness="1"
BorderBrush="Transparent"
Background="{TemplateBinding Background}">
<Grid>
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center"
ContentSource="Header" />
<Popup
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsSubmenuOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Fade">
<Border
Name="SubmenuBorder"
SnapsToDevicePixels="True"
Background="{StaticResource ResourceKey=DarkGrayBrush}"
BorderBrush="Transparent"
BorderThickness="1">
<StackPanel
Name="SubMenu"
IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Cycle" />
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger
Property="IsMouseOver"
Value="True">
<Setter
TargetName="border"
Property="BorderBrush"
Value="Transparent" />
<Setter
Property="Background"
Value="#00948d" />
</Trigger>
<Trigger
Property="IsSuspendingPopupAnimation"
Value="true">
<Setter
TargetName="Popup"
Property="PopupAnimation"
Value="None" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Use style and VisualState PointerOver:
<Style x:Key="MenuItemStyle" TargetType="MenuItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuItem">
<Grid x:Name="Root">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="MenuItemCommonStates">
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

OnFocus change Foreground color of Button Content

I have Button :
<Button Grid.Column="0" Style="{StaticResource BodyPartLable}" Margin="0, 5, 0, 0" PreviewMouseLeftButtonDown="ButtonNeck_OnPreviewMouseDown" PreviewMouseLeftButtonUp="ButtonNeck_OnPreviewMouseUp">
<Grid Width="200" Height="100">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" TextAlignment="Right" Text="+1" Margin="0,3,5,0" Foreground="White" />
<TextBlock Grid.Row="1" Foreground="#c0b6d1" FontFamily="Segoe UI Semibold" MouseRightButtonDown="Neck_EditStarted" FontSize="18" Margin="13,-28,0,0">
<TextBox Margin="-5,0,0,0" Name="sizeNeck" Background="#FF61596F" Foreground="Tomato" Height="60" IsEnabled="False" BorderBrush="Transparent" FontSize="40"
ContextMenu="{x:Null}" ContextMenuService.IsEnabled="false" MaxLength="6"
LostFocus="TextBox_LostFocus" Tag="BackCollarHeightUI" Text="55"></TextBox>
<LineBreak/>
<TextBlock Name="NecktLb" Text="Neck"/><Span> (</Span><Span><TextBlock Text="inch"/></Span><Span>)</Span>
</TextBlock>
</Grid>
</Button>
And Style :
<Style x:Key="BodyPartLable" TargetType="Button">
<Setter Property="BorderBrush" Value="#FFFFFFFF"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Padding" Value="12,0,0,0"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
</VisualState>
<VisualState x:Name="PointerOver">
</VisualState>
<VisualState x:Name="Pressed">
</VisualState>
<VisualState x:Name="Disabled">
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<!--<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>-->
<ColorAnimation Duration="0" To="#FF826C83" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border"/>
<ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentPresenter"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="PointerFocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" CornerRadius="3" Padding="0" Background="#FF61596F" Height="120" Width="220">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" UseLayoutRounding="True" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Margin="0"/>
</Border>
<Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="White" StrokeDashArray="1,1"/>
<Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="Black" StrokeDashArray="1,1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
For VisualState Focused I should change Text Color of Button content to White.
'' this code doesn't work in my case, but It's only solutions that I can find on StackOverflow.
Upd : On Button Click I set this button focused from code-behind
Define styles for text blocks By using a DataTriggers and Binding Your Property to the Button triggers and Applye this to all your Button content in this TextBlock, code Below ...
<Style x:Key="TextBlockStyle" TargetType="{x:Type TextBlock}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="White"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Button,AncestorLevel=1}, Path=IsFocused}" Value="True">
<Setter Property="Foreground" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>

How to highlight selected item in list box windows phone?

I am developing a windows phone application. I placed list box control in my app and displayed a list. I need to highlight the selected row with a blue color. How can I do that ?. I tried a code. But its not working. I add the code I used below. Please help.
<ListBox Margin="0,0,0,0" Name="MyList" ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemContainerStyle="{StaticResource ListBoxItemStyle1}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Background="Transparent" Margin="10,0,0,0">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Height="55" Margin="20,10,0,0">
<StackPanel>
<TextBlock Text="{Binding Option}" FontWeight="Bold" HorizontalAlignment="Left" Foreground="Black" FontSize="23" Margin="0,0,0,0" Width="250" ></TextBlock>
</StackPanel>
<StackPanel Margin="100,0,0,0">
<Image Margin="0,10,0,0" Source="/Images/arrow.png"></Image>
</StackPanel>
</StackPanel>
<Rectangle Fill="Gray" Height="1" HorizontalAlignment="Stretch" Width="440" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Style:
<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<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"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected">
<Storyboard>
<ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" />
<ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" />
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimation Duration="0" To="Blue" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" />
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimation Duration="0" To="Blue" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="#FF1BA1E2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Background="Black" BorderBrush="Black"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My list is like the below image
When I click on the option 2 . I want to change the list box like below image and when remove the click I navigate to another page.
you can add a prop "isselected" in your datacontext struct behind.
and += the list's event "SelectionChanged"
you can get context data from the handle args :
public IList AddedItems { get; }
public IList RemovedItems { get; }
change their isselected prop.
Method 1
Move the DataTemplate to a user control. Create a Boolean dependency property IsSelected in it. And put your stackpanel inside a border control whose background you have to toggle on based of its boolean value. I hope that it helps.
Method 2
Create a boolean property inside your data object. Bind it to a border element placed inside your datatemplate.
<Grid>
<Border Background="Blue" Visibility="{Binding IsSelcted}" Canvas.ZIndex="-1"/>
<StackPanel Background="Transparent" Margin="10,0,0,0">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Height="55" Margin="20,10,0,0">
<StackPanel>
<TextBlock Text="{Binding Option}" FontWeight="Bold" HorizontalAlignment="Left" Foreground="Black" FontSize="23" Margin="0,0,0,0" Width="250" >
</TextBlock>
</StackPanel>
<StackPanel Margin="100,0,0,0">
<Image Margin="0,10,0,0" Source="/Images/arrow.png"></Image>
</StackPanel>
</StackPanel>
</Grid>
You can toggle the boolean property (IsSeleced) of the listBox.SelectedItem in the selectionchanged Event
Note: You need to keep a reference of the old selected item and make its selected boolean false before making the new one as true.
I hope it helps.
use this code to create your style for list box and here i make background transparent , modify code according your requirements..
paste this top of mainpage.xaml but after where all references is complete
<Style x:Key="CustomListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<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">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="ContentContainer"
Storyboard.TargetProperty="Foreground"
Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="border"
Storyboard.TargetProperty="Background"
Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="Transparent"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel x:Name="border" Orientation="Horizontal">
<ContentControl x:Name="ContentContainer"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and point this in your listbox
<ListBox ItemContainerStyle="{StaticResource CustomListBoxItemStyle}">

Resources