I'm creating a WPF application and am using the WPF Extended Toolkit library . I have added the IntegerUpDown control to my UserControl and when the user presses inside the textbox I want the background color to change from a dark grey to a light grey.
I have tried adding a style trigger in the xaml that triggers when the IntegerUpDown control IsFocused for the background to change. However, this did not seem to work.
<xctk:IntegerUpDown x:Name="Day" Value="{Binding DayText, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" Style="{StaticResource IntegerUpDownStyle}" Minimum="{Binding MinimumDateSelection}" Maximum="{Binding MaximumDateSelection}">
<xctk:IntegerUpDown.Watermark>
<TextBlock Text="Day" Foreground="{StaticResource OffsetWhiteBrush}" Margin="0,0,60,0"/>
</xctk:IntegerUpDown.Watermark>
</xctk:IntegerUpDown>
<!-- Textbox and PasswordBox base styling for login boxes -->
<Style x:Key="IntegerUpDownStyle" TargetType="{x:Type Control}" BasedOn="{StaticResource BaseTextStyle}">
<Setter Property="MaxWidth" Value="400" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="FontSize" Value="{StaticResource FontSize20}" />
<Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
<Setter Property="Background" Value="{StaticResource DarkGreyBrush}" />
<Setter Property="Margin" Value="0,20,0,0" />
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="{StaticResource LightGreyBrush}" />
</Trigger>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors)[0].ErrorContent}" />
</Trigger>
</Style.Triggers>
</Style>
With the styling I've added I expected the background of the control to change from a dark grey to a light grey but nothing happened. How can I make this happen?
I tried this problem in my own app,and it's finished.Here's code:
<Window
x:Class="WpfApp16.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:local="clr-namespace:WpfApp16"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
Title="MainWindow"
Width="800"
Height="450"
mc:Ignorable="d">
<Window.Resources>
<Style x:Key="IntegerUpDownStyle" TargetType="xctk:IntegerUpDown">
<Style.Triggers>
<EventTrigger RoutedEvent="ValueChanged">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Background.Color"
From="DarkGray"
To="Transparent"
Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel>
<xctk:IntegerUpDown Width="200" Style="{StaticResource IntegerUpDownStyle}">
<xctk:IntegerUpDown.Background>
<SolidColorBrush Color="Transparent" />
</xctk:IntegerUpDown.Background>
</xctk:IntegerUpDown>
</StackPanel>
For more Information ,look this linke:WPF Animation dependency issue
The same trigger in IntegerUpDown source code, so the outside trigger was no longer effective.
IntegerUpDown source code:
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="PART_TextBox"
Property="FocusManager.FocusedElement"
Value="{Binding ElementName=PART_TextBox}" />
</Trigger>
I tried using GotFocus and LostFocus events.
xaml:
<xctk:IntegerUpDown x:Name="Day"
LostFocus="IntegerUpDown_LostFocus"
GotFocus="IntegerUpDown_GotFocus"
Focusable="True"
Value="{Binding DayText, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" Style="{StaticResource IntegerUpDownStyle}" Minimum="{Binding MinimumDateSelection}" Maximum="{Binding MaximumDateSelection}">
<xctk:IntegerUpDown.Watermark>
<TextBlock Text="Day" Foreground="{StaticResource OffsetWhiteBrush}" Margin="0,0,60,0"/>
</xctk:IntegerUpDown.Watermark>
</xctk:IntegerUpDown>
cs code:
private void IntegerUpDown_GotFocus(object sender, RoutedEventArgs e)
{
Day.Background = new SolidColorBrush(Colors.Gray);
}
private void IntegerUpDown_LostFocus(object sender, RoutedEventArgs e)
{
Day.Background = new SolidColorBrush(Colors.DarkGray);
}
After seeing the answer from #J.B.D I edited the ControlTemplate for the IntegerUpDown control to change the back
<ControlTemplate x:Key="ControlControlTemplate1" TargetType="{x:Type Control}">
<xctk:ButtonSpinner x:Name="PART_Spinner" AllowSpin="{Binding AllowSpin, RelativeSource={RelativeSource TemplatedParent}}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ButtonSpinnerLocation="{Binding ButtonSpinnerLocation, RelativeSource={RelativeSource TemplatedParent}}" Background="{TemplateBinding Background}" HorizontalContentAlignment="Stretch" IsTabStop="False" ShowButtonSpinner="{Binding ShowButtonSpinner, RelativeSource={RelativeSource TemplatedParent}}" VerticalContentAlignment="Stretch">
<xctk:WatermarkTextBox x:Name="PART_TextBox" AutoMoveFocus="{Binding AutoMoveFocus, RelativeSource={RelativeSource TemplatedParent}}" AutoSelectBehavior="{Binding AutoSelectBehavior, RelativeSource={RelativeSource TemplatedParent}}" AcceptsReturn="False" BorderThickness="0" ContextMenu="{TemplateBinding ContextMenu}" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="True" IsUndoEnabled="True" MinWidth="20" MaxLength="{Binding MaxLength, RelativeSource={RelativeSource TemplatedParent}}" Padding="{TemplateBinding Padding}" TextAlignment="{Binding TextAlignment, RelativeSource={RelativeSource TemplatedParent}}" TextWrapping="NoWrap" TabIndex="{TemplateBinding TabIndex}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" WatermarkTemplate="{Binding WatermarkTemplate, RelativeSource={RelativeSource TemplatedParent}}" Watermark="{Binding Watermark, RelativeSource={RelativeSource TemplatedParent}}">
<xctk:WatermarkTextBox.Style>
<Style TargetType="{x:Type xctk:WatermarkTextBox}">
<Setter Property="Background" Value="{StaticResource DarkGreyBrush}" />
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="{StaticResource LightGreyBrush}" />
</Trigger>
</Style.Triggers>
</Style>
</xctk:WatermarkTextBox.Style>
</xctk:WatermarkTextBox>
</xctk:ButtonSpinner>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="{DynamicResource {ComponentResourceKey ResourceId=ControlMouseOverBorderKey, TypeInTargetAssembly={x:Type Themes:ResourceKeys}}}"/>
</Trigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsReadOnly, RelativeSource={RelativeSource Self}}" Value="False"/>
<Condition Binding="{Binding AllowTextInput, RelativeSource={RelativeSource Self}}" Value="False"/>
</MultiDataTrigger.Conditions>
<Setter Property="IsReadOnly" TargetName="PART_TextBox" Value="True"/>
</MultiDataTrigger>
<DataTrigger Binding="{Binding IsReadOnly, RelativeSource={RelativeSource Self}}" Value="True">
<Setter Property="IsReadOnly" TargetName="PART_TextBox" Value="True"/>
</DataTrigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="BorderBrush" Value="{DynamicResource {ComponentResourceKey ResourceId=ControlSelectedBorderKey, TypeInTargetAssembly={x:Type Themes:ResourceKeys}}}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="FocusManager.FocusedElement" TargetName="PART_TextBox" Value="{Binding ElementName=PART_TextBox}"/>
<Setter TargetName="PART_TextBox" Property="Visibility" Value="Hidden" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Please look at the start of the control template and the WatermarkTextBox. The WatermarkTextBox.Style is what I added to make the background change when the textbox is focused.
To override the COntrolTemplate, right click on the IntegerUpDown Control and then press Edit Template
Related
Hi I have a common Combobox style defined as below in a WPF project.
<Style 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="100"/>
<Setter Property="MinHeight" Value="20"/>
<Setter Property="Height" Value="24"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="IsEditable" Value="True"/>
<Setter Property="BorderBrush" Value="Gray"/>
<!--<Setter Property="MaxDropDownHeight" Value="310"/>-->
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="Transparent" BorderThickness="0">
<AdornedElementPlaceholder />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" x:Name="mainBor">
<interactivity:Interaction.Behaviors>
<ahf:ComboKeyDownBehavior/>
</interactivity:Interaction.Behaviors>
<Grid Width="{TemplateBinding Width}">
<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>
</VisualStateManager.VisualStateGroups>
<ToggleButton x:Name="ToggleButton" Template="{StaticResource ComboBoxToggleButton}" Grid.Column="2" Focusable="false" ClickMode="Press"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
<interactivity:Interaction.Triggers>
<interactivity:EventTrigger EventName="PreviewMouseLeftButtonDown">
<ahf:ComboToggleButtonMouseDown/>
</interactivity:EventTrigger>
</interactivity:Interaction.Triggers>
</ToggleButton>
<ContentPresenter x:Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="5,3,23,3" VerticalAlignment="Center" HorizontalAlignment="Left" Visibility="Visible"/>
<TextBox x:Name="PART_EditableTextBox" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,19,0" Background="Transparent" Visibility="Hidden" IsTabStop="False"
BorderBrush="Transparent" BorderThickness="0">
<interactivity:Interaction.Triggers>
<interactivity:EventTrigger EventName="GotFocus">
<ahf:ComboDropDownTriggerAction/>
</interactivity:EventTrigger>
</interactivity:Interaction.Triggers>
</TextBox>
<Popup x:Name="PART_Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" Focusable="False" PopupAnimation="Slide">
<Grid x:Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}">
<Border x:Name="DropDownBorder" BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="Black"/>
</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>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95" />
</Trigger>
<Trigger Property="IsEditable" Value="True">
<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
<Setter TargetName="ContentSite" Property="Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self},Path=(Validation.Errors)[0].ErrorContent}"/>
<Setter Property="BorderBrush" Value="Red" TargetName="mainBor"/>
</Trigger>
<Trigger Property="Validation.HasError" Value="false">
<Setter Property="ToolTip" Value="{x:Null}"/>
</Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="BorderBrush" Value="{StaticResource BorderColorOnFocus}" TargetName="mainBor"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderBrush" Value="{StaticResource BorderColorOnFocus}" TargetName="mainBor"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter Property="BorderBrush" Value="{StaticResource BorderColorOnFocus}" TargetName="mainBor"/>
</Trigger>
<!--<Trigger SourceName="PART_EditableTextBox" Property="IsFocused" Value="False">
<Setter Property="IsDropDownOpen" Value="False"/>
<Setter TargetName="PART_Popup" Property="IsOpen" Value="False"/>
</Trigger>-->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="13.333"/>
<Setter Property="FontFamily" Value="Myriad Pro"/>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
Now Here's how I have used Combobox in a window.
<ComboBox MinWidth="220"
SelectedValue="{Binding SupplierConfirmed,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
x:Name="cbOrderConfirmation" SelectionChanged="cbOrderConfirmation_SelectionChanged"
GotFocus="CbOrderConfirmation_GotFocus" Tag="{Binding}"
Foreground="{Binding PowderCoatedOrderId, Converter={StaticResource PowdercoaterColorConverter}, NotifyOnTargetUpdated=True, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}"
ItemsSource="{Binding LstOrderConfirmStatus}" DisplayMemberPath="Name" SelectedValuePath="UID" Width="220" Margin="5,0,0,0"/>
Now what I want to do is to bind background color of Combobox based on some value like I have done for Foreground. I have tried binding background color the same way foreground is bound but it isn't working. I don't know what else to do.
What should I change in common style to make background work dynamically based on some value ?
I am have made the following usercontrol, and all works well except the 2 Background setter properties with value transparent for both isMouseOver and IsSelected that do nothing..
<UserControl.Resources>
<DataTemplate x:Key="DeviceItemTemplate">
<Border Padding="10,5" Margin="10" BorderThickness="4" BorderBrush="Green" CornerRadius="20" Height="150" Width="150">
<StackPanel Orientation="Vertical">
<TextBox Name="screenNameTextBox"
Margin="10" Height="20"
Text="{Binding Name}" />
<TextBox
Margin="10" Height="20"
Text="{Binding Location}" />
</StackPanel>
</Border>
</DataTemplate>
<DataTemplate x:Key="DeviceItemTemplateSelected">
<Border Padding="10,5" Margin="10" BorderThickness="4" BorderBrush="Orange" CornerRadius="20" Height="150" Width="150" >
<StackPanel Orientation="Vertical" >
<TextBox Name="screenNameTextBox"
Margin="10" Height="20"
Text="{Binding Name}" />
<TextBox
Margin="10" Height="20"
Text="{Binding Location}" />
</StackPanel>
</Border>
</DataTemplate>
<Style TargetType="{x:Type ListBoxItem}" x:Key="DeviceContainerStyle">
<Setter Property="ContentTemplate" Value="{DynamicResource DeviceItemTemplate}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="Transparent" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="ContentTemplate" Value="{DynamicResource DeviceItemTemplateSelected}"/>
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="Transparent" />
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<Border
Grid.Column="0"
Margin="10"
BorderBrush="Silver"
BorderThickness="1">
<ListBox ItemsSource="{Binding Devices, UpdateSourceTrigger=PropertyChanged}"
SelectedItem="{Binding SelectedScreen, Mode=TwoWay}"
ItemContainerStyle="{StaticResource DeviceContainerStyle}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Border>
This is how it looks
I also tried white, but got same results. I cannot get rid of this blue background.
What am I overlooking please?
-----After receiving mm8 answer-----
Placed all his code in a resource dictionary, made some changes to the solidcolorbrush and BorderThickness, and modified the style section from previous to:
<Style BasedOn="{StaticResource ListBoxItemSSDS}" TargetType="{x:Type ListBoxItem}" x:Key="DeviceContainerStyle">
<Setter Property="ContentTemplate" Value="{DynamicResource DeviceItemTemplate}"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="ContentTemplate" Value="{DynamicResource DeviceItemTemplateSelected}"/>
</Trigger>
</Style.Triggers>
</Style>
You need to define a custom ControlTemplate for the ListBoxItem to be able to the background of it when the IsMouseOver and IsSelected properties are set.
You can right-click on a ListBoxItem in design mode in Visual Studio or in Blend and choose Edit Template->Edit a Copy to copy the default template into your XAML markup and then edit it as per your requirements.
Here is what it looks like and the resources that are involved:
<Style x:Key="FocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="Item.MouseOver.Background" Color="#1F26A0DA"/>
<SolidColorBrush x:Key="Item.MouseOver.Border" Color="#a826A0Da"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Background" Color="#3DDADADA"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Border" Color="#FFDADADA"/>
<SolidColorBrush x:Key="Item.SelectedActive.Background" Color="#3D26A0DA"/>
<SolidColorBrush x:Key="Item.SelectedActive.Border" Color="#FF26A0DA"/>
<Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Padding" Value="4,1"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.MouseOver.Border}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="False"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Border}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="True"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Border}"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You may for example change the Color of the Item.MouseOver.Background and Item.SelectedActive.Background resources.
I am creating a WPF application which is using ModernWpf to style everything. I am also using those two parameter on my window:
ui:ThemeManager.RequestedTheme="Dark"
ui:WindowHelper.UseModernWindowStyle="True"
It works fine, the window bar is dark now. But as soon as I want to set the Font Family for every TextBlock like that
<Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource {x:Type TextBlock}}">
<Setter Property="FontFamily" Value="{StaticResource DefaultFont}" />
</Style>
It keeps changing the FontFamily of the ModernWpf Window and the Font doesn't contain the required Icons. Do I have to set a Key and set every TextBlock Style to that key manually or is there another way? Or is it possible to set the Font Family of the window icons?
Thats what the _ [ ] X Buttons look like now:
It's probably a bad idea to define an explicit TextBlock style in App.xaml as it will affect all TextBlock elements in your app.
Anyway, you can still make the caption button appear as expected if you define a custom ControlTemplate for the TitleBarButton where you replace the ContentPresenter with a TextBlock:
<Style x:Key="CustomStyle" TargetType="ui:TitleBarButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ui:TitleBarButton">
<Grid
x:Name="RootGrid"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="True">
<TextBlock
x:Name="Content"
Text="{TemplateBinding Content}"
FontFamily="Segoe MDL2 Assets"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsActive" Value="False">
<Setter Property="Background" TargetName="RootGrid" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InactiveBackground}" />
<Setter Property="TextElement.Foreground" TargetName="Content" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InactiveForeground}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="RootGrid" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=HoverBackground}" />
<Setter Property="TextElement.Foreground" TargetName="Content" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=HoverForeground}" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" TargetName="RootGrid" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PressedBackground}" />
<Setter Property="TextElement.Foreground" TargetName="Content" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PressedForeground}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="RootGrid" Value="{DynamicResource SystemControlDisabledTransparentBrush}" />
<Setter Property="TextElement.Foreground" TargetName="Content" Value="{DynamicResource SystemControlDisabledBaseMediumLowBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You need to set the TitleBar.ButtonStyle attached property of all your windows to your custom style, just like you set the WindowHelper.UseModernWindowStyle:
<Window ... ui:TitleBar.ButtonStyle="{StaticResource CustomStyle}" />
I have the following Column in my datagrid :
<DataGridTemplateColumn CanUserReorder="False" CanUserResize="True" Header="">
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate />
</DataGridTemplateColumn.CellEditingTemplate>
<DataGridTemplateColumn.CellStyle>
<Style TargetType="DataGridCell" BasedOn="{StaticResource DatagridCellHyperlinkStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border Padding="{TemplateBinding Padding}" VerticalAlignment="Center">
<TextBlock Width="Auto" Height="Auto" TextTrimming="CharacterEllipsis">
<Hyperlink>
<InlineUIContainer TextDecorations="{Binding Path=TextDecorations, RelativeSource={RelativeSource AncestorType=TextBlock}}" Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType=TextBlock}}">
<ContentPresenter Width="Auto" Height="Auto" Content="{Binding DataContext.Value, RelativeSource={RelativeSource AncestorType=DataGridRow}}"/>
</InlineUIContainer>
<Hyperlink.Style>
<Style TargetType="Hyperlink" BasedOn="{StaticResource HyperlinkStyle}">
<EventSetter Event="Hyperlink.Click" Handler="Click" />
</Style>
</Hyperlink.Style>
</Hyperlink>
</TextBlock>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGridTemplateColumn.CellStyle>
</DataGridTemplateColumn>
The hyperlink works perfectly (with my style also) but the text trimming doesn't work. How can I change my code to make it work ?
The 2 styles attached :
<Style x:Key="DatagridCellHyperlinkStyle" TargetType="{x:Type DataGridCell}">
<Setter Property="Padding" Value="5" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="FontSize" Value="14" />
<Setter Property="FontFamily" Value="Helvetica" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Foreground" Value="{StaticResource CouleurBouton}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource ResourceKey=CouleurBouton}"/>
<Setter Property="Foreground" Value="{StaticResource ResourceKey=CouleurFond}" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{StaticResource ResourceKey=CouleurBouton}"/>
<Setter Property="Foreground" Value="{StaticResource ResourceKey=CouleurFond}" />
</Trigger>
<DataTrigger Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}}" Value="True">
<Setter Property="Background" Value="{StaticResource ResourceKey=CouleurBoutonHover}"/>
<Setter Property="Foreground" Value="{StaticResource ResourceKey=CouleurTexteBoutonHover}" />
</DataTrigger>
</Style.Triggers>
</Style>
<Style x:Key="HyperlinkStyle" TargetType="{x:Type Hyperlink}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="{DynamicResource CouleurBoutonPressed}" />
</Trigger>
</Style.Triggers>
<Setter Property="Foreground" Value="{DynamicResource CouleurBouton}" />
<Setter Property="TextBlock.TextDecorations" Value="{x:Null}" />
</Style>
Thank you !
You have nothing that will restrict the TextBlock.Width, so the text in it will never wrap, or be trimmed. To fix this problem, you just need to set some kind of Width restriction on it... you could try something like this:
<ControlTemplate>
<Border Padding="{TemplateBinding Padding}" VerticalAlignment="Center">
<TextBlock MaxWidth="250" TextTrimming="CharacterEllipsis">
...
Well, for WPF engine to understand that the trimming is needed it should see that the control cannot be put into the space available. If the control can be resized(AutoSize) it will just increase its dimensions without any trimming.
From MSDN:
Gets or sets the text trimming behavior to employ when content
overflows the content area.
And I can't see anything in your template that suggests that the space limit will be encountered.
So try to set width limit, either on Column, or on the TextBlock. Or restrict the resize in some other way.
<TextBlock Width="Auto" Height="Auto"
MaxWidth="100"
MinWidth="30"
TextTrimming="CharacterEllipsis">
I have an issue with the IsMouveOver trigger with a TabItem Element.
When the mouse cursor is on a TabItem, its background color changes, which is what I want => It works.
However the background color of the TabItem also changes whenever my mouse cursor is on an item inside the TabItem.
Here's the XAML related to the styling:
<Style x:Key="SupTest" TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border Margin="2" Name="TabBorder" CornerRadius="6" BorderBrush="Transparent" Background="Transparent"
BorderThickness="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<StackPanel Margin="12" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Rectangle Width="25" Height="25" Fill="Blue" HorizontalAlignment="Left" Margin="00,0,0,0"></Rectangle>
<ContentPresenter ContentSource="Header" VerticalAlignment="Center"
HorizontalAlignment="Stretch" Margin="10,0,0,0"></ContentPresenter>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="TabBorder" Property="Background" Value="#FFDFDFDF" />
<Setter TargetName="TabBorder" Property="BorderThickness" Value="2" />
<Setter TargetName="TabBorder" Property="BorderBrush" Value="{DynamicResource WindowTitleColorBrush}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="TabBorder" Property="Background" Value="DarkRed" />
<Setter TargetName="TabBorder" Property="BorderBrush" Value="Black" />
<Setter Property="Foreground" Value="DarkGray" />
</Trigger>
<Trigger Property="Border.IsMouseOver" Value="True">
<Setter TargetName="TabBorder" Property="Background" Value="{DynamicResource WindowTitleColorBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And the XAML code for the windows itself:
<TabControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TabStripPlacement="Left"
BorderThickness="1,0,0,0" BorderBrush="{DynamicResource WindowTitleColorBrush}">
<TabItem Header="Item #1" Style="{StaticResource SupTest}">
<Grid>
<Button Content="Button" HorizontalAlignment="Left" Margin="10" VerticalAlignment="Top" Width="75"/>
</Grid>
<TabItem Header="Item #2" Style="{StaticResource SupTest}">
<Grid>
<Button Content="Button Teeest" HorizontalAlignment="Left" Margin="10" VerticalAlignment="Top" Width="75"/>
</Grid>
</TabItem>
</TabControl>
With this code for example, the IsMouseOver of a TabItem is triggered when the mouse cursor is on the button it contains.
How to fix this? :P
Thanks for the help =)
It does not work because Border as container takes all events, and MouseOver is not exception. If you want to ignore MouseOver event for some part (your inner part of the item) then just put inner item on top of wider item.
You can add Grid control beneath inner part and bind Trigger to its MouseOver event.
<Border Margin="2" Name="TabBorder" CornerRadius="6" BorderBrush="Transparent" Background="Transparent"
BorderThickness="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid>
<Grid x:Name="gridMouseOver"/>
<StackPanel Margin="12" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Rectangle Width="25" Height="25" Fill="Blue" HorizontalAlignment="Left" Margin="00,0,0,0"></Rectangle>
<ContentPresenter ContentSource="Header" VerticalAlignment="Center"
HorizontalAlignment="Stretch" Margin="10,0,0,0"></ContentPresenter>
</StackPanel>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="TabBorder" Property="Background" Value="#FFDFDFDF" />
<Setter TargetName="TabBorder" Property="BorderThickness" Value="2" />
<Setter TargetName="TabBorder" Property="BorderBrush" Value="{DynamicResource WindowTitleColorBrush}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="TabBorder" Property="Background" Value="DarkRed" />
<Setter TargetName="TabBorder" Property="BorderBrush" Value="Black" />
<Setter Property="Foreground" Value="DarkGray" />
</Trigger>
<Trigger SourceName="gridMouseOver" Property="IsMouseOver" Value="True">
<Setter TargetName="TabBorder" Property="Background" Value="{DynamicResource WindowTitleColorBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
bit of an old question but this has been troubling me all day....
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true" />
<Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/>
<Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/>
</MultiDataTrigger.Conditions>
This solved it for me
ignores the mouse over for the active tab
Hope this helps any one who has this problem