I have the following style applied to a Button (enabled by default):
<Style x:Key="DisableFoxProCancelButton"
TargetType="{x:Type Button}"
BasedOn="{StaticResource ButtonStyle}">
<Setter Property="IsEnabled" Value="True" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=FoxProTableIsDirty}" Value="false">
<Setter Property="IsEnabled" Value="False" />
</DataTrigger>
</Style.Triggers>
</Style>
This works to disable the button when FoxProTableIsDirty is False.
I originally had this wired up as follows (disabled by default):
<Style x:Key="DisableFoxProCancelButton"
TargetType="{x:Type Button}"
BasedOn="{StaticResource ButtonStyle}">
<Setter Property="IsEnabled" Value="False" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=FoxProTableIsDirty}" Value="true">
<Setter Property="IsEnabled" Value="True" />
</DataTrigger>
</Style.Triggers>
</Style>
But this second way did not work to disable the button when FoxProTableIsDirty is False.
The second style seemed to make more sense when I was writing the style as by default the button should be disabled until a change is made to the associated table and the changes need to be saved.
Can someone explain why the second one would not work as expected?
EDIT
Here is the code for the button using this style:
<Button Name="CancelFoxproChanges"
Content="Cancel"
Style="{StaticResource DisableFoxProCancelButton}"
DockPanel.Dock="Right"
HorizontalAlignment="Right">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:CallMethodAction TargetObject="{Binding}"
MethodName="FoxProCancelButtonClicked" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
check if there is IsEnabled set in the Button element.
remove if it is set as triggers can not override local or inline values.
<Button Style="{StaticResource DisableFoxProCancelButton}" IsEnabled="False" />
in other way you can directly bind FoxProTableIsDirty to Button's IsEnabled, eg
<Button IsEnabled="{Binding FoxProTableIsDirty}" />
or via style setters
<Setter Property="IsEnabled" Value="{Binding FoxProTableIsDirty}" />
so as long as FoxProTableIsDirty is being resolved and notifying changes, this will enable/disable the button as desired
Related
With the Import button, I used :
<Button Command="{Binding ImportCommand}"
Content="Import"
Margin="5"
Width="100"></Button>
I disable Cap Nhat button if in Ma nhan su textbox and Ho Ten textbox was false. I used :
<Button Command="{Binding EditCommand}"
Content="Cập nhật"
Margin="5"
Width="100">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=(Validation.HasError), ElementName=Text1}"
Value="True">
<Setter Property="IsEnabled"
Value="False"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Everything worked OK!, but in UI Cap nhat button was changed, I want to change UI Cap nhat button like Import button.
Thank all for your help
Try to base the style on the style that is applied to the "Import" button:
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
Or set the IsHitTestVisible property instead of IsEnabled:
<DataTrigger Binding="{Binding Path=(Validation.HasError), ElementName=Text1}" Value="True">
<Setter Property="IsHitTestVisible" Value="False" />
</DataTrigger>
I'm new with WPF and I have a problem. I want to enable a button only if en element of a Listbox is selected, otherwise it has to be disabled. I've tried with simple Validation Rule but it doesn't worked. Can anyone give me a hint? Ty
You don't use a ValidationRule to enable a Button but you could use a Button style with a trigger that binds to the SelectedItem property of the ListBox and sets the IsEnabled property of the Button to false if the SelectedItem property of the ListBox returns a null reference, e.g.:
<ListBox x:Name="lb">
<ListBoxItem>1</ListBoxItem>
<ListBoxItem>2</ListBoxItem>
<ListBoxItem>3</ListBoxItem>
</ListBox>
<Button Content="Button">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<DataTrigger Binding="{Binding SelectedItem, ElementName=lb}" Value="{x:Null}">
<Setter Property="IsEnabled" Value="False" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Ok, this works well ty. But I've to enable the button when 2 conditions are satisfied (a textbox not empty and an item of the listbox selected). How can i do this?
You could add another trigger:
<ListBox x:Name="lb">
<ListBoxItem>1</ListBoxItem>
<ListBoxItem>2</ListBoxItem>
<ListBoxItem>3</ListBoxItem>
</ListBox>
<TextBox x:Name="txt" />
<Button Content="Button">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<DataTrigger Binding="{Binding SelectedItem, ElementName=lb}" Value="{x:Null}">
<Setter Property="IsEnabled" Value="False" />
</DataTrigger>
<DataTrigger Binding="{Binding Text.Length, ElementName=txt}" Value="0">
<Setter Property="IsEnabled" Value="False" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
I have two buttons with commands bound to them.
If the user hovers over a button1 it should highlight (border color changes)
textbox1 and combobox1 only when the button1 is in disabled state.
If the user hovers over a button2 it should highlight (border color changes)
textbox2, textbo3 and combobox1 only when the button2 is in disabled state.
And finally unhighlight the controls on mouseleave.
Is this possible with pure XAML, because the style should be applied to other controls, not to the button itself who triggers the event and only when conditions are met?
And how could this be done?
I found many examples on SO, but they do not apply to this specific case.
I started to do this programmatically:
<Button Name="btnGenerateHash"
IsEnabled="{Binding VM.IsGenerateButtonEnabled}"
Command="{Binding GenerateCommand}"
Content="{Binding VM.GenerateHashButtonLabel}" Width="160"
Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Margin="10" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<i:InvokeCommandAction Command="{Binding HighlightFieldsCommand}" CommandParameter="{Binding Source='generate,enter'}"></i:InvokeCommandAction>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<i:InvokeCommandAction Command="{Binding HighlightFieldsCommand}" CommandParameter="{Binding Source='generate,leave'}"></i:InvokeCommandAction>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
Modified version:
<StackPanel Orientation="Vertical">
<CheckBox
x:Name="EnableButton1CheckBox"
Content="Enable Button1"
Margin="4"
/>
<Grid Margin="4">
<Button Click="button1_Click"
Content="Button1"
x:Name="button1"
IsEnabled="{Binding IsChecked, ElementName=EnableButton1CheckBox}">
</Button>
<Border
x:Name="Button1MouseDetector"
Background="Transparent"
>
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Tag" Value="MouseOver" />
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
<!--
When button1 is disabled, it can't receive mouse events, so we create a
coextensive control that's explicitly transparent. If it merely had no
background specified, it wouldn't get mouse events either.
-->
</Grid>
<Grid Margin="4">
<Button
Content="Button2"
x:Name="button2"
IsEnabled="{Binding IsChecked, ElementName=EnableButton1CheckBox}">
</Button>
<Border
x:Name="Button2MouseDetector"
Background="Transparent"
>
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Tag" Value="MouseOver" />
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
<!--
When button1 is disabled, it can't receive mouse events, so we create a
coextensive control that's explicitly transparent. If it merely had no
background specified, it wouldn't get mouse events either.
-->
</Grid>
<TextBox
Text="tb1"
x:Name="tb1"
Margin="4"
>
<TextBox.Style>
<Style TargetType="TextBox" BasedOn="{StaticResource {x:Type TextBox}}">
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition
Binding="{Binding Tag, ElementName=Button1MouseDetector}"
Value="MouseOver"
/>
<Condition
Binding="{Binding IsEnabled, ElementName=button1}"
Value="False"
/>
</MultiDataTrigger.Conditions>
<Setter Property="BorderBrush" Value="Red" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition
Binding="{Binding Tag, ElementName=Button2MouseDetector}"
Value="MouseOver"
/>
<Condition
Binding="{Binding IsEnabled, ElementName=button2}"
Value="False"
/>
</MultiDataTrigger.Conditions>
<Setter Property="BorderBrush" Value="Green" />
</MultiDataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
</StackPanel>
This is partial, but illustrates how to
Expose mouseover state of a possibly disabled control to XAML style triggers on other controls, and
How those other XAML triggers can do stuff only when two different conditions are both true.
XAML:
<StackPanel Orientation="Vertical">
<CheckBox
x:Name="EnableButton1CheckBox"
Content="Enable Button1"
Margin="4"
/>
<Grid
Margin="4"
>
<Button
Content="Button1"
x:Name="button1"
IsEnabled="{Binding IsChecked, ElementName=EnableButton1CheckBox}"
>
</Button>
<!--
When button1 is disabled, it can't receive mouse events, so we create a
coextensive control that's explicitly transparent. If it merely had no
background specified, it wouldn't get mouse events either.
-->
<Border
x:Name="Button1MouseDetector"
Background="Transparent"
>
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Tag" Value="MouseOver" />
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
</Grid>
<Button
Content="Button2"
x:Name="button2"
Margin="4"
>
<Button.Style>
<Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition
Binding="{Binding Tag, ElementName=Button1MouseDetector}"
Value="MouseOver"
/>
<Condition
Binding="{Binding IsEnabled, ElementName=button1}"
Value="False"
/>
</MultiDataTrigger.Conditions>
<Setter Property="BorderBrush" Value="Red" />
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</StackPanel>
I have a button where is enabled property should happen twice. In the viewmodel if the IsEnabled property is set to false the button should be disabled which works fine. On the other hand when the Validate button in the UI is disabled, this button should also be disabled that is not working which indicates that the Data Trigger is not working. Please help.
<Button x:Name="BtnValidate" Content="Validate" Height="24" VerticalAlignment="Top" Grid.Column="2" Width="83" Command="{Binding ValidateCommand}" IsEnabled="{Binding IsValidateEnabled}" HorizontalAlignment="Left" Margin="8,28,0,0" />
<Button Name="BtnReload" IsEnabled="{Binding IsEnabled}" HorizontalAlignment="Left" Width="123" Grid.Row="0" Grid.Column="5" Content="Reload" Command="{Binding DateCommand}" Margin="8,24,0,32">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=BtnValidate,Path=IsEnabled}" Value="False">
<Setter Property="IsEnabled" Value="False"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Properites set in the <Tag> of the object take precendence over any property set in a <Style>, so in your case the IsEnabled="{Binding IsEnabled}" is always going to be used. See MSDN's Dependency Property Precedence List for more information.
The solution would be to move the IsEnabled property out of the tag definition and into the style, since properties set in a Trigger take precedence over properties set in the <Style>
<Button Name="BtnReload" Content="Reload" Command="{Binding DateCommand}">
<Button.Style>
<Style TargetType="Button">
<Setter Property="IsEnabled" Value="{Binding IsEnabled}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=BtnValidate,Path=IsEnabled}" Value="False">
<Setter Property="IsEnabled" Value="False"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Im coming from a C# winforms background and I would normally do all this in code.
I have several Labels that I'm using as a menu.
When the mouse hovers over them the text changes color by:
<Page.Resources>
<SolidColorBrush x:Key="normalColor" Color="White" />
<SolidColorBrush x:Key="mouseOverColor" Color="Gold" />
<Style TargetType="Label" x:Key="menuItemStyle">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Foreground" Value="{StaticResource normalColor}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="{StaticResource mouseOverColor}"/>
</Trigger>
</Style.Triggers>
</Style>
</Page.Resources>
<Label x:Name="Label_Video1" Style="{StaticResource menuItemStyle}" Content="1.Video 1." FontSize="16" HorizontalAlignment="Left" Margin="25,74,0,0" VerticalAlignment="Top" MouseLeftButtonDown="Label_Video1_MouseLeftButtonDown" />
<Label x:Name="Label_Video2" Style="{StaticResource menuItemStyle}" Content="2. Video 2." FontSize="16" HorizontalAlignment="Left" Margin="25,105,0,0" VerticalAlignment="Top" MouseDown="Label_Video2_MouseDown"/>
When the user clicks a label I want it to stay a certin color (In this case Gold) and all the others to stay their normal colour. So if a label has been previously clicked and I click another label it will go from gold to white etc
When using WPF, you have to think slightly differently. We know that the Label control doesn't know when it has been clicked and it especially doesn't know when another Label element has been clicked... but some controls do. Thinking about it... a RadioButton has exactly this behaviour. Now this is where WPF really shines.
We can use RadioButtons and by providing them with a new ControlTemplate, we can make them look like plain text:
<Grid Background="Black">
<Grid.Resources>
<Style TargetType="{x:Type RadioButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<TextBlock Text="{TemplateBinding Content}">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="White" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource AncestorType={
x:Type RadioButton}}}" Value="True">
<Setter Property="Foreground" Value="Gold" />
</DataTrigger>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource
AncestorType={x:Type RadioButton}}}" Value="True">
<Setter Property="Foreground" Value="Gold" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<StackPanel Margin="5" Background="{x:Null}">
<RadioButton Content="1.Video 1." />
<RadioButton Content="2.Video 2." />
<RadioButton Content="3.Video 3." />
</StackPanel>
</Grid>
If you don't want the RadioButtons to be all together in a StackPanel, then you can use give them the same GroupName property value to ensure that they still operate as one group.