WPF nested template binding in itemscontrol - wpf

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>

Related

AvalonDock DocumentHeaderTemplate not working for Floating Windows

In AvalonDock we use a LayoutDocumentExtended to add some AdditionalInformation (not only a string in our project) in the Title.
In this testcode, we set the DocumentHeaderTemplate as following.
<xcad:DockingManager.DocumentHeaderTemplate>
<DataTemplate DataType="{x:Type local:LayoutDocumentExtended}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title, StringFormat={}{0} ---- }" />
<TextBlock Text="{Binding AdditionalString}" />
</StackPanel>
</DataTemplate>
</xcad:DockingManager.DocumentHeaderTemplate>
<xcad:LayoutRoot>
<xcad:LayoutPanel Orientation="Vertical" >
<xcad:LayoutDocumentPane>
<xcad:LayoutDocumentPane.Children>
<local:LayoutDocumentExtended Title="Test1" AdditionalString="848451"> </local:LayoutDocumentExtended>
<local:LayoutDocumentExtended Title="Test2" AdditionalString="1"></local:LayoutDocumentExtended>
</xcad:LayoutDocumentPane.Children>
</xcad:LayoutDocumentPane>
</xcad:LayoutPanel>
</xcad:LayoutRoot>
If i undock the LayoutDocument as a FloatingWindow, only the Title shows up and not the AdditionalString. As soon as I redock it again, the AdditionalString is shown again. Does someone have an idea, how I can set a configurable DocumentHeaderTemplate also on FloatingWindows?
The LayoutDocumentFloatingWindowControl control uses the WindowChrome to define the title bar. You probably want to modify the title bar of the chrome to allow it to show additional vertical content i.e. extra lines. Alternatively, consider to show the extra information in parenthesis and in the same single line.
Override the DocumentTitleTemplate to layout the title:
<DataTemplate x:Key="DocumentTitleTemplate">
<TextBlock Text="{Binding Title}"
TextTrimming="CharacterEllipsis">
</TextBlock>
</DataTemplate>
The override the LayoutDocumentFloatingWindowControl style to modify the title bar height:
<Style x:Key="{x:Type avalonDockControls:LayoutDocumentFloatingWindowControl}"
TargetType="{x:Type avalonDockControls:LayoutDocumentFloatingWindowControl}">
<Setter Property="Background"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="BorderBrush"
Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" />
<Setter Property="BorderThickness"
Value="3" />
<Setter Property="shell:WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome ResizeBorderThickness="10"
CaptionHeight="16"
CornerRadius="3,3,3,3"
GlassFrameThickness="0"
ShowSystemMenu="False" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type avalonDockControls:LayoutDocumentFloatingWindowControl}">
<AdornerDecorator>
<Grid>
<Border x:Name="WindowBorder"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}">
<Grid Margin="3">
<Grid.RowDefinitions>
<RowDefinition MinHeight="16"
Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid UseLayoutRounding="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter Content="{Binding Model.RootDocument, RelativeSource={RelativeSource TemplatedParent}}"
ContentTemplate="{Binding Model.Root.Manager.DocumentTitleTemplate, RelativeSource={RelativeSource TemplatedParent}}"
ContentTemplateSelector="{Binding Model.Root.Manager.DocumentTitleTemplateSelector, RelativeSource={RelativeSource TemplatedParent}}" />
<Button shell:WindowChrome.IsHitTestVisibleInChrome="True"
Focusable="False"
Visibility="{Binding IsMaximized, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource InverseBoolToVisibilityConverter}}"
Style="{DynamicResource {x:Static ToolBar.ButtonStyleKey}}"
Command="{x:Static shell:SystemCommands.MaximizeWindowCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent}}"
ToolTip="{x:Static avalonDockProperties:Resources.Window_Maximize}"
Grid.Column="2">
<Image Source="{xctk:ImageUri AssemblyName=Xceed.Wpf.AvalonDock, Path=Themes/Generic/Images/PinMaximize.png}">
</Image>
</Button>
<Button shell:WindowChrome.IsHitTestVisibleInChrome="True"
Focusable="False"
Visibility="{Binding IsMaximized, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BoolToVisibilityConverter}}"
Style="{DynamicResource {x:Static ToolBar.ButtonStyleKey}}"
Command="{x:Static shell:SystemCommands.RestoreWindowCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent}}"
ToolTip="{x:Static avalonDockProperties:Resources.Window_Restore}"
Grid.Column="2">
<Image Source="{xctk:ImageUri AssemblyName=Xceed.Wpf.AvalonDock, Path=Themes/Generic/Images/PinRestore.png}">
</Image>
</Button>
<Button shell:WindowChrome.IsHitTestVisibleInChrome="True"
Focusable="False"
Style="{DynamicResource {x:Static ToolBar.ButtonStyleKey}}"
Command="{Binding Path=RootDocumentLayoutItem.CloseCommand, RelativeSource={RelativeSource TemplatedParent}}"
ToolTip="{x:Static avalonDockProperties:Resources.Document_Close}"
Visibility="{Binding Path=IsEnabled, RelativeSource={RelativeSource Self}, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}"
Grid.Column="3">
<Image Source="{xctk:ImageUri AssemblyName=Xceed.Wpf.AvalonDock, Path=Themes/Generic/Images/PinClose.png}">
</Image>
</Button>
</Grid>
<ContentPresenter Content="{TemplateBinding Content}"
Grid.Row="1" />
</Grid>
</Border>
</Grid>
</AdornerDecorator>
<ControlTemplate.Triggers>
<Trigger Property="WindowState"
Value="Maximized">
<Setter Property="Padding"
Value="3"
TargetName="WindowBorder" />
</Trigger>
<DataTrigger Binding="{Binding Model.RootDocument.IsActive, RelativeSource={RelativeSource Self}}"
Value="True">
<Setter TargetName="WindowBorder"
Property="BorderBrush"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Bindind resources control with content control WPF

