Objects within <Menu> have their MouseOver border overridden

Objects within <Menu> have their MouseOver border overridden - c#

I have unusual items like a button, ComboBox, CheckBox, etc., in a "Menu" container. The problem is that the MouseOver border for these controls gets overridden somehow, only when they are in that container. Anywhere else, they are fine.
Every control (CheckBoxes, ComboBoxes, Buttons, Labels, etc) has a custom style. This custom style works fine unless these controls are placed in a "Menu". When that happens I get this blue border highlight for some reason for non MenuItem objects. What can I do to fix the border color without moving or changing other controls?
Here is minimal code that reproduces the problem:
<Window x:Class="MyApp.Window1"
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MyApp"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero2" x:Name="myWindow"
mc:Ignorable="d"
Title="MyTitle"
Width="560" Height="180"
MinWidth="560" MinHeight="180"
Background="#FF222222" Foreground="Red" BorderBrush="#FF222222" ResizeMode="NoResize" WindowStyle="None" Opacity="0.75" WindowStartupLocation="CenterOwner">
<Window.Resources>
<sys:Double x:Key="height">40</sys:Double>
<sys:Double x:Key="titleBarSize">36</sys:Double>
<sys:Double x:Key="fontSize">16</sys:Double>
<Color x:Key="backgroundColor">#FF222222</Color>
<Brush x:Key="backgroundColorBrush">#FF222222</Brush>
<Color x:Key="highlightedColor">#FF333333</Color>
<Brush x:Key="highlightedColorBrush">#FF333333</Brush>
<Color x:Key="borderColor">#FF333333</Color>
<Brush x:Key="borderColorBrush">#FF333333</Brush>
<Color x:Key="textColor">#FF999999</Color>
<Brush x:Key="textColorBrush">#FF999999</Brush>
<Brush x:Key="titleBarColorBrush">#FF222222</Brush>
<Thickness x:Key="Tab_Border_Thickness">2,2,2,2</Thickness>
<Thickness x:Key="TabItem_Border_Thickness_Selected">2,2,2,0</Thickness>
<!--Button-->
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Background" Value="{StaticResource backgroundColorBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource backgroundColorBrush}"/>
<Setter Property="Foreground" Value="{StaticResource textColorBrush}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Width" Value="Auto"/>
<Setter Property="Height" Value="{StaticResource height}"/>
<Setter Property="FontSize" Value="{StaticResource fontSize}"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{StaticResource backgroundColorBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource backgroundColorBrush}"
SnapsToDevicePixels="true">
<ContentPresenter x:Name="contentPresenter" Focusable="False" RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource highlightedColorBrush}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource highlightedColorBrush}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource highlightedColorBrush}"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource highlightedColorBrush}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource highlightedColorBrush}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="border" Value="{StaticResource backgroundColorBrush}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource backgroundColorBrush}"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource textColorBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Menu x:Name="menu" HorizontalAlignment="Left" Height="40" VerticalAlignment="Top" Width="560">
<Button x:Name="button1" Content="button 1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Style="{DynamicResource ButtonStyle1}"/>
</Menu>
<Button x:Name="button2" Content="button 2" HorizontalAlignment="Left" Margin="10,54,0,0" VerticalAlignment="Top" Width="75" Style="{DynamicResource ButtonStyle1}"/>
</Grid>
</Window>

Related

WPF round button

I'm trying to create a round button which has a border shown when hovering and has an object binded color.
I tried to make this but when thes button's color is other than transparent, I can't click on it. Could you help me pls ? I am new to wpf and don't understand everything about it.
<Page.Resources>
<DataTemplate x:Key="Stone">
<StackPanel DataContext="{Binding}">
<Border CornerRadius="15" Height="30" Width="30" Margin="0" >
<Button Content="{Binding}" Tag="{Binding Name}" Height="30" Width="30" Margin="0" Click="Button_Click" Background="Transparent" BorderThickness="0">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding StrColor}" Value="black">
<Setter Property="Background" Value="Black"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding StrColor}" Value="white">
<Setter Property="Background" Value="White"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding StrColor}" Value="none">
<Setter Property="Background" Value="Transparent"></Setter>
</DataTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="3"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="Goban">
<ItemsControl ItemsSource="{Binding }" ItemTemplate="{DynamicResource Stone}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</DataTemplate>
</Page.Resources>
<StackPanel Name="Goban">
<ItemsControl Height="570" Margin="20" x:Name="LstPlateau" ItemsSource="{Binding LstPlateau, Mode=Default}" ItemTemplate="{DynamicResource Goban}">
<ItemsControl.Background>
<ImageBrush ImageSource="../Pictures/goban19.png" Stretch="Fill" />
</ItemsControl.Background>
</ItemsControl>
</StackPanel>
For more details, i'm using mvvm light and, when I click a transparent button, the command fire but it don't whith other color (breakpoint not reached in the command).
Thank you for your help :)

