I am writing a form for a WPF app, and I'd like to use the visual states that Button offers. So my XAML is like this right now:
<Button
Grid.Column="0"
Name="GenderMaleButton"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderThickness="0"
Padding="0">
<Border
Background="White"
BorderThickness="2"
CornerRadius="5"
Padding="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<TextBlock/>
</Border>
</Button>
But my Border is not filling my Button. How can I make the Border fill the Button? Or how can I use the visual states of the Button to affect the Border in another way than wrapping the Border inside the Button?
Or can I apply visual states to my Border? If so, how?
EDIT: the result I want is like this:
So a selected state (white border, blue bg), and a default state (blue border, white bg).
From a hard guess , I think you need to fill the border inside the button.Try the code below.Use ControlTemplate
<Button Grid.Column="0"
Name="GenderMaleButton"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderThickness="0"
Padding="0">
<Button.Template>
<ControlTemplate>
<Border Background="#6A6B9A"
BorderThickness="2"
CornerRadius="5"
Padding="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<TextBlock TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold" Foreground="White" Text="Male"></TextBlock>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
You should have set HorizontalContentAlignment and VerticalContentAlignment to Stretch.
<Button
Grid.Column="0"
Name="GenderMaleButton"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
BorderThickness="0"
Padding="0">
<Border
Background="White"
BorderThickness="2"
CornerRadius="5"
Padding="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<TextBlock/>
</Border>
</Button>
Try this:
<StackPanel Height="40" Orientation="Horizontal">
<StackPanel.Resources>
<Style x:Key="GenderButtonStyle" TargetType="{x:Type Button}">
<Setter Property="MinWidth" Value="100" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="InternalBorder"
CornerRadius="5"
Padding="5">
<TextBlock x:Name="InternalText"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{TemplateBinding Content}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Tag" Value="Male">
<Setter TargetName="InternalBorder" Property="Background" Value="RoyalBlue" />
<Setter TargetName="InternalText" Property="Foreground" Value="White" />
</Trigger>
<Trigger Property="Tag" Value="Female">
<Setter TargetName="InternalBorder" Property="Background" Value="White" />
<Setter TargetName="InternalBorder" Property="BorderBrush" Value="RoyalBlue" />
<Setter TargetName="InternalBorder" Property="BorderThickness" Value="1,1,1,1" />
<Setter TargetName="InternalText" Property="Foreground" Value="RoyalBlue" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<!-- Whatever you want -->
</Trigger>
<Trigger Property="IsPressed" Value="True">
<!-- Whatever you want -->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<Button x:Name="MaleButton"
Content="Male"
Style="{StaticResource GenderButtonStyle}"
Tag="Male" />
<Button x:Name="FemaleButton"
Margin="5,0,0,0"
Content="Female"
Style="{StaticResource GenderButtonStyle}"
Tag="Female" />
</StackPanel>
To explain what I've done; I placed two buttons inside a horizontal <StackPanel/> and in its resources subtag I've made a Button Style that can then be assigned to any button you want.
Inside that style I've cracked open the Template and built my own small one that does what you described.
Generally, if a control isn't looking quite the way you want as-is, the best thing to do is open up the template it's made of and make your own.
Like this, you can now define what it should look like when you mouse-over or focus it or press it.
Related
I am writing a chatclient and my messages get displayed in a listbox. In the xaml my listbox is set up like this:
<ListBox x:Name="list_chat" Background="{x:Null}" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" Margin="256,0,0,64" BorderThickness="0" BorderBrush="{x:Null}" Foreground="White" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.CanContentScroll="False" Focusable="False" Grid.ColumnSpan="2">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="#bd93f9" Margin="64,0,8,0" HorizontalAlignment="Right">
<TextBlock Text="{Binding}" TextWrapping="Wrap" LineStackingStrategy="MaxHeight" Foreground="White" HorizontalAlignment="Right" VerticalAlignment="Stretch" Margin="16,8,32,0" LineHeight="Auto" TextTrimming="None" TextAlignment="Right" Width="Auto" Padding="0" UseLayoutRounding="True">
</TextBlock>
<Button HorizontalAlignment="Right" VerticalAlignment="Center" Width="32" Height="32" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="White" Margin="0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border
x:Name="border"
Background="{x:Null}"
BorderBrush="{x:Null}"
BorderThickness="0"
CornerRadius="90"
TextBlock.Foreground="White">
<Grid>
<Image
x:Name="buttonImage"
Source="C:\Users\janke\source\repos\Unichat\Unichat\bin\Debug\pictures\icons\reply-line.png" Width="16" Height="16"
/>
<ContentPresenter
Margin="{TemplateBinding Padding}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="border" Property="Background" Value="{x:Null}" />
<Setter TargetName="border" Property="BorderBrush" Value="{x:Null}" />
<Setter TargetName="buttonImage" Property="Source" Value="C:\Users\janke\source\repos\Unichat\Unichat\bin\Debug\pictures\icons\reply-fill.png" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="border" Property="Background" Value="{x:Null}" />
<Setter TargetName="border" Property="BorderBrush" Value="{x:Null}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I want to control the "HorizontalAlignment" of my grid property with a binding so the message either gets aligned right or left, depending on if the message is sent or recieved. I didn't find a way to do that on the internet, even though I know its possible. I just don't understand bindings just yet.
My C# code looks like this:
list_chat.Items.Add(textRange.Text);
Thanks in advance!
The HorizontalAlignment property takes a type of System.Windows.HorizontalAlignment. You want to bind to a property of that type.
public HorizontalAlignment HorizontalAlignmentValue
{
get
{
if (--whatever--)
return HorizontalAlignment.Left;
else if (--whatever--)
return HorizontalAlignment.Right;
}
}
Then you would just set up the binding like usual. If you will need to update this value then be sure to implement INotifyPropertyChanged.
For the binding (in it simplest form):
<Grid HorizontalAlignment="{Binding HorizontalAlignmentValue}" />
Alt:
If you don't want the 'HorizontalAlignmentValue' property to handle its own logic, then you could set up the property with INotifyPropertyChanged and set it elsewhere presumably where the value can be determined, then control updating the UI on change.
Sorry in advance as I had trouble trying to think of the best way to convey my issue in a way that isn't too vague in the title but will be a little easier to understand as I explain the context.
Basically I have a re-sizable box that's composed of Thumb controls with a textblock above it that labels the associated box detailing of what it is.
The problem here is that as I resize it, the textblock also gets resized as well but only happens when I'm resizing the width of the box. The same doesn't happen when I resize the box by the height but my goal is to have it not be resized at all.
Preview of resizing action
I understand that since the textblock is grouped with the resizing control inside the control template that it makes sense for it along with other sibling controls to be affected by the resize as well but I don't understand why it only works specifically when the width of the item is affected.
My goal here is to find a way to make the labels not be affected at all by the resize action but to stay with the associated box at the same time (in the event the user decides to say move the box to a different position)
Here's the code for the control template:
<!-- Designer Item Template-->
<ControlTemplate x:Key="DesignerItemTemplate" TargetType="ContentControl">
<Grid x:Name="DesignerGrid" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<s:MoveThumb x:Name="MoveThumbAdorner" Template="{StaticResource MoveThumbTemplate}" Cursor="SizeAll"/>
<Control Template="{StaticResource ResizeDecoratorTemplate}"/>
<ContentPresenter x:Name="rectCP" Content="{TemplateBinding ContentControl.Content}"/>
<Border x:Name="BoxLabelBorder" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5,-35" Background="#EEEEEE" BorderBrush="Black" BorderThickness="2" CornerRadius="3">
<Grid x:Name="BoxLabelGrid" Margin="5">
<StackPanel x:Name="BoxLabelStackPanel" Orientation="Horizontal">
<TextBlock Foreground="Black" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Name, Mode=TwoWay}"/>
<Button x:Name="DelClassBtn" Margin="5,0,0,0" Height="15" MinWidth="15" Width="15" Click="DelClassBtn_Click">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#EEEEEE"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter Focusable="False" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="#d6d6d6"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" Value="#bebebe"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" Value=".35"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
<Image HorizontalAlignment="Center" VerticalAlignment="Center" Height="7" Width="7" Source="/Resources/Images/cross_48.png" />
</Button>
</StackPanel>
</Grid>
</Border>
</Grid>
</ControlTemplate>
So this is my XAML and for some reason it's not changing colors on mouseover, I added the triggers for it and I thought that would do it, when I hover over the button its not doing anything at all, why is that?
<Button Click="ButtonBase_OnClick" Margin="10,0,0,0" Style="{DynamicResource RoundedButtonStyle}" Width="100" Height="30" HorizontalAlignment="Left">
<Grid>
<Image IsHitTestVisible="False" Height="15" Width="15" VerticalAlignment="Center" HorizontalAlignment="Left" Source="Resources/addButton.png" />
<TextBlock IsHitTestVisible="False" Margin="20,0,0,1" VerticalAlignment="Center" Foreground="#9e9e9e">Add Product</TextBlock>
</Grid>
</Button>
<Window.Resources>
<Style x:Key="RoundedButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="5" Background="#2d2d30" BorderThickness="1" Padding="2">
<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>
</Window.Resources>
Its not changing because you modified the control template of Button to:
<Border CornerRadius="5" Background="#2d2d30" BorderThickness="1" Padding="2"
Note the hard-coded background color. No matter what you do to the button's Background property it won't take effect since its not used. If you want to use that property in your template you need a TemplateBinding:
Background="{TemplateBinding Background}"
Then in the style set the default to your original value.
<Setter Property="Background" Value="#2d2d30"/>
I want to have a button with round edge grid and set disable button color to gray, green otherwise. Attached snippet of code. I don't know how to change the default. If I disable my button, I get the output as the image on the left, however, I want it to look like the image on the right!
<Button x:Name="button" Height="30" Width="100" Margin="825,0,0,0" Background="Transparent"
BorderThickness="0" BorderBrush="Transparent">
<Button.Content>
<Border CornerRadius="12.5" Height="25" Width="95" Margin="0" BorderBrush="Gray"
BorderThickness="4,4,4,4" Background="Gray">
<TextBlock Text="Back" HorizontalAlignment="Center" VerticalAlignment="Top"
Margin="12,0,13,0" Foreground="White"/>
</Border>
</Button.Content>
</Button>
Content is only one part of Button. The rest is determined by Template.
If multiple buttons should have custom apperance, the Template should be set in buttons Style. For one button it can be done inplace:
<Button x:Name="button" Content="Back" Height="30" Width="100" Margin="825,0,0,0" Background="Transparent"
BorderThickness="0" BorderBrush="Transparent">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border CornerRadius="12.5" Height="25" Width="95" Margin="0" BorderBrush="Gray"
BorderThickness="4,4,4,4" Background="Gray">
<TextBlock Text="{TemplateBinding Content}"
HorizontalAlignment="Center" VerticalAlignment="Top"
Margin="12,0,13,0" Foreground="White"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
if you are going to reuse the template, declare it as Resource
<Window.Resources>
<ControlTemplate TargetType="Button" x:Key="RoundBtn">
<Border Name="roundBorder" CornerRadius="12.5" Height="25" Width="95" Margin="0" BorderBrush="Gray"
BorderThickness="4,4,4,4" Background="Gray">
<TextBlock Text="{TemplateBinding Content}"
HorizontalAlignment="Center" VerticalAlignment="Top"
Margin="12,0,13,0" Foreground="White"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="roundBorder" Property="Background" Value="Green"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
and set button Template using resource:
<Button x:Name="button" Content="Back" Height="30" Width="100"
Template="{StaticResource RoundBtn}"
Margin="825,0,0,0" Background="Transparent"
BorderThickness="0" BorderBrush="Transparent"/>
This should work for you. I've used an outer grid with a blue background so that I could be sure it was all working, but just remove that and move the style to whichever resources you need to. Explanation as comments within the xaml:
<Grid Background="Blue">
<Grid.Resources>
<!-- Override the default button style, otherwise you get a grey
rectangle behind the ellipse when disabled -->
<Style TargetType="Button" x:Key="MyButtonStyle">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter x:Name="MyContentPresenter"
Content="{TemplateBinding Content}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Button x:Name="button" Height="30" Width="100"
BorderThickness="0" BorderBrush="Transparent" IsEnabled="false"
Style="{StaticResource MyButtonStyle}">
<Button.Content>
<Border CornerRadius="12.5" Height="25" Width="95">
<Border.Style>
<Style TargetType="Border">
<!-- Button is gray by default, i.e. when enabled -->
<Setter Property="Background" Value="Gray"/>
<Style.Triggers>
<!-- If the button becomes disabled then it becomes green -->
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="Green" />
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<TextBlock Text="Back" HorizontalAlignment="Center" VerticalAlignment="Center"
Foreground="White"/>
</Border>
</Button.Content>
</Button>
</Grid>
I have a WPF button style below:
<Style x:Key="myButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Width="{Binding Width}" Height="{Binding Height}">
<Border Name="container" Background="{Binding Background}" CornerRadius="{Binding CornerRadius}">
<TextBlock Margin="10" FontFamily="Arial" FontWeight="Bold" TextAlignment="Left" HorizontalAlignment="Left" VerticalAlignment="Top" Width="Auto" FontSize="{Binding TextSize}" Foreground="White" Text="{Binding Text}" TextWrapping="Wrap"/>
</Border>
<Border Name="overlay" Background="Transparent" CornerRadius="{Binding CornerRadius}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="overlay" Property="Opacity" Value="0.6" />
<Setter TargetName="overlay" Property="Background" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The problem is that, although all of the buttons of my application have the same style, some of them need to have a border around it. Therefore I would like to know if it is possible to access the container border of my style to set its thickness and color? If so how can I do this?
Edit:
I've mixed the suggestions of madd0 and Josh and created a DataTrigger inside my style with a binding to a property that tells me if the button should or should not have a border.
The final code is below:
<Style x:Key="myButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Width="{Binding Width}" Height="{Binding Height}">
<Border Name="container" Background="{Binding Background}" CornerRadius="{Binding CornerRadius}">
<TextBlock Margin="10" FontFamily="Arial" FontWeight="Bold" TextAlignment="Left" HorizontalAlignment="Left" VerticalAlignment="Top" Width="Auto" FontSize="{Binding TextSize}" Foreground="White" Text="{Binding Text}" TextWrapping="Wrap"/>
</Border>
<Border Name="overlay" Background="Transparent" CornerRadius="{Binding CornerRadius}" />
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Path=HasBorder}" Value="true">
<Setter TargetName="container" Property="BorderThickness" Value="{Binding BorderThickness}" />
<Setter TargetName="container" Property="BorderBrush" Value="{Binding BorderBrush}" />
</DataTrigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="overlay" Property="Opacity" Value="0.6" />
<Setter TargetName="overlay" Property="Background" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Thank you all for your help,
Komyg
I think if you extend the Button class and give it a new boolean DependencyProperty, essentially all you need to do is give your Border a name, then in ControlTemplate.Triggers, Trigger off that boolean property to make the border as you need it in your special cases.
It would be similar to what you already have with the IsPressed ControlTemplate trigger.
I don't think you'll really need to access your control template properties. Since Button already has border properties, you ought to just set those properties on the button directly. Then, add the border to your ControlTemplate, binding its properties to that of the button.