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.
Related
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" />
I am trying to add a button for each item in a ListBox.
It is like this:
Style template before adding a button:
<Style TargetType="ListBox" x:Key="ListBoxStyle">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ItemsPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
</Style>
<Style TargetType="ListBoxItem" x:Key="ListBoxItemStyle">
<Setter Property="Canvas.Left" Value="{Binding Rectangle.X}"/>
<Setter Property="Canvas.Top" Value="{Binding Rectangle.Y}"/>
<Setter Property="Width" Value="{Binding Rectangle.Width}"/>
<Setter Property="Height" Value="{Binding Rectangle.Height}"/>
<Setter Property="BorderBrush" Value="{Binding Hexadecimal}"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Content" Value=""/>
</Style>
This is how I use the style:
<ListBox
ItemsSource="{Binding LabelShapes}"
Width="{Binding ActualWidth, ElementName=Img}"
Height="{Binding ActualHeight, ElementName=Img}"
VerticalAlignment="Top"
HorizontalAlignment="Left"
SelectionMode="Extended"
Style="{StaticResource ListBoxStyle}"
ItemContainerStyle="{StaticResource ListBoxItemStyle}"/>
Add a button by using canvas:
<Style TargetType="ListBoxItem" x:Key="ListBoxItemStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Canvas>
<Border
Canvas.Left="{Binding Rectangle.Left}"
Canvas.Top="{Binding Rectangle.Top}"
Width="{Binding Rectangle.Width}"
Height="{Binding Rectangle.Height}"
BorderBrush="{Binding Hexadecimal}"
BorderThickness="2"/>
<Grid Height="20" Canvas.Left="{Binding Rectangle.Left}" Canvas.Top="{Binding Rectangle.Bottom}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="2" Width="50" Height="30" />
</Grid>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My question is that when I add a button by using canvas, the ListBoxItem can not be selected. What is the right way to style ListBoxItem and to make the ListBoxItem can be selected? Any help will be greatly appreciated.
UPDATE
I add some visual states:
<Style TargetType="ListBoxItem" x:Key="ListBoxItemStyle">
<Setter Property="Canvas.Left" Value="{Binding Rectangle.X}"/>
<Setter Property="Canvas.Top" Value="{Binding Rectangle.Y}"/>
<Setter Property="IsSelected" Value="{Binding IsSelected}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="MyBorder"
Width="{Binding Rectangle.Width}"
Height="{Binding Rectangle.Height}"
BorderBrush="{Binding Hexadecimal}"
BorderThickness="2">
<Border.Background>
<SolidColorBrush Color="Transparent" />
</Border.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="MyBorder" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedBackgroundColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="MyBorder" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedUnfocusedColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Height="20" Canvas.Left="{Binding Rectangle.Left}" Canvas.Top="{Binding Rectangle.Bottom}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Button Width="50" Height="30" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The items can now be selected, but I can't figure out how to put a button at the bottom of the border?
I found a simple way to get what I need. Replace the ControlTemplate of the ListBoxItem by the following, and use ControlTemplate.Triggers Property to handle the style of selected item.
<ControlTemplate TargetType="ListBoxItem">
<Grid>
<Rectangle
x:Name="ShapeBorder"
HorizontalAlignment="Left"
Width="{Binding Rectangle.Width}"
Height="{Binding Rectangle.Height}"
Stroke="{Binding Hexadecimal}"
StrokeThickness="1"/>
<Grid Height="20" Margin="0 0 0 -20" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="2" Width="50" Height="20" />
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="ShapeBorder" Property="StrokeThickness" Value="2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
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>
I've already found a lot of questions about manipulating the highlight of items to select in the dropdown of the combobox or overriding system brushes. This is NOT what I'm after.. I want to get rid of the text highlighting of the selected item shown in the combobox textfield after selecting. But I do not want to get rid of the text highlighting in the dropdown! So overriding the system brushes is not what I need because that also affects the items in the dropdown. Below is XAML for a complete test project. Build + run and select an item to see the effects. The text of any selected item in the combobox textfield will be highlighted with a light grayish brush. That's what I want to get rid of.. but how..?
<Window.Resources>
<Style x:Key="ComboboxDropdownButton" TargetType="{x:Type ToggleButton}">
<Setter Property="MinWidth" Value="0"/>
<Setter Property="MinHeight" Value="0"/>
<Setter Property="Width" Value="NaN"/>
<Setter Property="Height" Value="NaN"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<DockPanel SnapsToDevicePixels="True"
Background="{TemplateBinding Background}"
LastChildFill="False">
<Border x:Name="Border"
Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"
DockPanel.Dock="Right"
Background="WhiteSmoke"
CornerRadius="0,3,3,0"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
>
<Path Fill="{TemplateBinding Foreground}" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0L4.5,4 9,0z"/>
</Border>
</DockPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="White" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="Border" Property="Background" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5"/>
</Trigger>
</Style.Triggers>
</Style>
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost" Focusable="False" />
</ControlTemplate>
<Style x:Key="{x:Type ComboBox}" TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="MinWidth" Value="120" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<VisualStateManager.VisualStateGroups>
<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>
</Storyboard>
</VisualState>
<VisualState x:Name="Uneditable" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="00:00:00" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="FocusedDropDown">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetName="DropDownBorder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ToggleButton x:Name="ToggleButton"
Margin="-1"
Grid.Column="2"
Focusable="False"
ClickMode="Press"
Style="{StaticResource ComboboxDropdownButton}"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
</ToggleButton>
<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}" />
<Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="-3" Stroke="Red" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
<Rectangle x:Name="BackgroundVisualElement" RadiusX="2" RadiusY="2" Margin="-1" Fill="BlanchedAlmond" Panel.ZIndex="-1" Stroke="Black" StrokeThickness="1" IsHitTestVisible="false" />
<Popup x:Name="PART_Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Border x:Name="DropDownBorder"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
MinWidth="{Binding ActualWidth, ElementName=BackgroundVisualElement}"
Background="BlanchedAlmond"
BorderBrush="Black"
BorderThickness="1" CornerRadius="0,0,3,3">
<ScrollViewer>
<ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Border>
</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>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Margin="0,0,363,221" />
<ComboBox Width="120" Height="20" Name="comboBox1" SnapsToDevicePixels="True" HorizontalAlignment="Center" VerticalAlignment="Center" SelectedIndex="0" IsEditable="True" IsReadOnly="True">
<ComboBoxItem>item 1</ComboBoxItem>
<ComboBoxItem>item 2</ComboBoxItem>
<ComboBoxItem>item 3</ComboBoxItem>
</ComboBox>
</Grid>
</Window>
EDIT: for better effect, add Foreground="Transparent" to the PART_EditableTextBox. The selected item in the combobox textfield will still show up highlighted with the light grayish brush I want to get rid of..
If you're using WPF 4 you can set the SelectionBrush of the TextBox to Transparent
<TextBox x:Name="PART_EditableTextBox"
SelectionBrush="Transparent"
.../>
You can read more about SelectionBrush here:
http://blogs.msdn.com/b/text/archive/2009/08/28/selection-brush.aspx
I want to create a flat button with rounded right top and bottom corners. This button needs to have the background changed on clicked and on mouse over.
Currently my Markup looks like this:
<Border x:Name="MyButton" Height="25" Margin="0,5,0,0" CornerRadius="0 5 5 0" BorderThickness="1" BorderBrush="Gray" Style="{StaticResource myStyle1}">
<StackPanel Orientation="Horizontal" Margin="8,0,0,0">
<Image Source="image.jpg" Height="20"/>
<TextBlock Text="My Button"/> <!-- Could also be a label if needs to be. -->
</StackPanel>
</Border>
<Style x:Key="myStyle1" TargetType="{x:Type Border}">
<Setter Property="Background" Value="{StaticResource MainContentForegroundColor}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
The mouse over trigger works perfectly but i can't get the click trigger to work... i've tried IsKeyboardFocusWithin and IsFocused but it didn't work.
I think you should use ToggleButton instead of normal button -
<ToggleButton
Background="Transparent">
<ToggleButton.Template>
<ControlTemplate
TargetType="{x:Type ToggleButton}">
<Border
x:Name="MyButton"
Height="25"
Margin="0,5,0,0"
CornerRadius="0 5 5 0"
BorderThickness="1"
BorderBrush="Gray">
<StackPanel
Orientation="Horizontal"
Margin="8,0,0,0">
<Image
Source="image.jpg"
Height="20" />
<TextBlock
Text="My Button" />
<!-- Could also be a label if needs to be. -->
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger
Property="IsChecked"
Value="True">
<Setter
Property="Background"
Value="Red" />
</Trigger>
<Trigger
Property="IsMouseOver"
Value="True">
<Setter
Property="Background"
Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
You can create a Button style, then only you will IsPressed Property. See the below code using VSM.
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FF760D0D"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FF675A88"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="border" BorderBrush="#FF5A8876" BorderThickness="3" Background="#FFF4EDED"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Button HorizontalAlignment="Left" Style="{DynamicResource ButtonStyle1}" VerticalAlignment="Top" Width="180" Height="61" Content="Button"/>