The button is inside the border and "invisible"
To get a round button (or another shape other than rectangular), you need to change the template of the button itself.
Here's an example of a FULL circular button template.
Record it in a resource dictionary and use it in your button.
I did not set color bindings, because I did not understand from your code where they are used.
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<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>
<Style x:Key="ButtonRoundStyle" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{DynamicResource FocusVisual}"/>
<Setter Property="Background" Value="{DynamicResource Button.Static.Background}"/>
<Setter Property="BorderBrush" Value="{DynamicResource 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}">
<Grid>
<Ellipse x:Name="ellipse"
Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{Binding BorderThickness.Left, RelativeSource={RelativeSource AncestorType=Button}}"
Fill="{TemplateBinding Background}" SnapsToDevicePixels="true">
</Ellipse>
<ContentPresenter x:Name="contentPresenter" Focusable="False"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}" RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="true">
<Setter Property="Stroke" TargetName="ellipse" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Fill" TargetName="ellipse" Value="{DynamicResource Button.MouseOver.Background}"/>
<Setter Property="Stroke" TargetName="ellipse" Value="{DynamicResource Button.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Fill" TargetName="ellipse" Value="{DynamicResource Button.Pressed.Background}"/>
<Setter Property="Stroke" TargetName="ellipse" Value="{DynamicResource Button.Pressed.Border}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Fill" TargetName="ellipse" Value="{DynamicResource Button.Disabled.Background}"/>
<Setter Property="Stroke" TargetName="ellipse" Value="{DynamicResource Button.Disabled.Border}"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{DynamicResource Button.Disabled.Foreground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
All keys are obtained through DynamicResource.
Therefore, they can be redefined at the place where the template is applied.
I edited the question, in my project I try ...
After complementing the question with the complete XAML code, if I understood it correctly, the pattern I showed is applied like this:
<Button Content="{Binding}" Tag="{Binding Name}"
Height="130" Width="130" Margin="0"
Click="Button_Click">
<Button.Resources>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="Gray"/>
</Button.Resources>
<Button.Style>
<Style TargetType="Button" BasedOn="{StaticResource ButtonRoundStyle}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Style.Triggers>
<DataTrigger Binding="{Binding StrColor}" Value="black">
<Setter Property="Background" Value="Black"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding StrColor}" Value="white">
<Setter Property="Background" Value="White"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding StrColor}" Value="none">
<Setter Property="Background" Value="Transparent"></Setter>
</DataTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderThickness" Value="3"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>

C# WPF - Background color out of DataGrid

I'm new in WPF and I try to make a DataGrid with auto generated columns.
Now I got stylized the DataGrid as I want, but there is a problem when the DG is smaller than the ParentContent, and it looks like this.
I don't like how it is look's that white bar on the right side of the DG but I don't know how to change it's colour. I wish that it look's like in the DataGridView.
My question is, How can I change the color of that part of the Grid?
GRID CODE
<DataGrid x:Class="Project.WPF.Grid"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Project.WPF"
mc:Ignorable="d"
d:DesignHeight="50" d:DesignWidth="200"
Name="dgv_grid"
Height="Auto" Width="Auto"
AutoGenerateColumns="True"
SelectionMode="Single"
ItemsSource="{Binding}"
DataContext="{Binding}"
Background="#ABABAB"
SelectionUnit="FullRow"
CanUserAddRows="False"
CanUserReorderColumns="False"
CanUserResizeColumns="True"
CanUserResizeRows="False"
IsReadOnly="True"
GridLinesVisibility="None"
HorizontalGridLinesBrush="#A0A0A0"
VerticalGridLinesBrush="#A0A0A0"
BorderThickness="1"
BorderBrush="#636363"
EnableColumnVirtualization="True"
RowHeaderWidth="0"
ColumnWidth="Auto"
Loaded="dgv_grid_Loaded"
AutoGeneratedColumns="dgv_grid_AutoGeneratedColumns"
AutoGeneratingColumn="dgv_grid_AutoGeneratingColumn"
MouseDoubleClick="dgv_grid_MouseDoubleClick"
SelectedCellsChanged="dgv_grid_SelectedCellsChanged">
<DataGrid.ColumnHeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<!--#region Triggers-->
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="#A0A0A0"/>
<Setter Property="BorderThickness" Value="1,1,1,1"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="BorderBrush" Value="#A0A0A0"/>
<Setter Property="BorderThickness" Value="1,1,1,1"/>
<Setter Property="Background" Value="#FFB6B6B6"/>
</Trigger>
</Style.Triggers>
<!--#endregion-->
<!--#region Setters-->
<!--<Setter Property="Height" Value="Auto"/>-->
<Setter Property="FontFamily" Value="Myanmar Text"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Background" Value="#ffffff"/>
<Setter Property="BorderThickness" Value="1,1,0,1"/>
<Setter Property="Padding" Value="7,5,5,0"/>
<Setter Property="BorderBrush" Value="#e5e5e5"/>
<Setter Property="TextBlock.TextAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="TextBlock.TextWrapping" Value="WrapWithOverflow"/>
<!--#endregion-->
</Style>
</DataGrid.ColumnHeaderStyle>
<DataGrid.RowHeaderStyle>
<Style TargetType="{x:Type DataGridRowHeader}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="#A0A0A0"/>
<Setter Property="BorderThickness" Value="1,1,1,1"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="BorderBrush" Value="#A0A0A0"/>
<Setter Property="BorderThickness" Value="1,1,1,1"/>
<Setter Property="Background" Value="#FFB6B6B6"/>
</Trigger>
</Style.Triggers>
<Setter Property="Background" Value="#ffffff"/>
<Setter Property="BorderBrush" Value="#e5e5e5"/>
<Setter Property="BorderThickness" Value="1,1,1,0"/>
<Setter Property="Width" Value="33"/>
<Setter Property="Height" Value="20"/>
</Style>
</DataGrid.RowHeaderStyle>
<DataGrid.CellStyle>
<Style TargetType="{x:Type DataGridCell}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#FF7B7E99"/>
<Setter Property="BorderThickness" Value="0"/>
</Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="Background" Value="#FF4DA2D8"/>
<Setter Property="BorderThickness" Value="0"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="#ABABAB"/>
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid Background="{TemplateBinding Background}">
<Border BorderBrush="#a0a0a0" BorderThickness="1,1,0,0"/>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="6,2,6,2"/>
<ContentControl FontFamily="Myanmar Text" FontSize="20"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.CellStyle>

