I have a problem with nested template bindings.
Having an ItemsControl with a template, which works great. This template contains a tooltip as well (which shows perfectly).
<Button.ToolTip>
<TextBlock Text="{Binding Path=DetailPaneText}" />
</Button.ToolTip>
But inside the itemscontrol template, I have a ToggleButton with another template inside it. And I can't seem to show the text over there as well since the binding isn't correct.
Code inside the toggle button
<StackPanel Background="#293344" Width="200" x:Name="DetailTab" Margin="0">
<TextBlock FontSize="12" Text="" Foreground="White" />
</StackPanel>
What kind of binding or syntax should I put in between the Text tags? I tried several options but none of them seemed to work yet. Currently out of guesses.
Thanks
Complete code snippet
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0" >
<Button Command="{x:Static CobraInfrastructure:Commands.NavigateFromBreadcrumb}" CommandParameter="{Binding Path=Current}" Tag="{Binding DetailPaneText}" x:Name="TextBlock_Detail" Style="{DynamicResource BreadcrumbButton}">
<Button.Resources>
<Style BasedOn="{StaticResource {x:Type ToolTip}}" TargetType="ToolTip">
<Setter Property="Background" Value="#F8F8F8" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="Padding" Value="15" />
<Setter Property="MinWidth" Value="300" />
<Setter Property="MinHeight" Value="150" />
<Setter Property="VerticalAlignment" Value="Top" />
</Style>
</Button.Resources>
<Button.ToolTip>
<TextBlock Text="{Binding Path=DetailPaneText}" />
</Button.ToolTip>
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="HyphenTextBlock" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Text="{Binding Path=EntityTitle}" FontSize="12" FontWeight="Bold" Foreground="White" Grid.Row="0" Grid.Column="0"/>
<TextBlock VerticalAlignment="Stretch" Text="{Binding Path=Text, NotifyOnTargetUpdated=True, Mode=OneWay}" FontSize="10" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"/>
</Grid>
</Button>
<ToggleButton Focusable="False" Style="{DynamicResource BreadcrumbOpenButton}" VerticalAlignment="Stretch" HorizontalAlignment="Center" Tag="{Binding Path=DetailPaneText}">
<ToggleButton.Template>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<StackPanel Orientation="Horizontal">
<Border Width="13" Background="#293344">
<fa:FontAwesome Icon="CaretRight" Foreground="White" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
<StackPanel Background="#293344" Width="200" x:Name="DetailTab" Margin="0">
<TextBlock FontSize="12" Text="" Foreground="White" />
</StackPanel>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Width" TargetName="DetailTab" Value="200"/>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Width" TargetName="DetailTab" Value="1"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsVisible}" Value="False">
<Setter Property="Visibility" Value="Collapsed" />
</DataTrigger>
<DataTrigger Binding="{Binding IsOverview}" Value="True">
<Setter Property="Style" TargetName="TextBlock_Detail" Value="{DynamicResource LinkButton}" />
<Setter Property="FontWeight" TargetName="TextBlock_Detail" Value="Bold" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
You should reference on TemplatedParent in Binding:
<StackPanel Background="#293344" Width="200" x:Name="DetailTab" Margin="0">
<TextBlock FontSize="12" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataContext.DetailPaneText}" Foreground="White" />
</StackPanel>
If you trying to bind a tooltip text of a button to the Text property of textblock, you may bind it using the ElementName.
First name your button using x:Name
<Button x:Name="XButton">
<Button.ToolTip>
<TextBlock Text="{Binding Path=DetailPaneText}" />
</Button.ToolTip>
</Button>
Bind it to text block text using the ElementName.
<StackPanel Background="#293344" Width="200" x:Name="DetailTab" Margin="0">
<TextBlock FontSize="12" Text="{Binding ElementName=XButton, Path=ToolTip.Text}" />
</StackPanel>
I want to create a Magic the Gathering trading user interface where if a user hover over a specific card name, that it will display that card's image (see image). Currently, in the MultiMasterCardListView, the only image that displays is the Black Lotus card image which I hard-coded that image path. As a result, it does not matter which card name I hover over, it only shows black lotus image.
So I created a property (PlayerCardPath) inside of MultiMasterCardListViewModel, which will loop through all the cards in the database
and test if the hover over's content/value equals that card name. If it does then return the path with the card's name and image format. The problem is that mc.Name(from MultiMasterCardViewModel) returns nothing so the "if" statement inside of the foreach doesn't get hit at all. How do I get the value of whatever is being hover over from the MultiMasterCardListView? Let me know if you need clarification. Thanks
MultiMasterCardListView:
<UserControl x:Class="OrderEntrySystem.MultiMasterCardListView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:OrderEntrySystem"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="600">
<UserControl.Resources>
<ResourceDictionary Source="SharedResources.xaml" />
</UserControl.Resources>
<Grid>
<DockPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" DockPanel.Dock="Top" Margin="0,0,0,5" Height="30">
<TextBox x:Name="searchTextBox" Text="{Binding Path=SearchText}" Width="100" Height="23" Margin="0,4,5,0" />
<ContentControl Content="{Binding Path=FilterCommands}" ContentTemplate="{StaticResource ResourceKey=NestedCommandTemplate}" />
</StackPanel>
<Grid DockPanel.Dock="Bottom">
<local:SelectedItemsView />
</Grid>
<Grid DockPanel.Dock="Bottom">
<local:PagingView></local:PagingView>
</Grid>
<ListView ItemsSource="{Binding Path=SortedCards}" ItemContainerStyle="{StaticResource ResourceKey=ListViewStyle}">
<ToolTipService.ToolTip>
<Border>
<StackPanel>
<Image Source="C:\Users\Teng\Documents\0515-392-team-orange\Team Magic Project\OrderEntrySystem\Images\Black Lotus.JPG"/>
</StackPanel>
</Border>
</ToolTipService.ToolTip>
<ListView.View>
<GridView>
<GridViewColumn Width="175" DisplayMemberBinding="{Binding Path=Name}">
<GridViewColumnHeader Content="Name" Command="{Binding Path=SortCommand}" CommandParameter="Name" />
</GridViewColumn>
<GridViewColumn Header="Point Value" Width="70" DisplayMemberBinding="{Binding Path=PointValue}" />
</GridView>
</ListView.View>
</ListView>
</DockPanel>
</Grid>
MultiMasterCardListViewModel:
public string PlayerCardPath
{
get
{
string result = null;
MultiMasterCardListView mC = new MultiMasterCardListView();
foreach (var card in this.repository.GetMasterCardLists())
{
if (card.Name == mC.Name)
{
result = (#"..\..\..\Images\" + mC.Name + ".JPG");
break;
}
}
return result;
}
}
SharedResources:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:OrderEntrySystem">
<DataTemplate DataType="{x:Type local:MasterCardListViewModel}">
<local:MasterCardListView></local:MasterCardListView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MemberViewModel}">
<local:MemberView></local:MemberView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MultiMasterCardListViewModel}">
<local:MultiMasterCardListView></local:MultiMasterCardListView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MultiMemberViewModel}">
<local:MultiMemberView></local:MultiMemberView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MultiMemberCardListViewModel}">
<local:MultiMemberCardListView></local:MultiMemberCardListView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:TransactionViewModel}">
<local:TransactionView></local:TransactionView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MultiTransactionViewModel}">
<local:MultiTransactionView></local:MultiTransactionView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MultiCardTransactionViewModel}">
<local:MultiCardTransactionView></local:MultiCardTransactionView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:CardConditionViewModel}">
<local:CardConditionView></local:CardConditionView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:QuantityViewModel}">
<local:QuantityView></local:QuantityView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:PurchasePointsViewModel}">
<local:PurchasePointsView></local:PurchasePointsView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MultiMyCardListViewModel}">
<local:MultiMyCardListView></local:MultiMyCardListView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MultiShoppingCartViewModel}">
<local:MultiShoppingCartView></local:MultiShoppingCartView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:ShoppingCartViewModel}">
<local:ShoppingCartView></local:ShoppingCartView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:ReportViewModel}">
<local:ReportView></local:ReportView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:LoginViewModel}">
<local:LoginView></local:LoginView>
</DataTemplate>
<DataTemplate x:Key="WorkspacesTemplate">
<TabControl IsSynchronizedWithCurrentItem="True" Margin="4" ItemsSource="{Binding}">
<TabControl.Background>
<ImageBrush ImageSource="..\..\Images\Magicthegathering-logo.svg.png" Stretch="Uniform" AlignmentY="Bottom" AlignmentX="Center" Opacity="0.5"/>
</TabControl.Background>
<TabControl.ItemTemplate>
<DataTemplate>
<DockPanel>
<Button Command="{Binding Path=CloseCommand}" Content="X" Cursor="Hand" Margin="4,0,0,0" FontWeight="Bold" Height="16" Width="16" FontFamily="Courier" FontSize="9" DockPanel.Dock="Right" />
<ContentPresenter Content="{Binding Path=DisplayName}" VerticalAlignment="Center" />
</DockPanel>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
</DataTemplate>
<DataTemplate x:Key="NestedCommandTemplate">
<ItemsControl ItemsSource="{Binding}" HorizontalAlignment="Right">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Command="{Binding Path=Command}" Content="{Binding Path=DisplayName}" IsDefault="{Binding Path=IsDefault}" IsCancel="{Binding Path=IsCancel}" Height="23" Width="75" Margin="4,4,0,0" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
<DataTemplate x:Key="CommandsTemplate">
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Command="{Binding Path=Command}" Content="{Binding Path=DisplayName}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
<ControlTemplate x:Key="HoverOverImage">
<Border Name="border" BorderThickness="0"
Background="Transparent">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="C:\Users\Teng\Documents\0515-392-team-orange\Team Magic Project\Images\Coalition Honor Guard.JPG" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<DataTemplate x:Key="HorizontalCommandsTemplate">
<ItemsControl ItemsSource="{Binding}" HorizontalAlignment="Right">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Command="{Binding Path=Command}" Content="{Binding Path=DisplayName}" Height="23" Width="75" Margin="4,4,0,0" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
<Style x:Key="MainHeaderStyle" TargetType="{x:Type HeaderedContentControl}">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Border Background="{StaticResource Brush_HeaderBackground}" BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Margin="4" Padding="4" SnapsToDevicePixels="True">
<TextBlock FontSize="14" FontWeight="Bold" Foreground="White" HorizontalAlignment="Center" Text="{TemplateBinding Content}" />
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type HeaderedContentControl}">
<DockPanel>
<ContentPresenter DockPanel.Dock="Top" ContentSource="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" />
<ContentPresenter ContentSource="Content" ContentTemplate="{TemplateBinding ContentTemplate}" />
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ListViewStyle" TargetType="{x:Type ListViewItem}">
<Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}" />
</Style>
<Style x:Key="ValidationStyleTextBox" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors).CurrentItem.ErrorContent}" />
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<DockPanel LastChildFill="true">
<TextBlock DockPanel.Dock="Right" VerticalAlignment="Center" Margin="5,0,0,0" Text="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors).CurrentItem.ErrorContent}" />
<Border Background="Red" DockPanel.Dock="Right" Margin="5,0,0,0" Width="20" Height="20" CornerRadius="10">
<TextBlock Text="!" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold" Foreground="White" />
</Border>
<AdornedElementPlaceholder Name="customAdorner" VerticalAlignment="Center">
<Border BorderBrush="Red" BorderThickness="1" />
</AdornedElementPlaceholder>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="PagingButton" TargetType="{x:Type Button}">
<Setter Property="FontFamily" Value="Webdings" />
<Setter Property="Height" Value="23" />
<Setter Property="Width" Value="45" />
<Setter Property="Margin" Value="4,0,4,0" />
</Style>
<Style x:Key="PagingTextBlock" TargetType="{x:Type TextBlock}">
<Setter Property="Margin" Value="4,0,4,0" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
I have a DataGrid which has its RowDetailsTemplate set to a ListBox. I have set the DataGridRowHeaderStyle as a ToggleButton as below:
<Style x:Key="DataGridRowHeaderStyle" TargetType="{x:Type DataGridRowHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="36"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border x:Name="bd" BorderBrush="Black" BorderThickness="1,0.5,1,1" Height="36" Width="20" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Margin="0" >
<ToggleButton Style="{StaticResource RowDetailExpanderWithPlusSymbol}"
Visibility="{Binding Converter={StaticResource RowDetailsVisibilityConverter}}"
Click="ToggleButton_Click"
MouseDoubleClick="ToggleButton_MouseDoubleClick">
<!--<ToggleButton.CommandParameter>
<MultiBinding Converter="{StaticResource SelectedCodesMultiBindingConverter}">
<Binding Path="."/>
<Binding RelativeSource="{RelativeSource Self}" Path="IsChecked"/>
</MultiBinding>
</ToggleButton.CommandParameter>-->
<ToggleButton.IsChecked>
<Binding RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type DataGridRow}}" Path="DetailsVisibility" Mode="TwoWay" >
<Binding.Converter>
<infConv:DetailsVisibilityToBool FalseToVisibility="Collapsed" />
</Binding.Converter>
</Binding>
</ToggleButton.IsChecked>
</ToggleButton>
</Border>
<Border Grid.Row="1" VerticalAlignment="Stretch"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am selecting the DataGridRow when I click the DataGridRowHeader toggle button as below:
private void ToggleButton_Click(object sender, RoutedEventArgs e)
{
try
{
ToggleButton tg = sender as ToggleButton;
UiUser user = tg.DataContext as UiUser;
DataGridRow dr = dg.ItemContainerGenerator.ContainerFromItem(user) as DataGridRow;
dr.IsSelected = true;
dr.Focus();
}
catch (Exception ex)
{
}
}
What I want is that the next time I select the ListBox item it should be selected and be active. However I have to click it two times to get make it active. Kindly Help.
EDIT - RowDetailsTemplate:
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<ContentControl DataContext="{Binding}">
<ListBox x:Name="lBox" ItemsSource="{Binding Similar}">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Blue"/>
<!-- Background of selected item when focussed -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Blue"/>
<!-- Background of selected item when not focussed -->
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="LightGray" />
</Style.Resources>
<!--<EventSetter Event="PreviewMouseDown" Handler="lBoxItem_PreviewMouseDown"/>-->
<EventSetter Event="MouseDoubleClick" Handler="LBox_MouseDoubleClick_Inside"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Blue"/>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<Border Margin="-3,-3,0,0" BorderBrush="Gray" Width="{Binding ElementName=NameDataGridColumn, Path=ActualWidth}" BorderThickness="1,0,0,1">
<TextBlock ToolTip="{Binding person, Converter={StaticResource FormattedNameConverter}}" Margin="5,0,0,0" TextTrimming="CharacterEllipsis"
Text="{Binding InternalUser.person, Converter={StaticResource FormattedNameConverter}}" VerticalAlignment="Center">
</TextBlock>
</Border>
<Border Margin="0,0,0,0" BorderBrush="Gray" Width="{Binding ElementName=OrgDataGridColumn, Path=ActualWidth}" BorderThickness="1,0,0,1">
<TextBlock HorizontalAlignment="Stretch" TextTrimming="CharacterEllipsis" ToolTip="{Binding Path=organizationsString}"
Text="{Binding Path=organizationsString}"
Margin="5,0,0,0" VerticalAlignment="Center"/>
</Border>
<Border Margin="0,0,0,0" BorderBrush="Gray" Width="{Binding ElementName=RolesDataGridColumn, Path=ActualWidth}" BorderThickness="1,0,0,1">
<TextBlock HorizontalAlignment="Stretch" Margin="5,0,0,0"
Text="{Binding Path=rolesString}" ToolTip="{Binding Path=rolesString}"
TextTrimming="CharacterEllipsis" VerticalAlignment="Center"
ToolTipService.Placement="Bottom" />
</Border>
<Border Margin="0,0,0,0" BorderBrush="Gray" Width="{Binding ElementName=NPIDDataGridColumn, Path=ActualWidth}" BorderThickness="1,0,0,1">
<TextBlock HorizontalAlignment="Stretch"
Text="{Binding InternalUser.npid}" ToolTip="{Binding InternalUser.npid}" TextTrimming="CharacterEllipsis" Margin="5,0,0,0" VerticalAlignment="Center"/>
</Border>
<Border Margin="0,0,0,0" BorderBrush="Gray" Width="{Binding ElementName=EmailDataGridColumn, Path=ActualWidth}" BorderThickness="1,0,0,1">
<TextBlock Text="{Binding InternalUser.principal.user_name}" ToolTip="{Binding InternalUser.principal.user_name}" VerticalAlignment="Center" TextTrimming="CharacterEllipsis"/>
</Border>
<Border Margin="0,0,0,0" BorderBrush="Gray" Width="{Binding ElementName=Status, Path=ActualWidth}" BorderThickness="1,0,0,1">
<TextBlock Text="{Binding ActiveStatus}" ToolTip="{Binding ActiveStatus}" Padding="4,0,0,0" VerticalAlignment="Center" TextTrimming="CharacterEllipsis" />
</Border>
<Border Margin="0,0,0,0" BorderBrush="Gray" Width="{Binding ElementName=DMUserName, Path=ActualWidth}" BorderThickness="1,0,0,1">
<TextBlock Text="{Binding InternalUser.directMailAccountId}"
VerticalAlignment="Center" TextTrimming="CharacterEllipsis"
ToolTip="{Binding InternalUser.directMailAccountId}"/>
</Border>
<Border Margin="0,0,0,0" BorderBrush="Gray" Width="{Binding ElementName=DMAccountStatus, Path=ActualWidth}" BorderThickness="1,0,0,1">
<TextBlock Margin="5,0,0,0" Text="{Binding DMStatus}"
HorizontalAlignment="Stretch" VerticalAlignment="Center" TextTrimming="CharacterEllipsis"
ToolTip="{Binding DMStatus}"/>
</Border>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ContentControl>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
I had the same problem: There is a DataGrid, and each row has a RowDetails - RowDetailsTemplate consists of two ListBoxes. ListBoxItem is a ToggleButton. So, I wanted to select toggle button by the first click.
First I founded this http://wpf.codeplex.com/wikipage?title=Single-Click%20Editing .
so, I updated my ListBox`s style
<Style x:Key="MyListBoxStyle" BasedOn="{StaticResource ToggleButtonListBoxStyle}" TargetType="{x:Type ListBox}">
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ListBoxItem}">
<EventSetter Event="PreviewMouseLeftButtonDown" Handler="ListBoxItem_PreviewMouseLeftButtonDown"></EventSetter>
</Style>
</Setter.Value>
</Setter>
And in CodeBehind :
private void ListBoxItem_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
var item = sender as ListBoxItem;
if (item != null)
{
var toggleButton = WpfUiHelper.FindVisualChild<ToggleButton>(item);
if (toggleButton != null)
{
if (toggleButton.IsChecked == false) toggleButton.IsChecked = true;
else toggleButton.IsChecked = false;
e.Handled = true;
}
}
}
And now when I clicks at toggle button in RowDetails for the fitst time - it selects or deselects.
Hope it will help.
I need to set change background color for list item when mouse is over. Here is my code:
<DataTemplate x:Key="ListBoxSubCategoryListTemplate" DataType="{x:Type ListBoxItem}">
<StackPanel>
<Button x:Name="btnSubCategoryList" Template="{StaticResource subCategoryListItems}"
Content="{Binding Path=sub_category_name}"
Background="Transparent"
Height="25"/>
</StackPanel>
</DataTemplate>
<ControlTemplate x:Key="subCategoryListItems" TargetType="{x:Type Button}">
<StackPanel FlowDirection="LeftToRight" Orientation="Horizontal" >
<TextBlock Width="150"
Height="{TemplateBinding Button.Height}"
x:Name="textBlockSubCategoryName"
Background="{TemplateBinding Button.Background}"
Text="{TemplateBinding Button.Content}"
FontWeight="Bold" />
<Image x:Name="img" Width="15" Height="15" Source="/ExpressFurnitureSystem;component/Images/edit.png" ToolTip="Click to edit"></Image>
</StackPanel>
</ControlTemplate>
Please help...How??
How about a Trigger such as:
<DataTemplate x:Key="ListBoxSubCategoryListTemplate" DataType="{x:Type ListBoxItem}">
<StackPanel>
<Button x:Name="btnSubCategoryList" Template="{StaticResource subCategoryListItems}"
Content="{Binding Path=sub_category_name}"
Background="Transparent"
Height="25"/>
</StackPanel>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="btnSubCategoryList" Property="Background" Value="Blue" />
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
I know a ControlTemplate is suppose to replace the default one entirely and this seems to work when not using a HierarchicalDataTemplate. However using a HierarchicalDataTemplate my control template seems to be partially used - the TreeViewItem is the control I specified containing an image etc. BUT still appears as a node with the default expander to show its children - not specified in my Template (I want my children to always be shown, but thats beside the point). It looks like this:
<TreeView>
<TreeView.Resources>
<Style x:Key="MyNodeStyle" TargetType="TreeViewItem">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsExpanded" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeViewItem">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<Border CornerRadius="8" BorderThickness="1" Padding="2" Margin="4, 6" BorderBrush="{StaticResource itemBorderBrush}" Background="{StaticResource itemBackgroundBrush}" x:Name="border">
<DockPanel LastChildFill="False">
<StackPanel Orientation="Vertical" DockPanel.Dock="Top" Height="80">
<TextBlock Text="{Binding Path=DisplayValue}" HorizontalAlignment="Center" FontWeight="Bold"/>
<Image Source="MyNode.png" Stretch="None"/>
<TextBlock Text="{Binding Path=Notes}" TextWrapping="Wrap" Width="150"/>
</StackPanel>
</DockPanel>
</Border>
<ItemsPresenter />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" IsItemsHost="True" HorizontalAlignment="Center" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
<HierarchicalDataTemplate DataType="{x:Type src:MyNode}" ItemsSource="{Binding Path=Children}" >
<TreeViewItem Style="{StaticResource MyNodeStyle}"/>
</HierarchicalDataTemplate>
</TreeView.Resources>
<!-- Arrange the root items horizontally. -->
<TreeView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel IsItemsHost="True" Orientation="Horizontal" HorizontalAlignment="Center" />
</ItemsPanelTemplate>
</TreeView.ItemsPanel>
</TreeView>
For some reason only when using a HierarchicalDataTemplate the ItemsPanel and Setter does not seem to be applied and the children are presented in the default expander. How did that expander get there when I am using my own ControlTemplate!?##$
I don't think you should put the TreeViewItem inside your HierarchicalDataTemplate.
Try this:
<HierarchicalDataTemplate DataType="{x:Type src:MyNode}" ItemsSource="{Binding Path=Children}" >
<StackPanel Orientation="Vertical" DockPanel.Dock="Top" Height="80">
<TextBlock Text="{Binding Path=DisplayValue}" HorizontalAlignment="Center" FontWeight="Bold"/>
<Image Source="MyNode.png" Stretch="None"/>
<TextBlock Text="{Binding Path=Notes}" TextWrapping="Wrap" Width="150"/>
</StackPanel>
</HierarchicalDataTemplate>
Now, your template becomes:
<ControlTemplate TargetType="TreeViewItem">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<Border CornerRadius="8" BorderThickness="1" Padding="2" Margin="4, 6" x:Name="border">
<DockPanel LastChildFill="False">
<ContentPresenter ContentSource="Header" />
</DockPanel>
</Border>
<ItemsPresenter />
</StackPanel>
</ControlTemplate>
Is that how you intended it to look?
Edit: the original expanders are probably there because you only use your style for child items - make your style the ItemContainerStyle for the treeview:
<Window.Resources>
<Style x:Key="MyNodeStyle" TargetType="TreeViewItem">
....
<TreeView ItemContainerStyle="{StaticResource MyNodeStyle}">