I've just started learning WPF. However, now I'm having issues with my UI (which remains empty). This is the code I'm using; What I'm trying to do is to display the properties of the River in the UI.
<Window.Resources>
<local:River x:Key="theRiver" Name="Colorado River" MilesLong="1450" />
<StackPanel x:Key="stackey" DataContext="theRiver">
<StackPanel.Resources>
<DataTemplate x:Key="key" DataType="{x:Type local:River}" >
<Border x:Name="bdr" BorderBrush="Blue" BorderThickness="3" CornerRadius="12" Padding="2">
<Grid Margin="5">
<TextBlock x:Name="txt" FontFamily="Bookman old style">
<Run Text="The"/>
<TextBlock Text="{Binding Name}"/>
<Run Text="is"/>
<TextBlock Text="{Binding MilesLong}" />
<Run Text="miles long." />
</TextBlock>
</Grid>
</Border>
<DataTemplate.Triggers>
<Trigger SourceName="bdr" Property="IsMouseOver" Value="True">
<Setter TargetName="bdr" Property="Background" Value="Red"/>
<Setter TargetName="txt" Property="Foreground" Value="Green"/>
<Setter TargetName="bdr" Property="CornerRadius" Value="40"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</StackPanel.Resources>
</StackPanel>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!--<StackPanel Grid.Column="1" Grid.Row="1" Margin="10" Background="Gold" DataContext="{StaticResource theRiver}>-->
<ContentControl Content="{StaticResource ResourceKey=stackey}" Grid.Column="1" Grid.Row="1" Margin="10" Background="Gold" />
</Grid>
There are a few issues in your code.
<StackPanel x:Key="stackey" DataContext="theRiver">
<StackPanel.Resources>
<DataTemplate x:Key="key" DataType="{x:Type local:River}" >
Here you want to provide an unnamed DataTemplate for the type that will be loaded into the ContentControl. The StackPanel wrapper here is unnecessary, as is the x:Key on the DataTemplate.
<ContentControl Content="{StaticResource ResourceKey=stackey}"
This says that the source for the ContentControl's content is the StackPanel you declared in your resources, rather than an instance of River.
Corrected/working code looks like:
<Window.Resources>
<local:River x:Key="theRiver" Name="Colorado River" MilesLong="1450" />
<DataTemplate DataType="{x:Type local:River}">
<Border x:Name="bdr"
BorderBrush="Blue"
BorderThickness="3"
CornerRadius="12"
Padding="2">
<Grid Margin="5">
<TextBlock x:Name="txt" FontFamily="Bookman old style">
<Run Text="The" />
<TextBlock Text="{Binding Name}" />
<Run Text="is" />
<TextBlock Text="{Binding MilesLong}" />
<Run Text="miles long." />
</TextBlock>
</Grid>
</Border>
<DataTemplate.Triggers>
<Trigger SourceName="bdr" Property="IsMouseOver" Value="True">
<Setter TargetName="bdr" Property="Background" Value="Red" />
<Setter TargetName="txt" Property="Foreground" Value="Green" />
<Setter TargetName="bdr" Property="CornerRadius" Value="40" />
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!-- <StackPanel Grid.Column="1" Grid.Row="1" Margin="10" Background="Gold" DataContext="{StaticResource theRiver}> -->
<ContentControl Grid.Row="1"
Grid.Column="1"
Margin="10"
Background="Gold"
Content="{Binding Source={StaticResource theRiver}}" />
</Grid>
Just define the DataTemplate in Windows.Resources like below (remove the Stackpanel):
<DataTemplate x:Key="stackey" DataType="{x:Type local:River}" >
<Border x:Name="bdr" BorderBrush="Blue" BorderThickness="3" CornerRadius="12" Padding="2">
<Grid Margin="5">
<TextBlock x:Name="txt" FontFamily="Bookman old style">
<Run Text="The"/>
<TextBlock Text="{Binding Name}"/>
<Run Text="is"/>
<TextBlock Text="{Binding MilesLong}" />
<Run Text="miles long." />
</TextBlock>
</Grid>
</Border>
<DataTemplate.Triggers>
<Trigger SourceName="bdr" Property="IsMouseOver" Value="True">
<Setter TargetName="bdr" Property="Background" Value="Red"/>
<Setter TargetName="txt" Property="Foreground" Value="Green"/>
<Setter TargetName="bdr" Property="CornerRadius" Value="40"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
and then bind your ContentControl like
<ContentControl Grid.Column="1" Grid.Row="1" DataContext="{StaticResource theRiver}" Content="{StaticResource theRiver}" ContentTemplate="{StaticResource stackey}" Margin="10" Background="Gold" />