If you read MSDN's ControlTemplate for DataGrid:
DataGrid Styles and Templates
You will see a large amount of Codes.
I don't know if you are familiar with ControlTemplates or not. but there is a ColumnDefinition on ScrollViewer Behind this Codes :
(In the MSDN I mean)
<ScrollViewer x:Name="DG_ScrollViewer" Focusable="false" Background="Black">
<ScrollViewer.Template>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
You can see that this definition will fill the parent container. because the Middle Column's width is * and it will fills whole parent.
I don't know how you can get rid of this column in WPF defaults. but if you have time to style your DataGrid. you can change MSDN's ControlTemplate and Remove this Line :
<ColumnDefinition Width="*" />
so you will get what DataGridView gives to you.

If you don't want the DataGrid to stretch horizontally, you could set its HorizontalAlignment property to Left:
<DataGrid x:Class="Project.WPF.Grid" ... HorizontalAlignment="Left" />
If you want to change the background of the empty part, you could put the DataGrid in a Grid and set the Background property of this one:´
<Grid Background="Gray">
<DataGrid ... HorizontalAlignment="Left" />
</Grid>

WPF Material Design Raised Button Hovered state

I'm trying to recreate a material design look & feel for a button. For the focused (hovered) state the guidelines say to make a 12 % #000000 shade over the button. I was wondering how this could be achieved in WPF.
I've been looking around a good option would be to add a non-hittable rectangle over the button with a 12 % opacity and a color of #000000. I want to implement this as a style, but I have no idea how to do that.
My style looks like this at moment:
<Style x:Key="MaterialRaisedButton" TargetType="ToggleButton">
<Setter Property="Padding" Value="8 0"/>
<Setter Property="Margin" Value="8 6 8 6"/>
<Setter Property="Height" Value="36"/>
<Setter Property="MinWidth" Value="64"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Background" Value="{StaticResource MaterialSecondaryColorBrush}"/>
<Setter Property="Effect" Value="{StaticResource z-depth2}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<Rectangle RadiusX="4" RadiusY="4" Fill="#000000" Opacity="0.12"/>
<Border CornerRadius="4" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource Material12Black}"/>
</Trigger>
</Style.Triggers>
</Style>
If there are any other methods of doing this, I'm all ear as well :)

In the fill of the rectangle you can specify opacity in the hex color like #00000000, the first two values are the opacity. So 12% would be #1e000000. The following will show .5 opacity rectangle when mouse is over other wise opacity is 0.
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Opacity" Value="0"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value=".5"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="false">
<Setter Property="Opacity" Value="0"/>
</Trigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>

