Requirement: We have a ListView with GridView control as View. When we select a particular row, we need to display a textbox merging more than one column of the selected row.
Solution:
<ListView Name=”categoryList” SelectionMode=”Single” Height=”350″
FontFamily=”Segoe UI” Margin=”49,79,12,0″ IsSynchronizedWithCurrentItem=”True”>
<ListView.Resources>
<ControlTemplate x:Key=”SelectedTemplate” TargetType=”ListViewItem”>
<Border SnapsToDevicePixels=”true”
BorderThickness=”2″
CornerRadius=”5″ x:Name=”border”>
<GridViewRowPresenter>
<GridViewRowPresenter.Columns>
<GridViewColumnCollection>
<GridViewColumn Header=”CategoryId” Width=”100″
DisplayMemberBinding=”{Binding CategoryId}”>
</GridViewColumn>
<GridViewColumn Header=”Title” Width=”300″ >
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation=”Vertical”>
<TextBox Name=”tt” Width=”288″ />
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridViewColumnCollection>
</GridViewRowPresenter.Columns>
</GridViewRowPresenter>
</Border>
</ControlTemplate>
<Style TargetType=”ListViewItem”>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property=”IsSelected” Value=”true” />
</MultiTrigger.Conditions>
<Setter Property=”Template” Value=”{StaticResource SelectedTemplate}” />
</MultiTrigger>
</Style.Triggers>
</Style>
</ListView.Resources>
<ListView.View>
<GridView>
<GridViewColumn Header=”CategoryId” Width=”100″
DisplayMemberBinding=”{Binding CategoryId}”>
</GridViewColumn>
<GridViewColumn Header=”Title” Width=”200″ >
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation=”Vertical”>
<TextBlock Text=”{Binding CategoryTitle}” />
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header=”Description” Width=”100″
DisplayMemberBinding=”{Binding Description}”></GridViewColumn>
</GridView>
</ListView.View>
</ListView>
Output:
