WPF Highlight brush for Combobox template - wpf

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"/>

Related

WPF: TabItem Header Styling of TabControl usin WPF and C#

I'm new to WPF,
I'm trying to style a TabControl and I'm having difficulty styling the actual TabItems:
I'm sure it's probably not that difficult, but I just can't figure it out so any help would be most appreciated!
Here's the XAML for the TabControl so far:
<Window x:Class="FunctionalFun.UI.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:gc="clr-namespace:FunctionalFun.UI"
mc:Ignorable="d"
Title="mY Application" Height="800" Width="1080" ResizeMode="NoResize">
<StackPanel>
<Grid>
<TabControl Name="TabControl1" TabStripPlacement="Left" Margin="-6,46,-14,-453">
<TabItem>
<TabItem.Header>
<Image Height="35" Width="35" Source="check-form_logo3.png"/>
</TabItem.Header>
<TabItem.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="10"/>
</Style>
</TabItem.Resources>
<Canvas>
</Canvas>
</TabItem>
<TabItem >
<TabItem.Header>
<Image Height="35" Width="35" Source="calendar-icon_logo1.png"/>
</TabItem.Header>
<TabItem.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="10"/>
</Style>
</TabItem.Resources>
<Canvas>
</Canvas>
</TabItem>
<TabItem >
<TabItem.Header>
<Image Width="35" Height="35" Source="table_logo4.png"/>
</TabItem.Header>
<Canvas>
</Canvas>
</TabItem>
</TabControl>
</Grid>
</StackPanel>
</Window>
One option is to copy the default style of tab item, then make your changes of its border corner radius, background, etc. then give it a key, then apply your style to your actual control, like so:
<StackPanel>
<Grid>
<Grid.Resources>
<Style x:Key="CustomTabItem" TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid x:Name="Root"
Background="AntiqueWhite">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{DynamicResource ControlPressedColor}" />
</ColorAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)"
Storyboard.TargetName="Border">
<EasingThicknessKeyFrame KeyTime="0"
Value="1,1,1,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{DynamicResource DisabledControlDarkColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.BorderBrush).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{DynamicResource DisabledBorderLightColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border"
Margin="0,0,-4,0"
BorderThickness="1,1,1,1"
CornerRadius="10">
<Border.BorderBrush>
<SolidColorBrush Color="Black" />
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{DynamicResource ControlLightColor}"
Offset="0.0" />
<GradientStop Color="{DynamicResource ControlMediumColor}"
Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,2,12,2"
RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="Panel.ZIndex"
Value="100" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<TabControl Name="TabControl1" TabStripPlacement="Left" Margin="-6,46,-14,-453">
<TabItem Style="{StaticResource CustomTabItem}">
<TabItem.Header>
<TextBlock Text="A" />
</TabItem.Header>
<Canvas>
</Canvas>
</TabItem>
<TabItem Style="{StaticResource CustomTabItem}">
<TabItem.Header>
<TextBlock Text="B" />
</TabItem.Header>
<Canvas>
</Canvas>
</TabItem>
<TabItem Style="{StaticResource CustomTabItem}">
<TabItem.Header>
<TextBlock Text="C" />
</TabItem.Header>
<Canvas>
</Canvas>
</TabItem>
</TabControl>
</Grid>
</StackPanel>

progressbar bar style right radius

I'm trying to create a template for my progressebar with round corners but I have trouble implementing the right side of my progressbar.
Here is my template :
<ProgressBar Name="blabla" Value="80" Maximum="100" Margin="95,282,113,0">
<ProgressBar.Style>
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid Height="10" MinWidth="50" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Determinate" />
<VisualState x:Name="Indeterminate">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="00:00:00"
Storyboard.TargetName="PART_Indicator"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush>Transparent</SolidColorBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="PART_Track" CornerRadius="4" BorderThickness="1"
BorderBrush="{DynamicResource CouleurForegroundProgressBar}">
</Border>
<Border CornerRadius="4,0,0,4" BorderThickness="1" x:Name="PART_Indicator"
HorizontalAlignment="Left" Background="{DynamicResource CouleurForegroundProgressBar}"
BorderBrush="{DynamicResource CouleurForegroundProgressBar}"
Margin="0,0,0,0">
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{DynamicResource CouleurForegroundProgressBar}" />
</Style>
</ProgressBar.Style>
</ProgressBar>
And it looks like I wanted :
But When the value reaches 100% the progression bar inside (PART_Indicator) is still straight and hide my right radius :
How can I avoid that ?
Set CornerRadius="4" on your Part_Indicator also
<Border
CornerRadius="4"
BorderThickness="1"
x:Name="PART_Indicator"
HorizontalAlignment="Left"
Background="Red"
BorderBrush="Red"
Margin="0,0,0,0">
OR I will use the Triggers like below:
<Border BorderThickness="1"
x:Name="PART_Indicator"
HorizontalAlignment="Left"
Background="Red"
BorderBrush="Red"
Margin="0,0,0,0">
<Border.Style>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="4,0,0,4"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Value, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ProgressBar}}}" Value="100">
<Setter Property="CornerRadius" Value="4"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
Adding to Nitin's Answer, you'll have to change the names of the Border elements from "PART_Track" and "PART_Indicator" to "ProgressBarTrack" and "ProgressBarIndicator" respectively. If you don't, the bound value might go out of bounds if its width is bigger than the element.

Remove grouping gridlines from RadGridView WPF c#

This is a sample gridview from the Telerik Demos, but I was wondering how you can removed these gridlines that appear after you group items.
Here is the Gridviewgroupstyle code im working through
<Style x:Key="GridViewGroupRowStyle1" TargetType="{x:Type telerik:GridViewGroupRow}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:GridViewGroupRow}">
<Grid x:Name="PART_GroupExpanderGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="PART_HeaderRow" MinHeight="{TemplateBinding MinHeight}"/>
<RowDefinition x:Name="ContentRow" Height="Auto"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ExpandStateGroup">
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Content">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="BottomBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="IconOuterBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="IconInnerBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>1,1,0,0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ExpanderButton">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="180"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ExpanderButton">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ToggleButtonBorder" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Column="2" MinHeight="{TemplateBinding MinHeight}" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Border.Visibility>
<Binding Path="ShowHeaderAggregates" RelativeSource="{RelativeSource TemplatedParent}">
<Binding.Converter>
<telerik:BooleanToVisibilityConverter/>
</Binding.Converter>
</Binding>
</Border.Visibility>
<telerik:AggregateResultsList HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<telerik:AggregateResultsList.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel IsItemsHost="True" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</telerik:AggregateResultsList.ItemsPanel>
<telerik:AggregateResultsList.ItemTemplate>
<DataTemplate>
<telerik:GridViewAggregateResultCell AggregateResult="{Binding}" IsTabStop="False">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
</telerik:GridViewAggregateResultCell>
</DataTemplate>
</telerik:AggregateResultsList.ItemTemplate>
</telerik:AggregateResultsList>
</Border>
<Border x:Name="IconOuterBorder" BorderBrush="Transparent" BorderThickness="0,0,0,1" Background="Transparent" HorizontalAlignment="Stretch" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
<Border x:Name="IconInnerBorder" BorderBrush="White" BorderThickness="1,1,0,1">
<Path x:Name="ExpanderButton" Grid.Column="0" Data="M0,0L1,0 2,0 2,0.99999991 3,0.99999991 3,2 4,2 4,0.99999991 5,0.99999991 5,0 5.9999999,0 7,0 7,0.99999991 5.9999999,0.99999991 5.9999999,2 5,2 5,3 4,3 4,4 3,4 3,3 2,3 2,2 1,2 1,0.99999991 0,0.99999991z" Fill="Black" HorizontalAlignment="Left" Height="5" Margin="{TemplateBinding Padding}" RenderTransformOrigin="0.5,0.5" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Width="7">
<Path.RenderTransform>
<RotateTransform/>
</Path.RenderTransform>
</Path>
</Border>
</Border>
<ToggleButton x:Name="HeaderButton" Background="{TemplateBinding Background}" Grid.ColumnSpan="3" Grid.Column="0" IsTabStop="{TemplateBinding IsTabStop}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Opacity="0" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"/>
<ToggleButton BorderBrush="{x:Null}" BorderThickness="0" Background="Transparent" Grid.Column="1" IsTabStop="{TemplateBinding IsTabStop}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Padding="0,0,10,0" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="9,0,0,0"/>
</Style>
</ToggleButton.Style>
<ContentPresenter ContentTemplate="{TemplateBinding GroupHeaderTemplate}" Content="{TemplateBinding GroupViewModel}" Grid.Column="1" Margin="0,0,10,0" VerticalAlignment="Center"/>
</ToggleButton>
<Border BorderBrush="Transparent" BorderThickness="0,0,0,0" Grid.ColumnSpan="2" Grid.Column="1" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True">
<Border BorderBrush="White" BorderThickness="0,1,1,1"/>
</Border>
</Grid>
</Border>
<Border x:Name="PART_IndicatorPresenter" BorderBrush="Transparent" BorderThickness="0,0,1,1" Grid.Column="0" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{TemplateBinding RowIndicatorVisibility}" VerticalAlignment="Stretch" Width="25">
<Border BorderBrush="White" BorderThickness="1" Background="#FFE4E4E4"/>
</Border>
<telerik:IndentPresenter Background="{TemplateBinding Background}" Grid.Column="1" IsTabStop="False" IndentLevel="{TemplateBinding Level}" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
</telerik:IndentPresenter>
<Border x:Name="Content" Grid.ColumnSpan="5" Grid.Column="0" Grid.Row="1" Visibility="Collapsed">
<StackPanel>
<telerik:GridViewVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel" CanHorizontallyScroll="False" CanVerticallyScroll="False"/>
<telerik:GridViewGroupFooterRow x:Name="Footer" IsTabStop="False">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
</telerik:GridViewGroupFooterRow>
</StackPanel>
</Border>
<Border x:Name="BottomBorder" BorderBrush="Transparent" BorderThickness="0,0,0,1" Grid.Column="2" Grid.Row="1" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True" Visibility="Collapsed" VerticalAlignment="Bottom"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="GroupHeaderTemplate">
<Setter.Value>
<DataTemplate>
<ContentPresenter Content="{Binding Header}"/>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="#FFE4E4E4"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Padding" Value="10,0,0,0"/>
<Setter Property="MinHeight" Value="25"/>
<Setter Property="AllowDrop" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
</Style>
Was able to get rid the the vertical lines with :
<Style TargetType="grid:GridViewIndentCell">
<Setter Property="Background" Value="{StaticResource MainBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource BasicBrush}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Padding" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="grid:GridViewIndentCell">
<Border BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Padding="{TemplateBinding Padding}"
BorderThickness="{TemplateBinding BorderThickness}" Width="25" />
</ControlTemplate>
</Setter.Value>
</Setter>
</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}">

Editable combo box selection text overflows

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.

Resources