I seem to be having a hard time today. All I want to do is make a TextBox hidden of visible based on a bool value databound to the Window its hosted in.
What I have just won't compile and I don't understand why. Please help.
<TextBlock Grid.Column="2" Text="This order will be sent to accounting for approval"
Foreground="Red" VerticalAlignment="Center" FontWeight="Bold" Padding="5">
<TextBlock.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=AllowedToSubmit}" Value="True">
<Setter Property="Visibility" Value="Hidden" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
You need to set the Style.TargetType in order for it to recognize the Visibility property:
<TextBlock Grid.Column="2" VerticalAlignment="Center" FontWeight="Bold" Foreground="Red" Padding="5" Text="This order will be sent to accounting for approval">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=AllowedToSubmit}" Value="True">
<Setter Property="Visibility" Value="Hidden"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
Your binding path to AllowedToSubmit probably needs to have ElementName set to the Window's name, as well.
Another option is to bind TextBlock.Visibility directly to the property:
<Window>
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BoolToVisibility" />
</Window.Resources>
<TextBlock Visibility="{Binding Path=AllowedToSubmit, Converter={StaticResource BoolToVisibility}}" />
</Window>
If you want it to work like in your sample, where true hides the TextBlock, then you can write your own converter to convert opposite of the built-in BooleanToVisibilityConverter.
Related
On my Grid I Have TextBlock and Button.
If Button is not visible I want my TextBlock.HorizontalAlignment to be set to Center.
If Button is visible I want my TextBlock.HorizontalAlignment to be set to Right. Here is my code:
<TextBlock Grid.Row="0" VerticalAlignment="Center" Name="myTextBlock" Text="{Binding TileTextId}" TextWrapping="Wrap" TextAlignment="Center" >
<TextBlock.Triggers>
<DataTrigger Binding="{Binding ElementName=myButton, Path=IsVisible}" Value="True">
<Setter Property="HorizontalAlignment" Value="Right" />
</DataTrigger>
</TextBlock.Triggers>
</TextBlock>
I get the error:
'HorizontalAlignment' member is not valid because it does not have a qualifying type name.
So I tried to add TextBlock.HorizontalAlignment, like this:
<TextBlock Grid.Row="0" VerticalAlignment="Center" Name="myTextBlock" Text="{Binding TileTextId}" TextWrapping="Wrap" TextAlignment="Center" >
<TextBlock.Triggers>
<DataTrigger Binding="{Binding ElementName=myButton, Path=IsVisible}" Value="True">
<Setter Property="TextBlock.HorizontalAlignment" Value="Right" />
</DataTrigger>
</TextBlock.Triggers>
</TextBlock>
I get the error:
XamlParseException
How should I do that?
Don't try to use TextBlock.Triggers, instead go for a Style with Style.Triggers.
<StackPanel>
<TextBlock Text="TextBlock Content" Margin="5">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=myButton,Path=IsVisible}" Value="True">
<Setter Property="HorizontalAlignment" Value="Right"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<Button x:Name="myButton" Content="Click Me!" Margin="5"/>
</StackPanel>
Take note of the documentation, as it mentions, why style triggers are needed here.
Note that the collection of triggers established on an element only
supports EventTrigger, not property triggers (Trigger). If you require
property triggers, you must place these within a style or template and
then assign that style or template to the element either directly
through the Style property, or indirectly through an implicit style
reference.
Try to do this with Style
<TextBlock Grid.Row="0" VerticalAlignment="Center" Name="myTextBlock" Text="{Binding TileTextId}" TextWrapping="Wrap" TextAlignment="Center" >
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=myButton, Path=IsVisible}" Value="True">
<Setter Property="HorizontalAlignment" Value="Right" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
I'm trying to have a textbox appear at the end of my game with the winner. I did this using a trigger on the text property that would set the visibility to collapsed when it was empty. Next, I tried adding a border to this textbox. When my textbox is collapsed however (so when the game is still going), the textbox is invisible as before, but the border is already showing as a small black box on the screen.
Does anyone know how I can hide the border until the textbox it's containing isn't empty?
Thanks in advance.
<Border BorderBrush="Black" BorderThickness="2" Canvas.ZIndex="2" Canvas.Left="160" Canvas.Top="225" Background="White">
<TextBlock FontFamily="Helvetica" FontSize="20" FontWeight="Bold"
Text="{Binding WinnerPopup.Value}" Foreground="{Binding WinnerPopup.Value, Converter={StaticResource ownerConverter}}" Padding="15">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<Trigger Property="Text" Value="">
<Setter Property="Visibility" Value="Collapsed" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Border>
You can use the following trick to also collapse the border when the TextBlock gets collapsed:
<Border Canvas.Left="160"
Canvas.Top="225"
Background="White"
BorderBrush="Black"
BorderThickness="2"
Canvas.ZIndex="2"
Visibility="{Binding Visibility,
ElementName=myTextBlock}">
<TextBlock x:Name="myTextBlock"
FontFamily="Helvetica"
FontSize="20"
FontWeight="Bold"
Foreground="{Binding WinnerPopup.Value,
Converter={StaticResource ownerConverter}}"
Padding="15"
Text="{Binding WinnerPopup.Value}">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<Trigger Property="Text" Value="">
<Setter Property="Visibility" Value="Collapsed" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Border>
I have the following DataTemplate in resources that I would like to reuse throughout a GridView.
<Window.Resources>
<DataTemplate x:Key="NumericalDataTemplate" DataType="GridViewColumn.CellTemplate">
<StackPanel Orientation="Horizontal" Height="32">
<TextBlock Text="{Binding MyLength}" VerticalAlignment="Center"
HorizontalAlignment="Center">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}" >
<Setter Property="Visibility" Value="Visible" />
<Style.Triggers>
<DataTrigger Binding="{Binding PropertyEditable}" Value="True">
<Setter Property="Visibility" Value="Collapsed" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</DataTemplate>
</Window.Resources>
Which is implemented as follows.
<GridViewColumn Header="MyLength" Width="80"
CellTemplate="{StaticResource NumericalDataTemplate}" />
I would like change the Binding of the TextBlock (Currently Text={Binding MyLength} ) so that it can use a custom binding for each GridViewColumn Cell Template (eg MyHeight, MyWeight etc).
The way I envisaged doing this is changing the Binding of the TextBlock to simply use {Binding} and having the GridViewColumn set the Binding. However, I'm not sure where or how to do this, as setting the DisplayMemberValue to {Binding MyLength} (for example) simply overrides the template.
I would preferably like to do this entirely in XAML.
It seems that CellTemplate will always be ignored when we have DisplayMemberBinding property set. Possible workaround for this limitation is, by creating markup-extension as pointed by #H.B in his answer to similar question here. Creating markup-extension involves C#/VB codes, but using it only needs XAML codes.
You can reuse the same markup-extension C# code provided by #H.B. Then to use it in your XAML, declare namespace prefix :
<Window ......
xmlns:local="clr-namespace:WpfProject">
Modify DataTemplate key and binding of the TextBlock inside :
<DataTemplate x:Key="TemplateBuilder_BaseTemplate" DataType="GridViewColumn.CellTemplate">
<StackPanel Orientation="Horizontal" Height="32">
<TextBlock Text="{local:TemplateBuilderTag}" VerticalAlignment="Center"
HorizontalAlignment="Center">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}" >
<Setter Property="Visibility" Value="Visible" />
<Setter Property="Foreground" Value="Red"/>
<Style.Triggers>
<DataTrigger Binding="{Binding PropertyEditable}" Value="True">
<Setter Property="Visibility" Value="Collapsed" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</DataTemplate>
Now you can use the same DataTemplate for different column binidngs :
<GridView.Columns>
<GridViewColumn Header="MyLength" Width="80"
CellTemplate="{local:TemplateBuilder MyLength}" />
<GridViewColumn Header="MyHeight" Width="80"
CellTemplate="{local:TemplateBuilder MyHeight}" />
</GridView.Columns>
i hope you can help me. I got following Code in the Resources:
<UserControl.Resources>
<BitmapImage x:Key="img_src_lock" UriSource="/EEBase;component/Images/Lock_24x32.png" />
<BitmapImage x:Key="img_src_unlock" UriSource="/EEBase;component/Images/Unlock_24x32.png" />
<Style TargetType="{x:Type ToggleButton}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsChecked}" Value="True">
<Setter Property="Content">
<Setter.Value>
<Image Source="{StaticResource img_src_lock}" />
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsChecked}" Value="False">
<Setter Property="Content">
<Setter.Value>
<Image Source="{StaticResource img_src_unlock}" />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
<!-- TypeComboTemplateCollapsed -->
<DataTemplate x:Key="TypeComboTemplateCollapsed">
<TextBlock
Text="{Binding Path=Text, Mode=OneWay}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="5,0,0,5"
/>
</DataTemplate>
<!-- TypeComboTemplateExpanded -->
<DataTemplate x:Key="TypeComboTemplateExpanded">
<TextBlock
Text="{Binding Path=Text, Mode=OneWay}"
VerticalAlignment="Center"
Margin="5,0,0,5"
/>
</DataTemplate>
<!-- EditCircleTemplate -->
<DataTemplate x:Key="EditCircleTemplate">
<!-- some content here, no ToggleButton -->
</DataTemplate>
<!-- EditRectangleTemplate -->
<DataTemplate x:Key="EditRectangleTemplate">
<!-- some other content here, including the ToggleButtons -->
<ToggleButton
IsChecked="{Binding Path=BaseLocked, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}"
Margin="5"
/>
<ToggleButton
IsChecked="{Binding Path=HeightLocked, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}"
Margin="5"
/>
</DataTemplate>
</UserControl.Resources>
To me that looks all correct.
Now, the problem is:
When i do the following, an exceptions occurs:
Specified element is already the logical child of another element. Disconnect it first.
1. load the control, selected type is CIRC
2. change the dropdown to select RECT (template triggers and togglebuttons are shown correctly)
3. change the dropdown back to CIRC
--> now the Exception occurs.
4. if i ignore the exception, the template "EditCircleTemplate" does not get loaded, and the normal ToString of the model object gets displayed.
Additional info:
originally there are 4 different types in the WPF, two of them with ToggleButtons (that's why i use templates). I cut them out, they dont differ really. But what i found out using all 4 templates is that the error does not occur when switching to a new Template, but when unloading a template with the toggle buttons. Which is kinda strange.
Also if i remove the DataTriggers for the ToggleButtons everything works like a charm.
The Exception comes from the XAML-Interpreter, so the Stacktrace is not useful at all.
Can anyone give me a hint what i am doing wrong?
Edit:
oops, i guess i forgot the content code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<ComboBox
Margin="5"
Grid.Row="0"
Grid.Column="0"
ItemsSource="{Binding Path=PossibleTypes, Mode=OneTime}"
SelectedItem="{Binding Path=SelectedType, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<ContentControl x:Name="content" Content="{Binding}" ContentTemplate="{StaticResource TypeComboTemplateExpanded}"/>
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ComboBoxItem}}" Value="{x:Null}">
<Setter TargetName="content" Property="ContentTemplate" Value="{StaticResource TypeComboTemplateCollapsed}"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<ContentControl
Grid.Column="0"
Grid.Row="1"
Grid.ColumnSpan="2"
Content="{Binding Mode=OneWay}">
<ContentControl.ContentTemplate>
<DataTemplate >
<ContentControl
Name="inputContent"
Content="{Binding Mode=OneWay}"
ContentTemplate="{x:Null}"
/>
<DataTemplate.Triggers>
<DataTrigger
Binding="{Binding Path=SelectedType.Type, Mode=OneWay}"
Value="CIRC">
<Setter
TargetName="inputContent"
Property="ContentTemplate"
Value="{StaticResource EditCircleTemplate}"
/>
</DataTrigger>
<DataTrigger
Binding="{Binding Path=SelectedType.Type, Mode=OneWay}"
Value="RECT">
<Setter
TargetName="inputContent"
Property="ContentTemplate"
Value="{StaticResource EditRectangleTemplate}"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
</Grid>
Edit2/Solution:
I just found a workaround - it just does not satisfy me:
Instead of putting the style in the UserControl.Resources, which for me would be the more clean and intuitive solution, i have to set the style with the triggers on each ToggleButton separately.
So removing the and adding following code to each ToggleButton did the trick:
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsChecked}" Value="True" >
<Setter Property="Content">
<Setter.Value>
<Image Source="{StaticResource img_src_lock}" />
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsChecked}" Value="False">
<Setter Property="Content">
<Setter.Value>
<Image Source="{StaticResource img_src_unlock}" />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
The big question still persists: WHY?
The problem is that if you create an Image in a style there is only one instance, so as soon as multiple controls use the style there is going to be a fight over this one instance which can only be owned by one control.
The easiest solution to this is placing the Style in a resource and setting x:Shared to false, that way a copy of the style is used whereever referenced.
Why do you need to create BitmapImages and set them as Source to your Content Images in Triggers? Why arent you using the URI source to Images directly?
<Style TargetType="{x:Type ToggleButton}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsChecked}" Value="True">
<Setter Property="Content">
<Setter.Value>
<Image Source="/EEBase;component/Images/Lock_24x32.png" />
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsChecked}" Value="False">
<Setter Property="Content">
<Setter.Value>
<Image Source="/EEBase;component/Images/Unlock_24x32.png" />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
Let me know if this helps.
I would think this is possible, but the obvious way isn't working.
Currently, I'm doing this:
<ContentControl
Content="{Binding HurfView.EditedPart}">
<ContentControl.Resources>
<Style
TargetType="ContentControl"
x:Key="emptytemplate">
<Style.Triggers>
<DataTrigger
Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=Content}"
Value="{x:Null}">
<Setter
Property="ContentControl.Template">
<Setter.Value>
<ControlTemplate>
<Grid
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<TextBlock>EMPTY!</TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Resources>
</ContentControl>
I'm not getting any binding errors and this compiles. However, it doesn't produce the expected result. I've also tried the obvious:
<DataTemplate DataType="{x:Null}"><TextBlock>Hurf</TextBlock></DataTemplate>
This won't compile. And attempting to set the content twice fails as well:
<ContentControl
Content="{Binding HurfView.EditedPart}">
<TextBlock>DEFAULT DISPLAY</TextBlock>
</ContentControl>
Can I do this without writing a custom template selector?
Simple, you have to bind the content property in the style. Styles won't overwrite a value on a control if there's a binding present, even if the value evaluates to Null. Try this.
<ContentControl>
<ContentControl.Style>
<Style TargetType="ContentControl">
<Setter Property="Content" Value="{Binding HurfView.EditedPart}" />
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=Content}" Value="{x:Null}">
<Setter Property="ContentControl.Template">
<Setter.Value>
<ControlTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock>EMPTY!</TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
Since I stumbled upon this question and had the same problem today, I wanted to contribute another way how I solved the problem. Since I did not like to add another style trigger I used the property TargetNullValue which seems to be a bit more readable than the accepted solution (which works nevertheless):
<ContentControl>
<ContentControl.Content>
<Binding Path="ContentViewModel">
<Binding.TargetNullValue>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock>EMPTY!</TextBlock>
</Grid>
</Binding.TargetNullValue>
</Binding>
</ContentControl.Content>
</ContentControl>
You could return DBNull.Value as the FallbackValue of the Binding for the Content of the ContentControl, and create a DataTemplate for DBNull :
<DataTemplate DataType="{x:Type system:DBNull}">
<!-- The default template -->
</DataTemplate>
...
<ContentControl Content="{Binding HurfView.EditedPart, FallbackValue={x:Static system:DBNull.Value}}" />