Here is the style of a thumb that i created...(triangle) .
Although i got rid of mouseover style etc, i cant get rid of focus no matter what i do...
I created a polygon in order to create the triangle...
I use that thumb within a slider control
<Style x:Key="HorizontalSliderThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="Focusable" Value="false"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Height" Value="22"/>
<Setter Property="Width" Value="11"/>
<Setter Property="Foreground" Value="Gray"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Canvas SnapsToDevicePixels="true">
<Canvas.RenderTransform>
<TranslateTransform X="5.5" Y="11"/>
</Canvas.RenderTransform>
<Path x:Name="InnerBorder" Stroke="White"/>
<Path x:Name="OuterBorder" Stroke="#FF929292"/>
<Polygon FocusVisualStyle="{x:Null}" x:Name="Background" Points="0,0 1,0 0.5,1" Fill="#FFF18200" Width="15.3" Height="15" Stretch="Fill" Canvas.Left="-7.5" Canvas.Top="-8" RenderTransformOrigin="0.5,0.5" />
</Canvas>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<!-- <Setter Property="Fill" TargetName="Background" Value="{StaticResource HorizontalSliderThumbHoverBackground}"/>
<Setter Property="Stroke" TargetName="OuterBorder" Value="{StaticResource HorizontalSliderThumbHoverBorder}"/>-->
</Trigger>
<Trigger Property="Foreground" Value="Blue">
<Setter Property="Fill" TargetName="Background" Value="{StaticResource HorizontalSliderThumbHoverBackground}"/>
<Setter Property="Stroke" TargetName="OuterBorder" Value="{StaticResource HorizontalSliderThumbHoverBorder}"/>
</Trigger>
<Trigger Property="IsDragging" Value="true">
<!-- <Setter Property="Fill" TargetName="Background" Value="{StaticResource HorizontalSliderThumbPressedBackground}"/>
<Setter Property="Stroke" TargetName="OuterBorder" Value="{StaticResource HorizontalSliderThumbPressedBorder}"/>-->
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Fill" TargetName="Background" Value="#FFF4F4F4"/>
<Setter Property="Stroke" TargetName="InnerBorder" Value="{x:Null}"/>
<Setter Property="Data" TargetName="OuterBorder" Value="{StaticResource SliderThumbDisabledGeometry}"/>
<Setter Property="Stroke" TargetName="OuterBorder" Value="#FFAEB1AF"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Trigger Property="Foreground" Value="Blue">
<Setter Property="Fill" TargetName="Background" Value="{StaticResource HorizontalSliderThumbHoverBackground}"/>
<Setter Property="Stroke" TargetName="OuterBorder" Value="{StaticResource HorizontalSliderThumbHoverBorder}"/>
</Trigger>
Oh god this property did the problem.. I think that this is really strange.. Blue means nothing to me...Dont know why microsoft did this..
Set the FocusVisualStyle on your Thumb Style to null.
Related
I wrote a style code for TextBox rounded corner and it worked. But When I tried the same code just changing the TargetType field to PasswordBox It didn't work for PasswordBox.
Thanks in advance.
This is my style code:
<Style x:Key="TextBoxTemplate" TargetType="TextBox">
<Setter Property="Background" Value="#525252"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderThickness" Value="0,0,0,1"/>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="10"/>
</Style>
</Style.Resources>
</Style>
<Style x:Key="PasswordBoxTemplate" TargetType="PasswordBox">
<Setter Property="Background" Value="#525252"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderThickness" Value="0,0,0,1"/>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="10"/>
</Style>
</Style.Resources>
</Style>
This is my XAML style binding code:
<PasswordBox Style="{DynamicResource PasswordBoxTemplate}" Name="txtPassword" FontSize="18"/>
The PasswordBox is special in that it resets the Border style. It is implemented this way. What you can do is you can copy the default style of the PasswordBox and adapt the corner radius directly.
<Style x:Key="PasswordBoxStyle" TargetType="{x:Type PasswordBox}">
<Setter Property="PasswordChar" Value="●"/>
<Setter Property="Background" Value="#525252"/>
<Setter Property="BorderBrush" Value="#FFABAdB3"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderThickness" Value="0,0,0,1"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type PasswordBox}">
<Border x:Name="border" CornerRadius="10" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="True">
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="#FF7EB4EA"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
<Condition Property="IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
</MultiTrigger>
</Style.Triggers>
</Style>
I have a button and I want to change the background, it must be red when is anabled and green when is disabled. It's only an example to understand why it does not work, and the difference between when it works and when it does not work.
Option 1: when I use triggers in the button:
<Button Content="Buscar" Height="23" Name="btnComponentesBuscar" Width="75">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" Value="Green"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
OPTION 2: modifying the template of the button. In the resources dictionary of my control in which I have my button, I put this:
<Style x:Key="MyButtonCustomTemplate" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="border" Value="Green"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="true">
<Setter Property="Background" TargetName="border" Value="Red"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Static.Border}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
In the second option it works as exepcted, but I would like to simplify the code and I see that the first option has less code, but I don't know why it does not work.
Thank so much.
i have the following button style which works fine:
<Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Border"
CornerRadius="2" BorderThickness="1"
Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
<ContentPresenter Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
with more styles defined at the button itself i change the buttons background (green for active)
<Button>
<Button.Style>
<Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
<Style.Triggers>
<DataTrigger Binding="{Binding MainStatus.Restart}" Value="true">
<Setter Property="Background" Value="LimeGreen" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
now if i disable the button, the button gets gray, because of the template. is there a way of making the current background more 'gray' but keeping the base color. so if the button was green, the color remains basically green?
Instead of setting background gray, you can set opacity to give it a disabled look (this will retain your background) something like this:
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<!--<Setter TargetName="Border" Property="Background"
Value="{StaticResource DisabledBackgroundBrush}" />-->
<Setter TargetName="Border" Property="Opacity" Value="0.4"/>
<Setter TargetName="Border" Property="BorderBrush"
Value="{StaticResource DisabledBorderBrush}" />
<Setter Property="Foreground"
Value="{StaticResource DisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
Create style:
<Style.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#FFADADAD"/>
</Trigger>
</Style.Triggers>
I'm trying to override the button style.
Actually I've done it dozens of times, but now I came across this:
Exception and InnerException:
{"A property can not be null in Trigger."}
My Code:
<Style x:Key="ArrowRightStyle" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Height="{Binding ElementName=imgBackground, Path=ActualHeight, Mode=OneWay}"
Width="{Binding ElementName=imgBackground, Path=ActualWidth, Mode=OneWay}">
<Image x:Name="imgBackground" Source="{StaticResource RightArrowImageNormal}" Stretch="None"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="imgBackground" Property="Source" Value="{StaticResource RightArrowImageDisabled}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="imgBackground" Property="Source" Value="{StaticResource RightArrowImageIsPressed}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and so it works:
<Style x:Key="ArrowRightStyle" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Height="{Binding ElementName=imgBackground, Path=ActualHeight, Mode=OneWay}"
Width="{Binding ElementName=imgBackground, Path=ActualWidth, Mode=OneWay}">
<Image x:Name="imgBackground" Source="{StaticResource RightArrowImageNormal}" Stretch="None"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="imgBackground" Property="Source" Value="{StaticResource RightArrowImageDisabled}"/>
</Trigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=IsPressed}" Value="True">
<Setter TargetName="imgBackground"
Property="Source" Value="{StaticResource RightArrowImageIsPressed}"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Why????
Just from quick look, I think it can't find the property IsPressed
Add "Button." should do it.
....
<Trigger Property="Button.IsPressed" Value="True">
<Setter TargetName="imgBackground" Property="Source" Value="{StaticResource....
or make sure that your template targets a button (I know you specified that on the style, but that ain't enough - The template will assume typeof(Control) and control doesn't have IsPressed on it.
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
....the rest of your code
I think that
{Binding RelativeSource={RelativeSource Mode=Self}, Path=IsPressed}"
resolves the relative source's type at run time as "Button",hence able to find IsPressed...
I want to make a WPF TextBox have a DarkBlue border and thickness equal to 1. I want to make the WPF have this border ( DarkBlue, thickness set to 1 ) even when the TextBox is selected.
I tried doing this task by the following code. However, it doesn't work at all. Any ideas or hints ? Any help would be greatly appreciated.
<Style x:Key="ReadOnlyLargeTextBox" TargetType="{x:Type TextBox}" >
<Setter Property="Height" Value="80"/>
<Setter Property="MaxHeight" Value="80"/>
<Setter Property="VerticalScrollBarVisibility" Value="Visible"/>
<Style.Triggers>
<Trigger Property="TextBox.IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="DarkBlue"/>
<Setter Property="BorderThickness" Value="1"/>
</Trigger>
<Trigger Property="TextBox.IsMouseOver" Value="False">
<Setter Property="BorderBrush" Value="DarkBlue"/>
<Setter Property="BorderThickness" Value="1"/>
</Trigger>
</Style.Triggers>
</Style>
P.S Note that the text box does not have an IsSelected property.
just see is this you want...
<Style x:Key="TextBoxStyle1" BasedOn="{x:Null}" TargetType="{x:Type TextBox}">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="bg" BorderBrush="#FF825E5E" BorderThickness="1">
<ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="bg" Value="DarkBlue"/>
<Setter Property="BorderThickness" TargetName="bg" Value="2"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderBrush" TargetName="bg" Value="DarkBlue"/>
<Setter Property="BorderThickness" TargetName="bg" Value="2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I think your problem is due to having the Trigger Property value containing TextBox. You just need the name of the property.
<Style x:Key="ReadOnlyLargeTextBox" TargetType="{x:Type TextBox}">
<Setter Property="Height" Value="80"/>
<Setter Property="MaxHeight" Value="80"/>
<Setter Property="VerticalScrollBarVisibility" Value="Visible"/>
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderBrush" Value="Blue"/>
<Setter Property="BorderThickness" Value="1"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="Blue"/>
<Setter Property="BorderThickness" Value="1"/>
</Trigger>
</Style.Triggers>
</Style>
Check FocusVisualStyle property of the FrameworkElement object (ancestor of TextBox). It's purpose is to define style applied when an element is selected.
You have the same logic for when "IsMouseOver" True as well False. Change one and you should see something.