I can't attach triggers to a toggle button
In the first version, I get an error that the style is already redefined
In the second version with triggers, I get an error that property
Command - The member "Command" is not recognized or is not accessible.
This is Button
<ToggleButton
Name="ToggleButton_Record"
IsChecked="False"
Style="{StaticResource MaterialDesignActionToggleButton}"
ToolTip="Записать">
<materialDesign:PackIcon
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="OrangeRed"
Kind="Record" />
</ToggleButton>
This is 1st variant
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Style.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter Property="Command" Value="{Binding StartRecordCommand}" />
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="False">
<Setter Property="Command" Value="{Binding StopRecordCommand}" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
2nd variant with triggers
<ToggleButton.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter Property="Command" Value="{Binding StartRecordCommand}" />
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="False">
<Setter Property="Command" Value="{Binding StopRecordCommand}" />
</Trigger>
</ToggleButton.Triggers>
Yes I know that in 1st variant I just remove style in button and its starting works, but I need this style.
Use the 1st Variant. Remove the Style="{..}". and then, in the Style you defined, add the BasedOn.
<ToggleButton
Name="ToggleButton_Record"
IsChecked="False"
ToolTip="Записать">
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource MaterialDesignActionToggleButton}">
<Style.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter Property="Command" Value="{Binding StartRecordCommand}" />
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="False">
<Setter Property="Command" Value="{Binding StopRecordCommand}" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
<materialDesign:PackIcon
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="OrangeRed"
Kind="Record" />
</ToggleButton>
Related
I have "Save" button which has two states: invisible (when no changes) and visible: when some text changed.
So, I create XAML:
<Button x:Name="btnSaveText"
Grid.Column="0"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Margin="0,0,1,0" Width="22" Height="22" Padding="0"
BorderBrush="#EFF4FA"
Background="#EFF4FA" IsEnabled="False"
Style="{StaticResource stlButton}">
<Image Source="/UI.Resources;component/PNGImages/Save.png"
Style="{StaticResource stlButtonImage}" />
</Button>
<Style TargetType="{x:Type Image}" x:Key="stlButtonImage">
<Setter Property="Margin" Value="1" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Stretch" Value="None" />
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type Button}" x:Key="stlButton">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
<Setter Property="BorderBrush" Value="#EFF4FA"/>
<Setter Property="Background" Value="#EFF4FA"/>
</Trigger>
</Style.Triggers>
</Style>
But, when the button is disabled it looks like this:
How to make visible only button image?
Set the Buttons Background to Transparent :
<Setter Property="Background" Value="Transparent"/>
Full sample:
<Style TargetType="{x:Type Button}" x:Key="stlButton">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
<Setter Property="BorderBrush" Value="#EFF4FA"/>
<Setter Property="Background" Value="Transparent"/>
</Trigger>
</Style.Triggers>
</Style>
If you also want to get rid of the Border you could link it to the Background that will make it invisible, too:
<Style TargetType="{x:Type Button}" x:Key="stlButton">
<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="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
<Setter Property="Background" Value="Transparent"/>
</Trigger>
</Style.Triggers>
</Style>
I have a button that can be at one of three modes:
Normal - No mouse hover and not selected
Hover - Mouse hover and not selected
Selected - A property at the view model (DataContext) called IsSelected equals true
This is my current code:
<Style x:Key="FlatButtonStyle" TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Orange"/>
</Trigger>
<DataTrigger Binding="{Binding IsSelected}">
<Setter Property="Background" Value="Yellow"/>
</DataTrigger>
</Style.Triggers>
<Setter Property="Background" Value="Gray" />
<Setter Property="Foreground" Value="White"/>
<Setter Property="Width" Value="125"/>
<Setter Property="Height" Value="35"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderThickness="0"
Background="{TemplateBinding Background}"
CornerRadius="12">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
However, only the Hover and normal states work.
I tried data triggers, visual state manager but I'm new to WPF and couldn't make it work.
Your IsSelected Trigger Value is missing. If you want to stick with a button use
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="Background" Value="Yellow"/>
</DataTrigger>
I will recommend to use ToggleButton and Trigger on IsChecked Property
<ToggleButton IsChecked="{Binding IsSelected}" Style="{StaticResource FlatButtonStyle}"/>
<Style x:Key="FlatButtonStyle" TargetType="ToggleButton">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Orange"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="Yellow"/>
</Trigger>
</Style.Triggers>
<Setter Property="Background" Value="Gray" />
<Setter Property="Foreground" Value="White"/>
<Setter Property="Width" Value="125"/>
<Setter Property="Height" Value="35"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border BorderThickness="0"
Background="{TemplateBinding Background}"
CornerRadius="12">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Try useing Toggle Button instead of Button control. it has by default IsChecked state. Here is an exaple of how to use toggle button
http://miteshsureja.blogspot.ae/2011/12/wpf-toggle-button.html
I have the following Column in my datagrid :
<DataGridTemplateColumn CanUserReorder="False" CanUserResize="True" Header="">
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate />
</DataGridTemplateColumn.CellEditingTemplate>
<DataGridTemplateColumn.CellStyle>
<Style TargetType="DataGridCell" BasedOn="{StaticResource DatagridCellHyperlinkStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border Padding="{TemplateBinding Padding}" VerticalAlignment="Center">
<TextBlock Width="Auto" Height="Auto" TextTrimming="CharacterEllipsis">
<Hyperlink>
<InlineUIContainer TextDecorations="{Binding Path=TextDecorations, RelativeSource={RelativeSource AncestorType=TextBlock}}" Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType=TextBlock}}">
<ContentPresenter Width="Auto" Height="Auto" Content="{Binding DataContext.Value, RelativeSource={RelativeSource AncestorType=DataGridRow}}"/>
</InlineUIContainer>
<Hyperlink.Style>
<Style TargetType="Hyperlink" BasedOn="{StaticResource HyperlinkStyle}">
<EventSetter Event="Hyperlink.Click" Handler="Click" />
</Style>
</Hyperlink.Style>
</Hyperlink>
</TextBlock>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGridTemplateColumn.CellStyle>
</DataGridTemplateColumn>
The hyperlink works perfectly (with my style also) but the text trimming doesn't work. How can I change my code to make it work ?
The 2 styles attached :
<Style x:Key="DatagridCellHyperlinkStyle" TargetType="{x:Type DataGridCell}">
<Setter Property="Padding" Value="5" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="FontSize" Value="14" />
<Setter Property="FontFamily" Value="Helvetica" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Foreground" Value="{StaticResource CouleurBouton}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource ResourceKey=CouleurBouton}"/>
<Setter Property="Foreground" Value="{StaticResource ResourceKey=CouleurFond}" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{StaticResource ResourceKey=CouleurBouton}"/>
<Setter Property="Foreground" Value="{StaticResource ResourceKey=CouleurFond}" />
</Trigger>
<DataTrigger Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}}" Value="True">
<Setter Property="Background" Value="{StaticResource ResourceKey=CouleurBoutonHover}"/>
<Setter Property="Foreground" Value="{StaticResource ResourceKey=CouleurTexteBoutonHover}" />
</DataTrigger>
</Style.Triggers>
</Style>
<Style x:Key="HyperlinkStyle" TargetType="{x:Type Hyperlink}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="{DynamicResource CouleurBoutonPressed}" />
</Trigger>
</Style.Triggers>
<Setter Property="Foreground" Value="{DynamicResource CouleurBouton}" />
<Setter Property="TextBlock.TextDecorations" Value="{x:Null}" />
</Style>
Thank you !
You have nothing that will restrict the TextBlock.Width, so the text in it will never wrap, or be trimmed. To fix this problem, you just need to set some kind of Width restriction on it... you could try something like this:
<ControlTemplate>
<Border Padding="{TemplateBinding Padding}" VerticalAlignment="Center">
<TextBlock MaxWidth="250" TextTrimming="CharacterEllipsis">
...
Well, for WPF engine to understand that the trimming is needed it should see that the control cannot be put into the space available. If the control can be resized(AutoSize) it will just increase its dimensions without any trimming.
From MSDN:
Gets or sets the text trimming behavior to employ when content
overflows the content area.
And I can't see anything in your template that suggests that the space limit will be encountered.
So try to set width limit, either on Column, or on the TextBlock. Or restrict the resize in some other way.
<TextBlock Width="Auto" Height="Auto"
MaxWidth="100"
MinWidth="30"
TextTrimming="CharacterEllipsis">
on my resource i got
<ControlTemplate TargetType="Label" x:Key="GraphicalCheckBox">
<Label Name="TickImage"/>
<ControlTemplate.Triggers>
<Trigger Property="Tag" Value="True">
<Setter TargetName="TickImage" Property="Background" Value="{DynamicResource ContractApprovedGreen}" />
</Trigger>
<Trigger Property="Tag" Value="False">
<Setter TargetName="TickImage" Property="Background" Value="{DynamicResource Close}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
on my view i got
<Label x:Name="COC" Template="{StaticResource GraphicalCheckBox}" Tag="{Binding Bill20IsValid}" Width="100" Height="100" Background="Gray" />
when I change Bill20IsValid to True then TextBox changes to True but the label isn't updated to ContractApprovedGreen ,ContractApprovedGreen works fine on other code places, and I am SURE this code worked a few month ago.
why my GraphicalCheckBox templete wouln't work?
I don't know why Trigger doesn't work, but DataTrigger works for me:
<DataTrigger Binding="{Binding Tag, RelativeSource={RelativeSource Self}}" Value="True">
<Setter TargetName="TickImage" Property="Background" Value="Green" />
</DataTrigger>
I have a style which underlines the textblock when it is mouseovered... How ever i need when it is clicked to change its font weight to bold(selected)..
any idea?
Code example of what dnr3 said, a templated ToggleButton
<Style x:Key="BoldWhenClickedTextBlock" TargetType="ToggleButton" BasedOn="{StaticResource {x:Type ToggleButton}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<TextBlock x:Name="c_toggleButtonTextBlock" Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}, Path=Content}"/>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsMouseOver" Value="True">
<Setter TargetName="c_toggleButtonTextBlock" Property="TextDecorations" Value="Underline"/>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter TargetName="c_toggleButtonTextBlock" Property="FontWeight" Value="Bold" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And then the "TextBlock" ToggleButton can use this with
<ToggleButton Style="{StaticResource BoldWhenClickedTextBlock}" Content="My Text.."/>