XAML: Custom Binding in DataTemplate for use in GridViewColumn CellTemplate - wpf

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>

Related

XAML custom text in TextBlock

Good afternoon,
I´m binding a list of doubles (Latlng) to an ItemsControl and in a TextBlock I want to make a custom text when the list binded has a count of 0. With the code I have the TextBlock is empty when the ItemsSource of the ItemsControl is that list.
What am I doing wrong?
Btw the list Latlng is a property of a class.
<ItemsControl Name="icLatLng" ItemsSource="{Binding Latlng}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock FontFamily="Arial" FontSize="14">
<TextBlock.Style>
<Style>
<Setter Property="TextBlock.Text" Value="{Binding}"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ItemsControl}, Path=Items.Count}" Value="0">
<Setter Property="TextBlock.Text" Value="—"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Thanks in advance.
Welcome to SO.
ItemsControl.ItemTemplate is the template that gets applied to each element in the Items list the control is bound to. If there are no items to begin with, then it won't be created, so anything you do in it won't be seen.
I suspect what you're really trying to do is replace the look of the entire control when the list is empty. If so, you can do that by applying a new template to the ItemsControl itself using a DataTrigger on the HasItems property:
<ItemsControl Name="icLatLng" ItemsSource="{Binding Latlng}">
<ItemsControl.Style>
<Style TargetType="{x:Type ItemsControl}" BasedOn="{StaticResource {x:Type ItemsControl}}">
<Style.Triggers>
<DataTrigger Binding="{Binding HasItems, RelativeSource={RelativeSource Self}}" Value="False">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ItemsControl}">
<TextBlock Text="-" />
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ItemsControl.Style>
</ItemsControl>

Change my binding Check-Box style when mouse over ListViewItem

So i have ListView with Check-Box cell:
<ListView.Resources>
<DataTemplate x:Key="CheckBoxCell">
<CheckBox IsChecked="{Binding Path=IsChecked}"/>
</DataTemplate>
</ListView.Resources>
<ListView.View>
<GridViewColumn Width="30" x:Name="gridViewColumnIsChecked" CellTemplate="{StaticResource CheckBoxCell}"/>
</ListView.View>
And i have ListViewItem style with several triggers like IsMouseOver so when IsMouseOver is True i am change my Background color for example.
So i want to change my Check-Box style\color when mouse over ListViewItem.
How i can i achieve that ?
Use this snippet:
<DataTemplate x:Key="CheckBoxCell">
<CheckBox>
<CheckBox.Style>
<Style TargetType="CheckBox">
<Style.Triggers>
<DataTrigger Value="True" Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBoxItem}}">
<Setter Property="Background" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</CheckBox.Style>
</CheckBox>
</DataTemplate>
The solution is to create a DataTrigger, which binds to parent ListViewItem.IsMouseOver property, like another answer shows
However, the trigger can be also placed in <DataTemplate.Triggers> to make markup shorter. In that case Setter uses TargetName to access the correct control.
<DataTemplate x:Key="CheckBoxCell">
<CheckBox IsChecked="{Binding Path=IsChecked}" Name="Chk" />
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource AncestorType=ListBoxItem}}"
Value="True">
<Setter TargetName="Chk" Property="Background" Value="Red" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>

WPF DataTemplate on ListView to visualize different kinds of user controls

I have a ListView which I want to present different kinds of user controls, depending on which view model is set for the list view item.
In xaml:
<ListView ItemsSource="{Binding Items}">
<ListView.Resources>
<DataTemplate DataType="{x:Type viewModels:LabelledTextViewModel}">
<controls:LabelledTextBox/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModels:FolderChooserViewModel}">
<standardControls:FolderChooser/>
</DataTemplate>
</ListView.Resources>
</ListView>
Now this works fine, but my LabelledTextViewModel can be editable or not editable. How do I say in XAML to check the property "IsEditable" on my viewmodel, and depending on its value show LabelledTextBlockControl or LabelledTextBoxControl?
You can use a DataTrigger in your DataTemplate:
<ListView ItemsSource="{Binding Items}">
<ListView.Resources>
<DataTemplate DataType="{x:Type viewModels:LabelledTextViewModel}">
<Grid>
<controls:LabelledTextBlockControl x:Name="textBlock"/>
<controls:LabelledTextBoxControl x:Name="textBox" Visibility="Collapsed"/>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsEditable}" Value="True">
<Setter TargetName="textBlock" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="textBox" Property="Visibility" Value="Visible"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModels:FolderChooserViewModel}">
<standardControls:FolderChooser/>
</DataTemplate>
</ListView.Resources>
</ListView>
For your requirements, you either need to use the DataTemplateSelector Class to make that selection for you, or you could try to name your DataTemplates and set them using a DataTrigger:
<ListView>
<ListView.Resources>
<DataTemplate x:Key="DefaultDataTemplate" DataType="{x:Type viewModels:LabelledTextViewModel}">
<controls:LabelledTextBox/>
</DataTemplate>
<DataTemplate x:Key="AnotherDataTemplate" DataType="{x:Type viewModels:FolderChooserViewModel}">
<standardControls:FolderChooser/>
</DataTemplate>
</ListView.Resources>
<ListView.Style>
<Style TargetType="{x:Type ListView}">
<Setter Property="ItemTemplate" Value="{StaticResource DefaultDataTemplate}" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsEditable}" Value="True">
<Setter Property="ItemTemplate" Value="{StaticResource AnotherDataTemplate}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ListView.Style>
</ListView>
This example assumes that you are setting the DataTemplates to the ItemTemplate property... if not, you'll need to change that property to the relevant one.

Display a default DataTemplate in a ContentControl when its content is null or empty?

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}}" />

How to make a text box Visibility=Hidden with a trigger

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.

Resources