I have some problem while changing background color of Button using datatrigger but it is not happen.
My code is this
<Window x:Class="DataBinding.DataTrigger2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="DataTrigger2" Height="300" Width="300">
<Button Height="50" Name="btn">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Control.Background" Value="YellowGreen"></Setter>
<Setter Property="Control.Foreground" Value="Brown"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=btn, Path=IsPressed}" Value="True">
<Setter Property="Control.Background" Value="Purple"></Setter>
<Setter Property="Control.Foreground" Value="Red"></Setter>
<Setter Property="Control.FontSize" Value="20"></Setter>
<Setter Property="Control.FontWeight" Value="Light"></Setter>
<Setter Property="Control.Width" Value="150"></Setter>
<Setter Property="Control.Height" Value="50"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
<Button.Content>
The Gaming World Inc.
</Button.Content>
</Button>
The reason why you don't see the Button.Background colour change when you click the mouse is because of the default ControlTemplate that defines what the it should look like in different states, eg. pressed, disabled. etc. These are defined in the VisualStateManager.VisualStateGroups section of the ControlTemplate and they potentially override your Background changes.
As simple proof of this, we can provide a basic ControlTemplate for the Button without the VisualStateManager.VisualStateGroups section and then you will see your Background colour change. Try this:
<Button Height="50" Name="btn">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Control.Background" Value="YellowGreen"></Setter>
<Setter Property="Control.Foreground" Value="Brown"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=btn, Path=IsPressed}" Value="True">
<Setter Property="Control.Background" Value="Purple"></Setter>
<Setter Property="Control.Foreground" Value="Red"></Setter>
<Setter Property="Control.FontSize" Value="20"></Setter>
<Setter Property="Control.FontWeight" Value="Light"></Setter>
<Setter Property="Control.Width" Value="150"></Setter>
<Setter Property="Control.Height" Value="50"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
<Button.Content>
The Gaming World Inc.
</Button.Content>
</Button>
You can find the original/default ControlTemplate for the Button control in the Button Styles and Templates page on MSDN... you may want to copy more of that ControlTemplate into your one to make your Button look more like the original one.
Related
I have a style for my textblocks, and a style for my radio button.
When I add my radio buttons, they ignore the style for my foreground. The textblock style seems to have precedence and I can't get it the way I want it.
<Style TargetType="TextBlock" BasedOn="{StaticResource {x:Type TextBlock}}">
<Setter Property="FontFamily" Value="Daytona Light"/>
<Setter Property="FontSize" Value="22"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="Foreground" Value="White"/>
</Style>
<Style x:Key="Radio" TargetType="RadioButton" BasedOn="{StaticResource {x:Type ToggleButton}}">
<Setter Property="Foreground" Value="#1a3281"/>
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="#1a3281" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I create my radio buttons in a stack panel
<StackPanel Grid.Column="1" Orientation="Horizontal">
<StackPanel.Resources>
<Style TargetType="RadioButton" BasedOn="{StaticResource Radio}">
<Setter Property="Margin" Value="50, 0, 0, 20"/>
<Setter Property="Width" Value="250"/>
<Setter Property="Height" Value="60"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
</StackPanel.Resources>
<RadioButton GroupName="MainSelection" Command="{Binding ShowVideoCommand}" Content="Video">
</RadioButton>
<RadioButton GroupName="MainSelection" Command="{Binding ShowPresentationCommand}" Content="Presentation">
</RadioButton>
<RadioButton GroupName="MainSelection" Command="{Binding ShowSimulatorCommand}" Content="Simulator">
</RadioButton>
</StackPanel>
When I run my app, I see the radio buttons as full white rectangles. When the RadioButton is checked, the style for the background works fine (becomes blue, with text still white).
What am I doing wrong for my foreground style? Why is the textblock style always wins over my radio button style?
Even when I set Foreground="Red" in my RadioButton as follows
<RadioButton Foreground="Red" GroupName="MainSelection" Command="{Binding ShowVideoCommand}" Content="Video">
it won't show up. Text is always white.
I'm trying to set up a trigger that removes the padding on the listview when the scrollbar is hidden.
I put the trigger on the listview style but I'm getting inconsistent results. For example the background property in the trigger is always active no matter what the scrollbar visibility is.
I've taken a look at the MSDN for the ScrollViewer.ComputedVerticalScrollBarVisibility Property but am not having much luck figuring out what's wrong.
<ListView Grid.Row="1" Grid.Column="1" BorderBrush="{x:Null}" BorderThickness="0" ItemsSource="{Binding Tasks}" Margin="5"
ScrollViewer.CanContentScroll="False" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<!-- SNIP -->
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Style>
<Style>
<Setter Property="ListView.Padding" Value="0,0,5,0"/>
<Setter Property="ListView.Background" Value="{x:Null}" />
<Style.Triggers>
<Trigger Property="ScrollViewer.ComputedVerticalScrollBarVisibility" Value="Hidden">
<Setter Property="ListView.Padding" Value="0"/>
<Setter Property="ListView.Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.Style>
</ListView>
I write an ListView style example which worked for me. I tried it.
<Style TargetType="ListView">
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<ScrollViewer>
<ScrollViewer.Style>
<Style TargetType="ScrollViewer">
<Style.Triggers>
<Trigger Property="ComputedVerticalScrollBarVisibility" Value="Visible">
<Setter Property="Padding" Value="100"/>
</Trigger>
<Trigger Property="ComputedVerticalScrollBarVisibility" Value="Collapsed">
<Setter Property="Padding" Value="10"/>
</Trigger>
</Style.Triggers>
</Style>
</ScrollViewer.Style>
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am trying to achieve my save button to reusable button and original button style is like this=>
<Button Margin="5"
Padding="0"
Width="98"
Cursor="Hand"
x:Name="btnSave"
Click="btnSave_Click">
<StackPanel Orientation="Horizontal" Height="25" Width="90">
<Image Source="\Image\Other\Save.ico" Width="20" Margin="3 0"></Image>
<TextBlock VerticalAlignment="Center" Margin="15 0">Save</TextBlock>
</StackPanel>
</Button>
Just text and image. So I just want to use this button as a reusable button. So I move this button to App.xaml Like this=>
<Style TargetType="Button" x:Key="SaveButton" BasedOn="{StaticResource MetroButton}">
<Setter Property="Margin" Value="5"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Width" Value="98"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="FontSize" Value="12"/>
<Style.Resources>
<Style TargetType="StackPanel">
<Setter Property="Orientation" Value="Horizontal"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Width" Value="90"/>
<Setter Property="Background" Value="Red"/>
<Style.Resources>
<Style TargetType="Image">
<Setter Property="Source" Value="/Image/Other/Save.ico"/>
<Setter Property="Width" Value="20"/>
<Setter Property="Margin" Value="3 0"/>
</Style>
<Style TargetType="TextBlock">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="15 0"/>
<Setter Property="Text" Value="Save"/>
</Style>
</Style.Resources>
</Style>
</Style.Resources>
</Style>
But after moving that, This button is not working anymore. Please let me know why this one is not working.
You said you wanted to reuse styles, so you shouldn't nest them. The right thing to do is:
<Style x:Key="SaveButton" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel Orientation="Horizontal" Height="25" Width="90" Background="Red">
<Image/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You need to define the StackPanel somewhere and set the Button's Content property to it. You may define the StackPanel as a non-shared resource next to the Style in App.xaml like this:
<StackPanel x:Key="sp" x:Shared="False" Orientation="Horizontal" Height="25" Width="90">
<Image Source="screen.png" Width="20" Margin="3 0"></Image>
<TextBlock VerticalAlignment="Center" Margin="15 0">Save</TextBlock>
</StackPanel>
<Style TargetType="Button" x:Key="SaveButton">
<Style.Resources>
</Style.Resources>
<Setter Property="Margin" Value="5"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Width" Value="98"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="Content" Value="{StaticResource sp}" />
</Style>
I am struggling to find a solution to this. Every other one i;ve tried is not working. Maybe I am missing something.
I want to change the background color of a Button when I hover over it with the mouse.
This is my XAML:
<Window x:Class="Recruitment_Manager.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="374" Width="940">
<Window.Resources>
<Style TargetType="Button" x:Key="NavigationButtonStyle">
<Setter Property="Height" Value="35"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Green"/>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="StackPanel" x:Key="NavigationButtonContentStyle">
<Setter Property="Orientation" Value="Horizontal"/>
</Style>
<Style TargetType="Image" x:Key="NavigationButtonImageStyle">
<Setter Property="Width" Value="35"/>
</Style>
<Style TargetType="Label" x:Key="NavigationButtonLabelStyle">
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="15"/>
</Style>
</Window.Resources>
<Grid>
<StackPanel HorizontalAlignment="Left" Width="200">
<StackPanel.Background>
<SolidColorBrush Color="#404040"/>
</StackPanel.Background>
<Button Style="{StaticResource ResourceKey=NavigationButtonStyle}">
<StackPanel Style="{StaticResource ResourceKey=NavigationButtonContentStyle}">
<Image Style="{StaticResource ResourceKey=NavigationButtonImageStyle}">
</Image>
<Label Style="{StaticResource ResourceKey=NavigationButtonLabelStyle}">
Settings
</Label>
</StackPanel>
</Button>
</StackPanel>
</Grid>
But it looks like the trigger never executes?
What am I missing or how can I get what I want?
Thank you in advance.
To remove the default MouseOver behaviour on the Button you will need to modify the ControlTemplate. Changing your Style definition to the following should do the trick:
<Style TargetType="{x:Type Button}" x:Key="NavigationButtonStyle">
<Setter Property="Height" Value="35"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Green"/>
</Trigger>
</Style.Triggers>
</Style>
Try following code
<Style TargetType="Button" x:Key="NavigationButtonStyle">
...
<Trigger Property="Control.IsMouseOver" Value="True">
<Setter Property="Background" Value="Green"/>
</Trigger>
</Style>
When the user enters info I want all the controls to look and act the same way, as a result I have done the following.
The label and textbox controls are in a stackpanel as:
<StackPanel Style="{StaticResource ResourceKey=myInput}" HorizontalAlignment="Left">
<Label Content="Label" Name="label1" />
<TextBox Name="textBox1" ></TextBox>
</StackPanel>
the style "myInput" is:
<Style x:Key="myInput" TargetType="{x:Type StackPanel}">
<Style.Resources>
<Style TargetType="{x:Type Label}" BasedOn="{StaticResource {x:Type Label}}">
<Setter Property="FontSize" Value="12" />
</Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Margin" Value="5,-5,2,2"></Setter>
<Setter Property="Height" Value="23"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Style.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter Property="Background" Value="Blue" >
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Style.Resources>
</Style>
Now every time that I apply that style to a stackpanel that has a label and a textbox the background of the textbox changes to blue when it receives focus.
How could I set the label's fontweight to bold also when that event fires? I will like to do this with xaml.
Use a DataTrigger on your Label which looks to see if the keyboard focus is inside of the parent StackPanel that contains both objects
<Style TargetType="{x:Type Label}" BasedOn="{StaticResource {x:Type Label}}">
<Setter Property="FontSize" Value="12" />
<Style.Triggers>
<DataTrigger Value="True" Binding="{Binding IsKeyboardFocusWithin,
RelativeSource={RelativeSource AncestorType={x:Type StackPanel}}}">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>