Border widths displays inconsistently

Lets take this as example. I now have a total of 8 textboxes. I use a static resource style to make sure they all have the exact same styling set. But notice how some of the textboxes have a bottom border line and others don't. Why does this happen?
Here's the code
<Style x:Key="AddressTextBox" TargetType="TextBox">
<Setter Property="MinWidth" Value="230"></Setter>
<Setter Property="MaxWidth" Value="260"></Setter>
<Setter Property="MaxLength" Value="45"></Setter>
<Setter Property="Margin" Value="1"></Setter>
<Setter Property="BorderThickness" Value="1,1,1,1"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Padding" Value="1,2,0,1"/>
<Setter Property="BorderBrush" Value="Gray"></Setter>
<Setter Property="Height" Value="20"></Setter>
</Style>
<DockPanel>
<StackPanel>
<Grid Margin="5">
<StackPanel>
<DockPanel Height="Auto">
<TextBlock Width="50" Margin="7">Postal</TextBlock>
<TextBox Style="{StaticResource AddressTextBox}"></TextBox>
</DockPanel>
<DockPanel Height="Auto">
<TextBlock Width="50" Margin="7"></TextBlock>
<TextBox Style="{StaticResource AddressTextBox}"></TextBox>
</DockPanel>
<DockPanel Height="Auto">
<TextBlock Width="50" Margin="7"></TextBlock>
<TextBox Style="{StaticResource AddressTextBox}"></TextBox>
</DockPanel>
<DockPanel Height="Auto">
<TextBlock Width="50" Margin="7"></TextBlock>
<TextBox Style="{StaticResource AddressTextBox}"></TextBox>
</DockPanel>
<DockPanel Height="10"></DockPanel>
<DockPanel Height="Auto">
<TextBlock Width="50" Margin="7">Street</TextBlock>
<TextBox Style="{StaticResource AddressTextBox}"></TextBox>
</DockPanel>
<DockPanel Height="Auto">
<TextBlock Width="50" Margin="7"></TextBlock>
<TextBox Style="{StaticResource AddressTextBox}"></TextBox>
</DockPanel>
<DockPanel Height="Auto">
<TextBlock Width="50" Margin="7"></TextBlock>
<TextBox Style="{StaticResource AddressTextBox}"></TextBox>
</DockPanel>
<DockPanel Height="Auto">
<TextBlock Width="50" Margin="7"></TextBlock>
<TextBox Style="{StaticResource AddressTextBox}"></TextBox>
</DockPanel>
</StackPanel>
</Grid>
</StackPanel>
</DockPanel>
Even though your layout is very inefficient, its not the problem as all above comments suggest. Nothing to do with SnapToDevicePixels, Padding, Margins, etc. It is part of TextBox's control style. It seems that if you set BorderWidth bigger than default, it sticks on all corners, but if you go below it doesn't. If you extract the TextBox's template you can see its border and styling. So in order to "beat" this irregularity, instead of trying to sort of indirectly manipulate the TextBox's Border properties in your style you need to override its template. Then manipulate it's Border directly in the Template.
Here's a the style that will work(I plugged in your setters into it) :
<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="LightGray"/>
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="Gray"/>
<SolidColorBrush x:Key="EnabledBackgroundBrush" Color="White"/>
<Style x:Key="AddressTextBox" TargetType="{x:Type TextBoxBase}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="MinWidth" Value="230"/>
<Setter Property="MaxWidth" Value="260"/>
<Setter Property="Margin" Value="1"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Padding" Value="1,2,0,1"/>
<Setter Property="Height" Value="20"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border Name="Border" CornerRadius="2" Padding="2" Background="{StaticResource EnabledBackgroundBrush}"
BorderBrush="Gray" BorderThickness="1" >
<ScrollViewer Margin="0" x:Name="PART_ContentHost"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}"/>
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBackgroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
also, just a tip about your layout. To minimize inefficiencies, I would use the Grid:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="Postal"/>
<TextBox Grid.Column="1" Style="{StaticResource AddressTextBox}"/>
<TextBlock Grid.Row="1" />
<TextBox Grid.Row="1" Grid.Column="1" Style="{StaticResource AddressTextBox}"/>
<TextBlock Grid.Row="2" />
<TextBox Grid.Row="2" Grid.Column="1" Style="{StaticResource AddressTextBox}"/>
<TextBlock Grid.Row="3" />
<TextBox Grid.Row="3" Grid.Column="1" Style="{StaticResource AddressTextBox}"/>
<TextBlock Grid.Row="4" Text="Street" Margin="7,10,7,7"/>
<TextBox Grid.Row="4" Grid.Column="1" Style="{StaticResource AddressTextBox}"/>
<TextBlock Grid.Row="5"/>
<TextBox Grid.Row="5" Grid.Column="1" Style="{StaticResource AddressTextBox}"/>
<TextBlock Grid.Row="6"/>
<TextBox Grid.Row="6" Grid.Column="1" Style="{StaticResource AddressTextBox}"/>
<TextBlock Grid.Row="7"/>
<TextBox Grid.Row="7" Grid.Column="1" Style="{StaticResource AddressTextBox}"/>
</Grid>

