Databases
StackOverflow2013
Postsdbo
POHow to select ListView row if control in data template is clicked
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to select ListView row if control in data template is clicked
    text
    copied!<p>I have a ListView that is using a DataTemplate. I swap out the Item DataTemplate based on the IsSelected property of the particular item. This allows me to display an edit template and a read template. The ListView contains two columns. In read mode the two columns are readonly TextBoxes and in edit mode the left column is a editable TextBox and the right column is a drop down. Everything works great as long as I don't click directly on one of the TextBoxes when in read mode. If I click outside the control the row is selected just fine, when selecting inside the control, however, the row is not selected. This prevents me from entering edit mode when one of the cells are clicked.</p> <p>I've pasted my xaml below. You can see that the GridBlock and GridEdit styles will be controlled by the IsSelected property of the ListView. This is what allows me to swap out the DataTemplate (really hide or collapse) based on that DP. I've further specialized these styles to allow for watermarked textboxes when the value is empty and the control doesn't have focus. I think this is where my problem lies but for the life of me I can't think of a way to do this declaratively. Also, I'm new to WPF so I'm sure there is a pattern for this sort of thing it's just very difficult to formulate a query that will return meaningful results from google or bing. Thanks for any and all help in advance.</p> <p>Here are my styles and datatemplates:</p> <pre><code>&lt;Style TargetType="{x:Type FrameworkElement}" x:Key="GridBlockStyle"&gt; &lt;Setter Property="VerticalAlignment" Value="Center" /&gt; &lt;Setter Property="Visibility" Value="{Binding Path=IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListViewItem}}, Converter={StaticResource boolToVis}, ConverterParameter=False}" /&gt; &lt;/Style&gt; &lt;Style TargetType="{x:Type FrameworkElement}" x:Key="GridEditStyle"&gt; &lt;Setter Property="VerticalAlignment" Value="Center" /&gt; &lt;Setter Property="Visibility" Value="{Binding Path=IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListViewItem}}, Converter={StaticResource boolToVis}, ConverterParameter=True}" /&gt; &lt;/Style&gt; &lt;Style x:Key="TextBoxReadOnly" TargetType="{x:Type TextBox}" BasedOn="{StaticResource GridBlockStyle}"&gt; &lt;Setter Property="KeyboardNavigation.TabNavigation" Value="None" /&gt; &lt;Setter Property="AllowDrop" Value="true" /&gt; &lt;Setter Property="Background" Value="Transparent"&gt;&lt;/Setter&gt; &lt;Setter Property="HorizontalContentAlignment" Value="Stretch" /&gt; &lt;Setter Property="VerticalContentAlignment" Value="Stretch" /&gt; &lt;Setter Property="Padding" Value="8,5,3,3" /&gt; &lt;Setter Property="BorderThickness" Value="0" /&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="{x:Type TextBox}"&gt; &lt;Grid&gt; &lt;Label x:Name="TextPrompt" Content="{TemplateBinding Tag}" Visibility="Collapsed" Focusable="False" Foreground="Silver"&gt;&lt;/Label&gt; &lt;ScrollViewer Margin="0" x:Name="PART_ContentHost" Foreground="{DynamicResource OutsideFontColor}" /&gt; &lt;/Grid&gt; &lt;ControlTemplate.Triggers&gt; &lt;MultiTrigger&gt; &lt;MultiTrigger.Conditions&gt; &lt;Condition Property="IsFocused" Value="False"&gt;&lt;/Condition&gt; &lt;Condition Property="Text" Value=""&gt;&lt;/Condition&gt; &lt;/MultiTrigger.Conditions&gt; &lt;MultiTrigger.Setters&gt; &lt;Setter Property="Visibility" TargetName="TextPrompt" Value="Visible"&gt;&lt;/Setter&gt; &lt;/MultiTrigger.Setters&gt; &lt;/MultiTrigger&gt; &lt;Trigger Property="IsEnabled" Value="False"&gt; &lt;Setter Property="Foreground" Value="DimGray" /&gt; &lt;/Trigger&gt; &lt;/ControlTemplate.Triggers&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; &lt;Style x:Key="TextBoxEditable" TargetType="{x:Type TextBox}" BasedOn="{StaticResource GridEditStyle}"&gt; &lt;Setter Property="KeyboardNavigation.TabNavigation" Value="None" /&gt; &lt;Setter Property="AllowDrop" Value="true" /&gt; &lt;Setter Property="Background" Value="Transparent"&gt;&lt;/Setter&gt; &lt;Setter Property="HorizontalContentAlignment" Value="Stretch" /&gt; &lt;Setter Property="VerticalContentAlignment" Value="Stretch" /&gt; &lt;Setter Property="Padding" Value="8,5,3,3" /&gt; &lt;Setter Property="BorderThickness" Value="0" /&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="{x:Type TextBox}"&gt; &lt;Grid&gt; &lt;Border x:Name="BorderBase" Background="White" BorderThickness="1.4,1.4,1,1" BorderBrush="Silver" /&gt; &lt;Label x:Name="TextPrompt" Content="{TemplateBinding Tag}" Visibility="Collapsed" Focusable="False" Foreground="Silver"&gt;&lt;/Label&gt; &lt;ScrollViewer Margin="0" x:Name="PART_ContentHost" Foreground="{DynamicResource OutsideFontColor}" /&gt; &lt;/Grid&gt; &lt;ControlTemplate.Triggers&gt; &lt;MultiTrigger&gt; &lt;MultiTrigger.Conditions&gt; &lt;Condition Property="IsFocused" Value="False"&gt;&lt;/Condition&gt; &lt;Condition Property="Text" Value=""&gt;&lt;/Condition&gt; &lt;/MultiTrigger.Conditions&gt; &lt;MultiTrigger.Setters&gt; &lt;Setter Property="Visibility" TargetName="TextPrompt" Value="Visible"&gt;&lt;/Setter&gt; &lt;/MultiTrigger.Setters&gt; &lt;/MultiTrigger&gt; &lt;Trigger Property="IsFocused" Value="True"&gt; &lt;Setter Property="BorderThickness" TargetName="BorderBase" Value="2.4,2.4,1,1"&gt;&lt;/Setter&gt; &lt;/Trigger&gt; &lt;Trigger Property="IsEnabled" Value="False"&gt; &lt;Setter Property="Foreground" Value="DimGray" /&gt; &lt;/Trigger&gt; &lt;/ControlTemplate.Triggers&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; </code></pre> <p>And here is my ListView view:</p> <pre><code>&lt;ListView.View&gt; &lt;GridView&gt; &lt;GridViewColumn Width="120"&gt; &lt;GridViewColumnHeader Content="Resource ID" /&gt; &lt;GridViewColumn.CellTemplate&gt; &lt;DataTemplate&gt; &lt;Grid&gt; &lt;TextBox Margin="3" Tag="Enter Resource ID" Text="{Binding Path=ResourceID, UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource TextBoxReadOnly}" IsReadOnly="True" /&gt; &lt;TextBox Width="90" Tag="Enter Resource ID" Margin="3" Style="{StaticResource TextBoxEditable}" Text="{Binding Path=ResourceID, UpdateSourceTrigger=PropertyChanged}" /&gt; &lt;/Grid&gt; &lt;/DataTemplate&gt; &lt;/GridViewColumn.CellTemplate&gt; &lt;/GridViewColumn&gt; &lt;GridViewColumn Width="120"&gt; &lt;GridViewColumnHeader Content="Code" /&gt; &lt;GridViewColumn.CellTemplate&gt; &lt;DataTemplate&gt; &lt;Grid&gt; &lt;TextBox Margin="3" Tag="Enter Code" Text="{Binding Path=Code}" Style="{StaticResource TextBoxReadOnly}" IsReadOnly="True" /&gt; &lt;ComboBox Margin="3" Style="{StaticResource GridEditStyle}" ItemsSource="{Binding Source={StaticResource CodeViewSource}, Mode=OneWay}" SelectedItem="{Binding Path=Code, Mode=TwoWay}" IsSynchronizedWithCurrentItem="False" util:ComboBoxWidthFromItemsBehavior.ComboBoxWidthFromItems="True" /&gt; &lt;/Grid&gt; &lt;/DataTemplate&gt; &lt;/GridViewColumn.CellTemplate&gt; &lt;/GridViewColumn&gt; &lt;GridViewColumn Width="120"&gt; &lt;GridViewColumn.CellTemplate&gt; &lt;DataTemplate&gt; &lt;Button Margin="5" Content="Delete" Command="{Binding Path=DataContext.RemoveORIEntryCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"&gt; &lt;Button.Resources&gt; &lt;Converter:AgencyItemIDParametersConverter x:Key="RemoveListViewItemParametersConverter" /&gt; &lt;/Button.Resources&gt; &lt;Button.CommandParameter&gt; &lt;MultiBinding Converter="{StaticResource RemoveListViewItemParametersConverter}"&gt; &lt;MultiBinding.Bindings&gt; &lt;Binding Path="AgencyID" /&gt; &lt;Binding Path="ID" /&gt; &lt;/MultiBinding.Bindings&gt; &lt;/MultiBinding&gt; &lt;/Button.CommandParameter&gt; &lt;/Button&gt; &lt;/DataTemplate&gt; &lt;/GridViewColumn.CellTemplate&gt; &lt;/GridViewColumn&gt; &lt;/GridView&gt; &lt;/ListView.View&gt; </code></pre> <p></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload