I want to template my GridSplitter with some custom code, but it seems to stop working when I overwrite ControlTemplate.
My code looks like this:
<Style x:Key="Vertical_GridSplitter" TargetType="{x:Type GridSplitter}" BasedOn="{StaticResource {x:Type GridSplitter}}">
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Background" Value="Orange" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="Margin" Value="0,5,0,5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridSplitter}">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0"
Background="{TemplateBinding Background}"
Width="3"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I'm sure the problem is here, not in the View itself, because if I use the default GridSplitter without my styling it works just fine. With my code, styling gets applied, mouse cursor changes to arrows like it should, but clicking on the GridSplitter and dragging it does nothing...
Found an answer myself. The problem was here:
<Setter Property="HorizontalAlignment" Value="Left" />
Should be:
<Setter Property="HorizontalAlignment" Value="Stretch" />
Related
I am fairly new to WPF, and I am trying to make a custom button where it changes to another specified colour when you hover over it. I have done this with partial success; the only problem is that only the bottom part of the button actually triggers the colour change.
Red highlighted area is the approximate hitbox. (not the long red strip, that's just decoration)
<!-- Button Markup-->
<Button Margin="4,0,4,0" >
<Image Source="{StaticResource closeImg}"></Image>
</Button>
<!-- Button style -->
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#FF2B2B2B"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="Width" Value="28px"/>
<Setter Property="Height" Value="28px"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
I've found that this was a slight quirk with the debug function with WPF and the WindowChrome class. This is fixed by adding the following to the style:
<Setter Property="WindowChrome.IsHitTestVisibleInChrome" Value="True"></Setter>
your solution seems to be good to me. I've tried the same thing on my vs and everything seems to be just fine. Perhaps there's something else connected with container that holds these buttons, or perhpas something with the image itself. Can you try to set the name for the border inside of a controlTemplate and set the TargetName inside of a trigger? Wonder if that could help
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#FF2B2B2B"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="Width" Value="28px"/>
<Setter Property="Height" Value="28px"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Bd" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="Background" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
I have the following layout:
<Button VerticalAlignment="Stretch" Style="{StaticResource MyStyle} >
<TextBlock VerticalAlignment="Center">MyText</TextBlock>
</Button>
Style is defined as following:
<Style x:Key="BackButtonStyle"
TargetType="{x:Type Button}">
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="GridArea"
Padding="8,4"
Margin="0,0,0,0">
<ContentControl>
<ContentPresenter x:Name="ContentPresenterArea"/>
</ContentControl>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="GridArea" Property="Background" Value="{StaticResource Some_Brush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The problem is that background brush changes only when mouse is over the textblock, not the entire area. I tried few things but with no effect...
GridArea has null Background. Elements with null Background don't react to mouse. set Background="Transparent" or better yet use TemplateBindings:
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="GridArea"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
Padding="8,4"
Margin="0,0,0,0">
Please keep in mind i am new with WPF, I am trying to give my Button a border thickness value via .Xaml templates, However, its not working, Here is my .Xaml:
<Button>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#FFFFFFFF" />
<Setter Property="Foreground" Value="#FFF01F1F" />
<Setter Property="BorderBrush" Value="#FFF01F1F" />
<Setter Property="BorderThickness" Value="5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="#FFF01F1F" />
<Setter Property="Foreground" Value="#FFFFFFFF" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Thanks in Advance.
Update:::
I have tried the Change Thickness answer, however now it disables my IsMouseOver property,
You set your own custom template which doesn't use the BorderThickness property of the button itself, so it should be:
<Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
Or you can set it to 5 directly on the template.
I am trying to set the border colour property on a button when user hovers on it. Currently I am using following XAML.
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#FF0081a7"/>
<Setter Property="BorderBrush" Value="White"/>
<Setter Property="BorderThickness" Value="2,2,2,2"/>
<Setter Property="Foreground" Value="#FFffffff"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#ccCCCCCC"/>
<Setter Property="BorderBrush" Value="Gold"/>
<Setter Property="BorderThickness" Value="2,2,2,2"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
This works fine only for colour changes. Border on the other hand is not displayed at all. I am sure, I am missing something very simple, only thing is I can't find what it is.
You're not actually utilising the BorderBrush and BorderThickness properties... you need to actually do something with them from inside your ControlTemplate. Try this:
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding
BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
I have made a BaseStyle, which looks like this:
<Style x:Key="BaseStyle" TargetType="{x:Type Control}">
<Setter Property="KeyboardNavigation.TabNavigation" Value="None" />
<Setter Property="AllowDrop" Value="true" />
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Padding" Value="8,5,3,3" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<Grid>
<Border x:Name="BorderBase" Background="White" BorderThickness="1,1,1.4,1.4" BorderBrush="Silver" CornerRadius="4" />
<Label x:Name="TextPrompt" Content="{TemplateBinding Tag}" Visibility="Collapsed" Focusable="False" Foreground="Silver"></Label>
<ScrollViewer Margin="0" x:Name="PART_ContentHost" Foreground="{DynamicResource OutsideFontColor}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderThickness" TargetName="BorderBase" Value="1,1,2.4,2.4"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate x:Name="InspectorErrorTemplate">
<StackPanel Orientation="Vertical">
<Border BorderBrush="Red" BorderThickness="1" CornerRadius="4">
<AdornedElementPlaceholder Name="adornerPlaceholder"/>
</Border>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And have used it this way to apply it to a textbox, which works fine:
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource BaseStyle}" />
Now I thought I can simply use the same style at a textbox of a combobox. So I thought I have to add something in this part:
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
<ControlTemplate.Triggers>
</ControlTemplate.Triggers>
</ControlTemplate>
However, I cannot add something like BasedOn="{StaticResource BaseStyle}" in the ControlTemplate to make e.g. the textbox to get a different border when it receives the focus (see IsFocused Trigger in the BaseStyle), or a red curved corner in case the validation is triggered... What am I doing wrong?
Hi you are working with different border color for different text-box that is the only problem here. There are several other options but I feel the following option is good to go.
You can create your own UserControl keeping a TextBox inside it. You can add a new DependencyProperty- BorderColor property in your UserControl. So that according to the BorderColor property value internally you can change the color of the border. So here you don't have to worry about multiple Style or any inheritance.
Isn't it?
The template for a TextBox is fundamentally different than the the template for a ComboBox. So you'll have to have different templates.
You can have one base style to define the shared properties (like Padding, FontFamily, etc.) without defining the Template property. Then make two more styles: one with TargetType set to TextBox; and the other with TargetType set to ComboBox. Each of these styles will be based on your base style and have additional definition for the template (and other properties that are not shared between the two controls).