Wpf Popup loses focus but stays opened

I have the following Popup:
<Popup Name="popupBind"
AllowsTransparency="True"
Helpers:FocusHelper.IsFocused="{Binding RelativeSource={RelativeSource Self},
Path=IsOpen,
Mode=OneWay}"
HorizontalOffset="-30"
IsOpen="{Binding IsBindingBegun,
Mode=TwoWay}"
Placement="Bottom"
PlacementTarget="{Binding ElementName=bindButton}"
StaysOpen="False"
>
<Border Background="{DynamicResource {x:Static Styles:CommonStyles.ButtonsPanelBackgroundKey}}"
BorderBrush="Black"
BorderThickness="1"
Padding="0">
<StackPanel HorizontalAlignment="Stretch">
<StackPanel.Resources>
<TemplateSelectors:VersionRangeDataTemplateSelector x:Key="VersionRangeDataTemplateSelector" />
<Converters:RangeToVisibilityConverter x:Key="RangeToVisibilityConverter" />
</StackPanel.Resources>
<StackPanel Margin="5,5,5,2"
HorizontalAlignment="Stretch"
Orientation="Horizontal">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="5" />
</Style>
</StackPanel.Resources>
<Button Command="{Binding BindCommand}"
>
</Button>
<Button Command="{Binding BindCommand}"
>
</Button>
<Button Command="{Binding BindCommand}"
>
</Button>
<Button Command="{Binding BindCommand}"
>
</Button>
</StackPanel>
<ItemsControl Margin="10,2,5,5"
Focusable="False"
Grid.IsSharedSizeScope="True"
ItemTemplateSelector="{StaticResource VersionRangeDataTemplateSelector}"
ItemsSource="{Binding Path=VersionsVm.TempRanges}">
<ItemsControl.Resources>
<Style TargetType="CheckBox">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Padding" Value="0" />
</Style>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="14" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Padding" Value="2" />
</Style>
<DataTemplate x:Key="TwoDistinctVersionsRangeTemplateKey">
<Grid Margin="2,4" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="_1" />
<ColumnDefinition Width="Auto" SharedSizeGroup="_2" />
<ColumnDefinition Width="Auto" SharedSizeGroup="_3" />
<ColumnDefinition Width="Auto" SharedSizeGroup="_4" />
<ColumnDefinition Width="Auto" SharedSizeGroup="_5" />
<ColumnDefinition Width="Auto" SharedSizeGroup="_6" />
<ColumnDefinition Width="Auto" SharedSizeGroup="_7" />
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="0" IsChecked="{Binding IncludeStartEdge, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<TextBlock Grid.Column="1" Margin="2,0,5,0">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding IncludeStartEdge}" Value="True">
<Setter Property="Text" Value="[" />
</DataTrigger>
<DataTrigger Binding="{Binding IncludeStartEdge}" Value="False">
<Setter Property="Text" Value="(" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Grid.Column="2"
HorizontalAlignment="Left"
Text="{Binding FromVersionName}"
TextAlignment="Left" />
<TextBlock Grid.Column="3"
Width="10"
Margin="5,0"
HorizontalAlignment="Center"
Text="-"
TextAlignment="Center" />
<TextBlock Grid.Column="4"
HorizontalAlignment="Left"
Text="{Binding ToVersionName}"
TextAlignment="Left" />
<TextBlock Grid.Column="5" Margin="5,0,2,0">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding IncludeEndEdge}" Value="True">
<Setter Property="Text" Value="]" />
</DataTrigger>
<DataTrigger Binding="{Binding IncludeEndEdge}" Value="False">
<Setter Property="Text" Value=")" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<CheckBox Grid.Column="6" IsChecked="{Binding IncludeEndEdge, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="FixedVersionRangeTemplateKey">
<StackPanel>
<TextBlock Margin="2,4"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="{Binding FromVersionName}"
TextAlignment="Left" />
<StackPanel>
<StackPanel.Visibility>
<MultiBinding Converter="{StaticResource RangeToVisibilityConverter}">
<MultiBinding.Bindings>
<Binding />
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=UserControl}" />
</MultiBinding.Bindings>
</MultiBinding>
</StackPanel.Visibility>
<RadioButton Command="{Binding RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType=UserControl},
Path=DataContext.VersionsVm.ChangeTempRangeTypeCommand}"
Content="<" />
<RadioButton Command="{Binding RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType=UserControl},
Path=DataContext.VersionsVm.ChangeTempRangeTypeCommand}"
Content="<=" />
<RadioButton Command="{Binding RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType=UserControl},
Path=DataContext.VersionsVm.ChangeTempRangeTypeCommand}"
Content="="
IsChecked="True" />
<RadioButton Command="{Binding RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType=UserControl},
Path=DataContext.VersionsVm.ChangeTempRangeTypeCommand}"
Content=">=" />
<RadioButton Command="{Binding RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType=UserControl},
Path=DataContext.VersionsVm.ChangeTempRangeTypeCommand}"
Content=">" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ItemsControl.Resources>
</ItemsControl>
</StackPanel>
</Border>
</Popup>
I have a very strange issue with it.
When I hit Tab, Left or Right focus leaves popup and goes to the parent window. Popus stays opened.
I do not know why this happens. But I've got broken keyboard navigation.
The only thing I can suspect to be the reason is that parent of Popup is UserControl hosted inside winforms ElementHost.
I have no idea how to debug this problem so I appreciate any helpful hints.
Thank you in advance.
Having a Binding on IsOpen can override the StaysOpen behavior. I can't tell without seeing more but if that IsOpen binding is persisting a True value from its source that would keep the Popup open no matter what happens with the focus.

Change ListBoxItem Background Color when mouse is over on the listBoxItem

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>

Resources