I have a number of grids that have almost the same layout. This is an example
<Grid x:Name="OptionChangeUserState" Grid.Row="0" Style="{StaticResource MenuItemGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Style="{StaticResource MenuItemTextblockStyle}" Text="Status wijzigen" Margin="0"/>
<Image Grid.Column="1" Source="/UserControlSolution;component/Image/user.png" Margin="5" />
</Grid>
I want to turn this in a controltemplate like here :no template property on grid style in WPF?
But how can I change the Textblock text and Image source when I use a controltemplate ?
You can achieve this by creating the one model with Text and Source properties. Then depending on the different number of instance where you want to use this ControlTemplate you can set the model instance in the Tag of your Grid.
<local:MyModel x:Key="myModel1" Text="" Source=""/>
<ContentControl Tag="{StaticResource myModel1}" Template={StaticResource myTemplate}>
</ContentControl>
and in template
<ControlTemplate x:Key="myTemplate" TargetType="ContentControl">
<Grid x:Name="OptionChangeUserState" Grid.Row="0" Style="{StaticResource MenuItemGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Style="{StaticResource MenuItemTextblockStyle}" Text="{Binding Tag.Text, RelativeSource={RelativeSource TemplatedParent}}" Margin="0"/>
<Image Grid.Column="1" Source="{Binding Tag.Source, RelativeSource={RelativeSource TemplatedParent}}" Margin="5" />
</Grid>
</ControlTemplate>
As far as I am aware, you can only do this with a DataTemplate and only if each of your data bound classes had properties of the same name, in this case, TextValue and ImageSource. I don't think that you can get access to the data object directly from the ControlTemplate.
<DataTemplate>
<Grid x:Name="OptionChangeUserState" Grid.Row="0" Style="{StaticResource MenuItemGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Style="{StaticResource MenuItemTextblockStyle}" Text="{Binding TextValue}" Margin="0"/>
<Image Grid.Column="1" Source="{Binding ImageSource}" Margin="5" />
</Grid>
</DataTemplate>
You'd also need to use the ContentTemplate property instead.
<ContentControl Content="{Binding DataObject}"
ContentTemplate="{StaticResource Template}" />
This can be done with data-binding, but it would be preferable to use a property interface so that you can simply type something like:
<local:OptionControl Text="Status wijzigen" ImageSource="/UserControlSolution;component/Image/user.png" />
This way you don't need to have your UI labels and icons in a separate data layer.
This can be achieved by creating a control class which defines Dependency Properties, and using TemplateBindings to bind to them in the ControlTemplate.
It's possible that an existing control has appropriate properties that you can create a template for. This HeaderedContentControl template should work for you, although a custom control would be nicer:
<Style x:Key="HeaderedContentControlStyle" TargetType="HeaderedContentControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HeaderedContentControl">
<Grid Style="{StaticResource MenuItemGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Style="{StaticResource MenuItemTextblockStyle}" Text="{TemplateBinding Header}" />
<Image Grid.Column="1" Source="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Usage:
<HeaderedContentControl Name="OptionChangeUserState" Grid.Row="0"
Style="{StaticResource HeaderedContentControlStyle}"
Header="Status wijzigen">
<BitmapImage>/UserControlSolution;component/Image/user.png</BitmapImage>
</HeaderedContentControl>
Note that we need to wrap the image path in BitmapImage explicitly. This is because the HeaderedContentControl.Content property is not declared as an image type, so WPF will not automatically convert it.
Use DataTemplate with some sort of DTO, DictionaryEntry will do for two items.
<DataTemplate DataType="{x:Type Collections:DictionaryEntry}" x:Key="gridTemplate">
<Grid Style="{StaticResource MenuItemGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Style="{StaticResource MenuItemTextblockStyle}" Text="{Binding Key}" Margin="0"/>
<Image Grid.Column="1" Source="{Binding Value}" Margin="5" />
</Grid>
</DataTemplate>
Usage:
<ContentControl ContentTemplate="{StaticResource gridTemplate}">
<ContentControl.Content>
<Collections:DictionaryEntry Key="Status wijzigen" Value="/UserControlSolution;component/Image/user.png" />
</ContentControl.Content>
Related
I'm not entirely sure how to articulate what I'm trying to do, so apologies in advance if anything is unclear.
I'm writing a Twitter client in UWP C#. One of the things I need to do is control the DataTemplate of each tweet in an array of tweets (as returned by Twitter's API). The problem I'm running into is that I'm going to end up with a lot of identical code, if I make a separate DataTemplate for each tweet type. This is because a tweet can be any of a combination of tweet types (text, image, video, GIF, URL, retweet, and retweet with quote).
Instead of having to copypasta the same DataTemplate for each possible combination, is there a way I can reuse the main Tweet template between different tweet types?
For retweets and quote tweets, the tweet object contains a nested second tweet object (for either the retweet or quote tweet, aka retweet + text), but I don't know how to pass that second tweet object in any way that would let me reuse my existing template.
Here's an example of my DataTemplates that I have right now - I've only done tweets and retweets so far. RetweetTemplate is almost identical to TweetTemplate, except for one extra row at the top of the grid for the "#username retweeted" text, and the bindings are pointed to Tweet.RetweetedStatus instead of Tweet.
So is there a way I can do this with less redundant code? Or am I stuck making a near-duplicate template for each possible combination to accommodate media and retweeted tweets with media?
<DataTemplate x:Key="TweetTemplate">
<Grid MinHeight="150" Width="450" BorderBrush="{ThemeResource SystemControlDisabledListMediumBrush}" BorderThickness="1" Margin="-12 0" Padding="10 5">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<StackPanel Orientation="Horizontal" Padding="5">
<TextBlock Text="{Binding Path=User.Name}" Margin="0 0 8 0" FontWeight="Bold" />
<TextBlock Text="{Binding Path=User.ScreenName, Converter={StaticResource GetHandle}}" Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}" />
<TextBlock Text="⦁" Margin="8 0" />
<TextBlock Text="{Binding CreationDate, Converter={StaticResource FormatDate}}" />
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<TextBlock Text="{Binding Text}" Padding="5" TextWrapping="WrapWholeWords" />
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*" MaxWidth="100"/>
<ColumnDefinition Width="2.5*"/>
<ColumnDefinition Width="2.5*"/>
<ColumnDefinition Width="2.5*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Button x:Name="cmdComment" Content="" Style="{StaticResource MetaButtons}" />
</Grid>
<Grid Grid.Column="1">
<Button x:Name="cmdRetweet" Content="" Style="{StaticResource MetaButtons}" />
</Grid>
<Grid Grid.Column="2">
<Button x:Name="cmdLike" Content="" Style="{StaticResource MetaButtons}" />
</Grid>
<Grid Grid.Column="3">
<Button x:Name="cmdMessage" Content="" Style="{StaticResource MetaButtons}" />
</Grid>
</Grid>
</Grid>
</DataTemplate>
<DataTemplate x:Key="RetweetTemplate">
<Grid MinHeight="150" MinWidth="420">
<Grid.RowDefinitions>
<RowDefinition Height="28"/>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<StackPanel Orientation="Horizontal" Padding="4 8 4 0">
<StackPanel.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="12"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlPageTextBaseMediumBrush}" />
</Style>
</StackPanel.Resources>
<Border Height="28">
<TextBlock Height="24" FontFamily="{StaticResource FontAwesome}" xml:space="preserve"><Run Text=" "/></TextBlock>
</Border>
<TextBlock Text="{Binding Path=User.Name}" />
<TextBlock Text=" retweeted"/>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<StackPanel Orientation="Horizontal" Padding="5">
<TextBlock Text="{Binding Path=RetweetedStatus.User.Name}" Margin="0 0 8 0" FontWeight="Bold" />
<TextBlock Text="{Binding Path=RetweetedStatus.User.ScreenName, Converter={StaticResource GetHandle}}" Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}" />
<TextBlock Text="⦁" Margin="8 0" />
<TextBlock Text="{Binding Path=RetweetedStatus.CreationDate, Converter={StaticResource FormatDate}}" />
</StackPanel>
</Grid>
<Grid Grid.Row="2">
<TextBlock Text="{Binding RetweetedStatus.Text}" Padding="5" TextWrapping="WrapWholeWords" />
</Grid>
<Grid Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*" MaxWidth="100"/>
<ColumnDefinition Width="2.5*"/>
<ColumnDefinition Width="2.5*"/>
<ColumnDefinition Width="2.5*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Button x:Name="cmdComment" Content="" Style="{StaticResource MetaButtons}" />
</Grid>
<Grid Grid.Column="1">
<Button x:Name="cmdRetweet" Content="" Style="{StaticResource MetaButtons}" />
</Grid>
<Grid Grid.Column="2">
<Button x:Name="cmdLike" Content="" Style="{StaticResource MetaButtons}" />
</Grid>
<Grid Grid.Column="3">
<Button x:Name="cmdMessage" Content="" Style="{StaticResource MetaButtons}" />
</Grid>
</Grid>
</Grid>
</DataTemplate>
<local:TweetTemplateSelector x:Key="TweetTemplateSelector"
TweetTemplate="{StaticResource TweetTemplate}"
RetweetTemplate="{StaticResource RetweetTemplate}">
</local:TweetTemplateSelector>
In general, you need to create match Datatemplate for different message type. And UWP has DataTemplateSelector class that could use to select specified Datatemplate dynamically. For example,
ListViewDataTemplateSelector.cs
public class ListViewDataTemplateSelector : DataTemplateSelector
{
public DataTemplate MaleData { set; get; }
public DataTemplate FemaleData { set; get; }
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
if (item is Male)
{
return MaleData;
}
return FemaleData;
}
}
Usage
<Page.Resources>
<DataTemplate x:Key="MaleData">
<Grid>
<Border>
<Grid Margin="10,10,10,10">
<StackPanel>
<TextBlock Text="Name"></TextBlock>
<TextBlock Text="{Binding Path=Name}"></TextBlock>
<TextBlock Text="Height"></TextBlock>
<TextBlock Text="{Binding Path=Stature}"></TextBlock>
</StackPanel>
</Grid>
</Border>
</Grid>
</DataTemplate>
<DataTemplate x:Key="FemaleData">
<Grid>
<Border>
<Grid Margin="10,10,10,10">
<StackPanel>
<TextBlock Text="Name"></TextBlock>
<TextBlock Text="{Binding Path=Name}"></TextBlock>
<TextBlock Text="Age"></TextBlock>
<TextBlock Text="{Binding Path=Year}"></TextBlock>
</StackPanel>
</Grid>
</Border>
</Grid>
</DataTemplate>
<local:ListViewDataTemplateSelector x:Key="Selector" FemaleData="{StaticResource FemaleData}"
MaleData="{StaticResource MaleData}"></local:ListViewDataTemplateSelector>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView ItemsSource="{x:Bind View.HumanWorld}"
ItemTemplateSelector="{StaticResource Selector}"></ListView>
<TextBlock Text="http://blog.csdn.net/lindexi_gd" VerticalAlignment="Bottom"></TextBlock>
</Grid>
So is there a way I can do this with less redundant code? Or am I stuck making a near-duplicate template for each possible combination to accommodate media and retweeted tweets with media?
I know you want less redundant code, but the less redundant code you write, the more behavioral controls you need. This will increase the complexity of your code. Although it is redundant that create Datatemplates for each message type, but the code is simple.
Instead of having to copypasta the same DataTemplate for each possible combination, is there a way I can reuse the main Tweet template between different tweet types?
No. You can't base a template on another template. A DataTemplate must always be defined as a whole, i.e. you cannot "override" only some part of a template but keep the rest of it. XAML doesn't support this.
Or am I stuck making a near-duplicate template for each possible combination to accommodate media and retweeted tweets with media?
Yes, I am afraid so. You could consider creating the templates programmatically using the XamlReader class to be able to re-use as much markup as possible.
I have a TreeViewItem that has multiple parts in it -- an icon, a header, and a piece of data. I'm trying to get the last part to wrap without making everything wrap, and I'm having no luck. Here's an illustration of the problem:
I've tried a few things that I've found on Stack Overflow, with no luck. There were three suggestions I found:
Put the item in a grid with a column with bound to the TreeView's actual width. This is implemented in the XAML below, but doesn't seem to help.
Disable horizontal scrolling on the TreeView with ScrollViewer.HorizontalScrollBarVisibility = "Disabled", which I also implemented in the XAML below.
Wrap what I need in a WrapPanel. I tried this, but got poor results. When I wrapped the whole TreeViewItem in one, I got wrapping that was hard to control (the whole item wraps, so all parts wrapped and it looked awful). When I wrapped just the desired TextBlock in one, I got no results at all. So I took it out.
Here's the template I have for the TreeViewItem:
<DataTemplate x:Key="BasicPropertyTemplate" DataType="{x:Type json:JProperty}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding RelativeSource={RelativeSource AncestorType=TreeView}, Path=ActualWidth}" />
</Grid.ColumnDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16" />
<ColumnDefinition Width="3" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="3" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="3" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border
Width="12"
Height="12"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="{Binding Converter={StaticResource TypeToColorConverter}, ConverterParameter='Interior'}"
BorderBrush="{Binding Converter={StaticResource TypeToColorConverter}}"
BorderThickness="1" />
<TextBlock Grid.Column="2" Text="{Binding Name, Mode=OneWay}" />
<TextBlock Grid.Column="4" Text=": " />
<TextBlock
Grid.Column="6"
Text="{Binding Value, Converter={StaticResource StringFormatConverter}, Mode=OneWay}"
TextWrapping="Wrap" />
</Grid>
</Grid>
</DataTemplate>
Here's an illustration of the layout, so you can see how the TreeViewItem is composed:
Essentially, the gray part is the icon, the green parts are just spacers between items, the blue parts are header and a colon (essentially irrelevant to what this question is about), and the red part is the actual content.
It's the red part I want to wrap.
Here's the TreeView definition:
<TreeView
x:Name="JsonRoot"
Grid.Column="0"
ItemTemplateSelector="{StaticResource TreeViewTemplateSelector}"
Loaded="JsonRoot_Loaded"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
VirtualizingStackPanel.IsVirtualizing="True" />
I feel like I'm doing something simple wrong, but I'm not sure what. Is there a way to accomplish this without just locking the TextBlock width to something arbitrary, like 200?
My investigation showed that TextBlock Wrap doesn't work with <ColumnDefinition Width="Auto"/>. So I changed last <ColumnDefinition Width="Auto"/> in DataTemplate to <ColumnDefinition Width="*"/>.
Unfortunately TreeViewItem (which is a default container for TreeView items) has <ColumnDefinition Width="Auto"/> in its Template and places our items there. I have tried to make a custom template with <ColumnDefinition Width="*"/> and it worked but code is really long. So I decided to compensate the effect by binding Grid width:
<DataTemplate x:Key="BasicPropertyTemplate" DataType="{x:Type json:JProperty}">
<Grid Width="{Binding RelativeSource={RelativeSource AncestorType=TreeViewItem}, Path=ActualWidth}" >
<Grid Margin="0,0,20,0"> <!--right margin to compensate excessive width-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16" />
<ColumnDefinition Width="3" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="3" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="3" />
<ColumnDefinition Width="*"/> <!--was Auto-->
</Grid.ColumnDefinitions>
<Border
Width="12"
Height="12"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="{Binding Converter={StaticResource TypeToColorConverter}, ConverterParameter='Interior'}"
BorderBrush="{Binding Converter={StaticResource TypeToColorConverter}}"
BorderThickness="1" />
<TextBlock Grid.Column="2" Text="{Binding Name, Mode=OneWay}" />
<TextBlock Grid.Column="4" Text=": " />
<TextBlock
Grid.Column="6"
Text="{Binding Value, Converter={StaticResource StringFormatConverter}, Mode=OneWay}"
TextWrapping="Wrap" />
</Grid>
</Grid>
</DataTemplate>
ScrollViewer.HorizontalScrollBarVisibility="Disabled" is important element and should be set.
Try changing the grid in DataTemplate with a DockPanel:
<DataTemplate>
<DockPanel>
<Border Width="12"
Height="12"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="{Binding Converter={StaticResource TypeToColorConverter}, ConverterParameter='Interior'}"
BorderBrush="{Binding Converter={StaticResource TypeToColorConverter}}"
BorderThickness="1" />
<TextBlock Text="{Binding Name, Mode=OneWay}" />
<TextBlock Text=": " />
<TextBlock Text="{Binding Value, Converter={StaticResource StringFormatConverter}, Mode=OneWay}"
TextWrapping="Wrap" />
</DockPanel>
</DataTemplate>
My XAML is very simple:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<TextBlock FontSize="55" HorizontalAlignment="Center"
VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
<GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Center" />
<TreeView Grid.Column="2" ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
<TreeViewItem>
<TreeViewItem.Header>
<TextBlock Text="The full string"
TextTrimming="CharacterEllipsis"/>
</TreeViewItem.Header>
<TreeViewItem>
<TreeViewItem.Header>
<TextBlock Text="The full string"/>
</TreeViewItem.Header>
</TreeViewItem>
</TreeViewItem>
</TreeView>
<Border BorderBrush="Green" BorderThickness="5" CornerRadius="5" Grid.Column="3" />
</Grid>
What I have is:
and it is not correct for me:
And what behavior I want is:
How can I use TextTrimming property of TextBlock placed in TreeViewItem?
You need to modify the style of your TreeViewItem, because the content is not stretched.
See style example and problem explanation at
https://leecampbell.com/2009/01/14/horizontal-stretch-on-treeviewitems/
Just apply the style from the link to your TreeView
<TreeView>
<TreeView.Resources>
<!--paste the style from the link here-->
</TreeView.Resources>
Sorry for not posting the style, but i don't get the formatting done.
I have template for ListBoxItems that contains 3 columns. Each item is represented by picture-text-picture. Is there some posibillity how to trigger event (for example PreviewMouseLeftButtonDown) only by clicking on third column in ListBoxItem (not enywhere else on item).
I know how to trigger it by clicking on whole ListBoxItem, but i need it to trigger only when clicked on the last column (picture). Thanks.
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,4,0,4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Image Source="images/showFile.png" Grid.Column="0" Height="16" Width="16"/>
<TextBlock Text="{Binding Name}" Grid.Column="1"/>
<Image Source="images/delete.png" Grid.Column="2" Height="16" Width="16"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
I tried proposed solution and it works. Thanks.
You can set the event listener only for the component you want:
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,4,0,4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Image Source="images/showFile.png" Grid.Column="0" Height="16" Width="16"/>
<TextBlock Text="{Binding Name}" Grid.Column="1"/>
<Image Source="images/delete.png" Grid.Column="2" Height="16" Width="16" PreviewMouseLeftButtonDown="OnPreviewMouseLeftButtonDown"/>
</Grid>
</DataTemplate>
I have following DataTemplate for usage within my phone.LongListSelector in my XAML view:
<DataTemplate x:Name="myLocationsListTemplate">
<StackPanel Margin="0,0,0,15">
<Grid VerticalAlignment="Top" Margin="0,0,5,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="120" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" TextTrimming="WordEllipsis" Text="{Binding Name}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextLargeStyle}" VerticalAlignment="Top" Margin="0,0,0,22" />
<Image Grid.Column="0" Width="138" Height="25" Source="/mAppData/stars-3.png" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0"/>
<TextBlock Grid.Column="1" Text="{Binding DistanceInMeterFormatted, FallbackValue=fallback, TargetNullValue=nullvalue, Mode=OneWay}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" Margin="0,0,-3,20" VerticalAlignment="Bottom"/>
<TextBlock Grid.Column="1" Text="vor 10 min." TextWrapping="NoWrap" Margin="0" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
</Grid>
<Grid VerticalAlignment="Top" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Width="100" Height="100" Source="{Binding PreviewImg1}"/>
<Image Grid.Column="1" Width="100" Height="100" Source="{Binding PreviewImg2}"/>
<Image Grid.Column="2" Width="100" Height="100" Source="{Binding PreviewImg3}"/>
<Image Grid.Column="3" Width="100" Height="100" Source="{Binding PreviewImg4}"/>
</Grid>
</StackPanel>
</DataTemplate>
Now I want the complete DataTemplate Content made "clickable". Means: If user clicks on a TextBlock or one of the four Images or on whatever displayed in die List, an action should be performed with a databound property (saying the Name from the bound data should be given).
Any ideas how to get this working?
Why don't you just stick your entire template into a button? You can style the button if needs be to remove any default appearance you don't like. eg.
<Style x:Key="BlankButtonStyle" TargetType="ButtonBase">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ButtonBase">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent" />
</Style>