I want to know how to change the WrapPanel orientation property by triggers.
I use trigger to change the wrap panel orientation property, but it doesn't work.
<WrapPanel Orientation="Horizontal">
<WrapPanel.Style>
<Style TargetType="WrapPanel">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="Red"/>
<Setter Property="Orientation" Value="Vertical"/>
</Trigger>
</Style.Triggers>
</Style>
</WrapPanel.Style>
<Button Content="button1" Margin="10"/>
<Button Content="button2" Margin="10"/>
</WrapPanel>
I expect the button to be Vertical and the background to be Red, but the result is Horizontal button and Red background. Background is changed right, but orientation is not changed.
set default Orientation value via Style Setter. Orientation="Horizontal" is a local value, which cannot be reset by Style Trigger
<WrapPanel>
<WrapPanel.Style>
<Style TargetType="WrapPanel">
<Setter Property="Orientation" Value="Horizontal"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="Red"/>
<Setter Property="Orientation" Value="Vertical"/>
</Trigger>
</Style.Triggers>
</Style>
</WrapPanel.Style>
<Button Content="button1" Margin="10"/>
<Button Content="button2" Margin="10"/>
</WrapPanel>
Related
As the title suggests, I'm looking for a trigger property that triggers when the left mouse button is clicked over the button. Problem being my button has a rectangle as it's control template and I'd like to change the fill/stroke when the button/rectangle is clicked.
The only trigger property I can find that works is "IsMouseOver"
Anything like MouseDown or IsPressed doesn't work.
My xaml right now:
<Button x:Name="my_Button" Click="my_Button_Click" Margin="268,91,-266,-94">
<Button.Template>
<ControlTemplate>
<Rectangle HorizontalAlignment="Left" Height="20" Stroke="Black" VerticalAlignment="Top" Width="141" Margin="105,10,0,0" StrokeThickness="2">
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Fill" Value="Blue" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" Value="Red"/>
<Setter Property="Stroke" Value="Black"/>
</Trigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</ControlTemplate>
</Button.Template>
</Button>
Where the Trigger Property "IsMouseOver" is I would like the property to be MouseDown, and then proceeding to set the fill and stroke of the rectangle to different colors.
xaml I've tried that hasn't worked:
<Trigger Property="MouseDown" Value="True">
<Setter Property="Fill" Value="Red"/>
<Setter Property="Stroke" Value="Black"/>
</Trigger>
Edit: I would like to clarify that IsMouseOver works perfectly with the trigger property, but I need it to be when the mouse is clicked on the button rather than hovered over.
See the DataTrigger below :
<Button x:Name="my_Button" Click="my_Button_Click" Margin="268,91,-266,-94">
<Button.Template>
<ControlTemplate>
<Rectangle HorizontalAlignment="Left" Height="20" Stroke="Black" VerticalAlignment="Top" Width="141" Margin="105,10,0,0" StrokeThickness="2">
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Fill" Value="Blue" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsPressed, RelativeSource={RelativeSource Mode=TemplatedParent}}" Value="True">
<Setter Property="Fill" Value="Red"/>
<Setter Property="Stroke" Value="Black"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</ControlTemplate>
</Button.Template>
</Button>
I have this textblock with default foreground color is white
<TextBlock Text="First Cmd" Grid.Row="0" TextAlignment="Center" Margin="4" TextWrapping="Wrap" Foreground="White" Style="{DynamicResource ABC}">
<TextBlock.InputBindings>
<MouseBinding Command="{Binding AAA}" MouseAction="LeftClick" />
</TextBlock.InputBindings>
</TextBlock>
When the mouse is over the textblock, the forground color must change in black, but this Style doesn't work. Why ?
<Style x:Key="ABC" TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property ="IsMouseOver" Value="True">
<Setter Property= "Foreground" Value="Black">
</Trigger>
</Style.Triggers>
</Style>
You set the Foreground for TextBlock locally, so the Trigger setter cannot override that. You need to use a Style setter to set the initial Foreground:
<Style x:Key="ABC" TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="White"/>
<Style.Triggers>
<Trigger Property ="IsMouseOver" Value="True">
<Setter Property= "Foreground" Value="Black">
</Trigger>
</Style.Triggers>
</Style>
The Foreground="White" should be removed from the <TextBlock ....
Understand more about Dependency Property Value Precedence.
I have a custom control that holds two Rectangles and several TextBoxes. I wish to change the background color of the Rectangle on MouseOver.
I add trigger as following:
<Rectangle
Grid.Column="1"
Fill="#FF383838"
Grid.ColumnSpan="3"
Margin="0,4,4,4">
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Fill" Value="#FF383838" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" Value="#FF575757" />
</Trigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
But since rectangle is part of my control, I assume the event is not firing.
Setting a property via XAML will be applied over the style properties that you try to set. To fix this, remove Fill=#FF383838 so you should have:
<Rectangle Grid.Column="1"
Grid.ColumnSpan="3"
Margin="0,4,4,4">
//... rest of code here
Try this code:
<Window.Resources>
<Style TargetType="Rectangle" x:Key="test">
<Setter Property="Fill" Value="#FF383838" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" Value="#FF575757" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Rectangle Style="{StaticResource test}" />
I am developing a WPF project. I want to remove highlight (it is like blue in picture) on button if isMouseHover of Button is true. And I am not sure it is called highlight. Maybe it is probably effect, focus etc.. I added BorderBrush is transparent but it didn't work. The code is as follows:
<Image x:Key="LoginImg" Source="..\Images\Login\oturumac.png"
Stretch="Fill"/>
<Image x:Key="LoginImg_RollOver" Source="..\Images\Login\oturumac_rollover.png"
Stretch="Fill"/>
<Style x:Key="LoginButtonStyle" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Content" Value="{DynamicResource LoginImg_RollOver}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Content" Value="{DynamicResource LoginImg}"/>
</Trigger>
</Style.Triggers>
</Style>
Picture is as follows. First picture when IsMouseOver is true:
How can I solve?
Button code is as follows:
<Button Background="Transparent" BorderBrush="Transparent" Style="{DynamicResource LoginButtonStyle}" Click="btnLogin_Click" HorizontalAlignment="Center" VerticalAlignment="Top" Width="180" Grid.Column="1" Grid.Row="4" x:Name="btnLogin" TabIndex="2"/>
You'll need to provide a new ControlTemplate for the Button to get rid of the default look and feel. You can just replace the default Button ControlTemplate with a plain Image control and replace your Style Triggers with ControlTemplate Triggers. Try this:
<Button>
<Button.Template>
<ControlTemplate>
<Image Name="Image" Stretch="None"
Source="pack://application:,,,/AppName;component/Images/Login/oturumac.png" />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Image" Property="Source" Value="
pack://application:,,,/AppName;component/Images/Login/oturumac_rollover.png" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
Suppose I have a button nested in the Template of a ListBoxItem, can I set the IsMouseOver property of the button to true, so that it looks like its moused over?
Just for illustration, the notifications on the top of the window are what I am referring to. Its basically ListBoxItem's with a TextBlock and Button
Unfortunately, no. "IsMouseOver" is readonly.
I'm assuming, though, that you have a custom control template for the Button, right? If that's the case, one workaround is to mess with the Tag property of the button. Add a trigger to the ControlTemplate that gets fired when a specific Tag value is set. Then, in the DataTemplate for your ListBoxItems, just set the button's Tag to that specific value when IsMouseOver on the item is true. Below is an example:
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel x:Name="dp" Background="Transparent">
<Button x:Name="btn" DockPanel.Dock="Right" Content="x" Background="Gainsboro">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border x:Name="bd" Padding="2" BorderBrush="Black" BorderThickness="1"
Background="WhiteSmoke">
<ContentPresenter/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="bd" Property="Background" Value="LightBlue"/>
</Trigger>
<Trigger Property="Tag" Value="SimulatedMouseOver">
<Setter TargetName="bd" Property="Background" Value="LightBlue"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="bd" Property="Background" Value="Gray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<TextBlock Text="{Binding}"/>
</DockPanel>
<DataTemplate.Triggers>
<Trigger SourceName="dp" Property="IsMouseOver" Value="True">
<Setter TargetName="btn" Property="Tag" Value="SimulatedMouseOver"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListBox.ItemTemplate>
<s:String>Item1</s:String>
<s:String>Item2</s:String>
<s:String>Item3</s:String>
</ListBox>