Update:
If anybody wants to reuse the code for a material-like button, the code is below. I used the ripple effect from this stackoverflower along with the shadows from this source. Hopefully this can help others recreating Material design without the toolkit :)
<Style x:Key="MaterialRaisedButton2" TargetType="Button">
<Setter Property="Padding" Value="8 0"/>
<Setter Property="Margin" Value="8 6 8 6"/>
<Setter Property="Height" Value="36"/>
<Setter Property="MinWidth" Value="64"/>
<Setter Property="Foreground" Value="{StaticResource NormalTextBrush}"/>
<Setter Property="Background" Value="{StaticResource MaterialSecondaryColorBrush}"/>
<Setter Property="Effect" Value="{StaticResource z-depth2}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<cons:RippleEffectDecorator Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" Background="{TemplateBinding Background}" HighlightBackground="#1e000000" Grid.Row="0" Grid.Column="0" Panel.ZIndex="0">
<Grid>
<Rectangle RadiusX="4" RadiusY="4" Fill="#1e000000" Panel.ZIndex="1">
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Opacity" Value="0"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="0.12"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="false">
<Setter Property="Opacity" Value="0"/>
</Trigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</cons:RippleEffectDecorator>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" Value="#1FFFFFFF"/>
<Setter Property="Foreground" Value="#42FFFFFF"/>
</Trigger>
</Style.Triggers>
</Style>

How to resize the contents inside a button when it is resized

I am making an application in WPF in which i have several buttons and inside each button there is a grid and inside that grid there is rectangle and a text box. Now the problem i am facing is that when i resize the button the grid inside the button is not resized and stays the same i.e. the rectangle also stays the same.
I have tried putting the rectangle directly into the button(without any grid) but same results.
How do i resize the content inside the button?
Help Please!!

The content of a button is centered by default. To make it stretch, use this:
<Button VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch"
...
This setup works fine for resizing the rectangle:
<Button DockPanel.Dock="Bottom" Width="200" Height="200"
VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Rectangle Margin="5" Stroke="Black"></Rectangle>
<TextBlock Grid.Column="1" Margin="5">Button text</TextBlock>
</Grid>
</Button>
If you need to change the font size of the text box, then it would probably be easiest to wrap the grid in a ViewBox.

Do not set Button's content like this:
<Button HorizontalAlignment="Left" Margin="123,200,0,0" VerticalAlignment="Top" Width="75" Style="{DynamicResource ButtonStyle2}">
<Rectangle Fill="#FFBF8127" Stroke="Black" Height="100" Width="100"/>
</Button>
Set it's ControlTemplate instead:
<Window x:Class="WpfApplication67.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<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="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<Style x:Key="ButtonStyle1" 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">
<Grid>
<Rectangle Fill="#FFBF8127" Stroke="Black" Margin="0"/>
</Grid>
</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="{StaticResource Button.Disabled.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonStyle2" 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="{StaticResource Button.Disabled.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Content="Button" HorizontalAlignment="Left" Margin="207,46,0,0" VerticalAlignment="Top" Width="221" Style="{DynamicResource ButtonStyle1}" Height="127"/>
</Grid>
You can see the different of button's template.(sorry i can't upload pic, u can see the template in Blend)
Default: Template-border-contentPresent
Edit:Template-border-grid-rectangle

Setting HotTracking for a tab control

I am attempting to implement HotTracking for a tab control in Wpf. My understanding is this was not included in the wpf tabcontrol and I would like to use it.
For my benefit HotTracking = When mouseover an unselected tab the tab will change color(usually to something between selected and not selected)
I used a bit of my own knowledge and this post How to set MouseOver event/trigger for border in XAML? but I can't seem to make it work.
This is everything.
<Window x:Class="TestingWpF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="1024" Width="1280">
<Window.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border
Name="Border"
CornerRadius="6,6,0,0" >
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,2,12,2"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="LightBlue" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background" Value="AliceBlue" />
</Trigger>
<Trigger Property=" Border.IsMouseOver" Value="True">
<Setter Property="Border.Background" Value="Green" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TabControl Grid.ColumnSpan="2" Grid.RowSpan="2" Height="309" HorizontalAlignment="Left" Name="tabControl1" VerticalAlignment="Top" Width="781" Padding="0">
<TabItem Header="tabItem1" >
</TabItem>
<TabItem Header="tabItem2" >
</TabItem>
</TabControl>
</Grid>
</Window>

I figured it out, my problem was this section
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="LightBlue" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background" Value="AliceBlue" />
</Trigger>
<Trigger Property=" Border.IsMouseOver" Value="True">
//Change this line
//<Setter Property="Border.Background" Value="Green" />
//To This
<Setter TargetName="Border" Property="Background" Value="Green" />
</Trigger>
The last Trigger was the one not working. And if you notice I used different properties in the setter. I changesd it to match the other two and it worked

Develop Reference

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

Objects within <Menu> have their MouseOver border overridden - c#

Related

WPF round button

C# WPF - Background color out of DataGrid

WPF Material Design Raised Button Hovered state

How to resize the contents inside a button when it is resized

Setting HotTracking for a tab control

Categories

Resources