Border widths displays inconsistently - wpf

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>

Related

WPF nested template binding in itemscontrol

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>

WPF ListView IsSelected Set Border Opacity

I have a listview and padding must be 2 and color's getting system theme (using windows 8.1) but look very ugly.
<ListView.Resources>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border Name="Border" Padding="2" SnapsToDevicePixels="True">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="{x:Static SystemParameters.WindowGlassBrush}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="IsSelected" Value="true"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.Resources>
TIP: I used CornerRadius = 10 in DataTemplate.
<DataTemplate x:Key="DT">
<StackPanel Orientation="Vertical">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50*"/>
<RowDefinition Height="50*"/>
</Grid.RowDefinitions>
<Border Background="{Binding HEXRengi}" MinHeight="100" MinWidth="150" Height="100" Width="150" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.RowSpan="2" CornerRadius="10"/>
<ToggleButton x:Name="HEXRenkAl" Style="{DynamicResource DüzRenkPaletiDüğmeBiçimi}" Grid.Row="0" Click="HEXRenkAl_Click">
<Border Background="{Binding HEXRengi}" MinHeight="50" MinWidth="150" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="10">
<TextBox Text="{Binding HEXRengi}" Style="{DynamicResource SeçilebilirAmaYazılamazMetinKutusu}" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Justify" TextWrapping="Wrap" Foreground="White" FontFamily="Century Gothic" FontSize="16" FontWeight="Bold"/>
</Border>
</ToggleButton>
<ToggleButton x:Name="RGBRengiAl" Style="{DynamicResource DüzRenkPaletiDüğmeBiçimi}" Grid.Row="1" Click="RGBRengiAl_Click">
<Border Background="{Binding HEXRengi}" MinHeight="50" MinWidth="150" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="05">
<TextBox Text="{Binding RGBRengi}" Style="{DynamicResource SeçilebilirAmaYazılamazMetinKutusu}" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Justify" TextWrapping="Wrap" Foreground="White" FontFamily="Century Gothic" FontSize="16" FontWeight="Bold"/>
</Border>
</ToggleButton>
</Grid>
</StackPanel>
</DataTemplate>
Look like this;
And IsSelected;
When i used setter property opacity value apply all item. Just should apply on border, not all item.
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="{x:Static SystemParameters.WindowGlassBrush}"/>
<Setter TargetName="Border" Property="Opacity" Value=".5"/>
</Trigger>
How can i do it? Thanks for advices.
When i used setter property opacity value apply all item. Just should apply on border, not all item.
If you are wondering why opacity value is applying to all items, that is because you have named "Border" and you are targeting by name in your Trigger.
<Border Name="Border" Padding="2" SnapsToDevicePixels="True">
<ContentPresenter />
</Border>

Cannot handle button tap in ListView ItemTemplate

I have a ListView with custom ItemContainer and ItemTemplate. ItemTemplate contains, among other controls, a button. Whenever I click or tap a button ListView a whole item is selected, in contrast to the expected button click or tap event to be fired. I've noticed that the only time the button is clickable is when I position mouse cursor at the top border of the button (whichi is also the only time I am getting the default mouse over effect).
Here is the XAML:
<Style TargetType="ListView" x:Key="SalesOrdersListViewStyle">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="SelectionMode" Value="Single" />
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<!--<Setter Property="Background" Value="Transparent"/>-->
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="Padding" Value="12,6"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
Foreground="{StaticResource HighlightPressedBrush}"
CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
ContentMargin="{TemplateBinding Padding}"
CheckMode="Inline"
ContentTransitions="{TemplateBinding ContentTransitions}"
CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
PointerOverForeground="{StaticResource HighlightPressedBrush}"
PressedBackground="{ThemeResource HighlightAlternativePressedBrush}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
PointerOverBackground="{ThemeResource HighlightPointerOverBrush}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
SelectedPressedBackground="{ThemeResource ControlBackgroundDarkBrush}"
SelectionCheckMarkVisualEnabled="True"
SelectedForeground="#FFFFFFFF"
SelectedPointerOverBackground="{ThemeResource HighlightAlternativePointerOverBrush}"
SelectedBackground="{ThemeResource HighlightPressedBrush}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock
x:Uid="SalesOrderNumber"
Grid.Row="0" Grid.Column="1" />
<TextBlock
Grid.Row="0" Grid.Column="2"
Text="{Binding Number}" />
<!-- TEST BUTTON THAT CANNOT BE TAPPED -->
<Button
Grid.Row="0" Grid.RowSpan="4" Grid.Column="3"
HorizontalAlignment="Left" VerticalAlignment="Center"
Background="Red"
IsHitTestVisible="True"
Content="TEST" />
<TextBlock
x:Uid="DeliveryMode"
Grid.Row="1" Grid.Column="1" />
<TextBlock
Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2"
Text="{Binding DeliveryMode}" /
<TextBlock
x:Uid="ShippingDate"
Grid.Row="2" Grid.Column="1" />
<TextBlock
Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2"
Text="{Binding ShippingDate}" />
<TextBlock
x:Uid="ProjectNumber"
Grid.Row="3" Grid.Column="1" />
<TextBlock
Grid.Row="3" Grid.Column="2" Grid.ColumnSpan="2"
Text="{Binding ProjectNumber}" />
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
How do I make the button click or tap event to fire instead of selecting an item?
Note: I just commented out the entire <Setter Property="ItemContainerStyle"> and the issue is still there.
The problem is in you TextBlocks with Grid.Column="2" Grid.ColumnSpan="2". Set ColumSpan to 1 and it will work.
I am a total newbie but couldn't you just add a Button click event?
<Button
Grid.Row="0" Grid.RowSpan="4" Grid.Column="3"
HorizontalAlignment="Left" VerticalAlignment="Center"
Background="Red"
IsHitTestVisible="True"
Click"btn_Click"
Content="TEST" />
And in the code:
private void btn_Click(object sender, RoutedEventArgs e)
{
// Do stuff
}
I hope I don't talk bullsh*t here but I don't see your click event anywhere.

Issues with ListBoxItem selection when ItemContainerStyle was changed

I changed the style of ItemContainerStyle and that was the result:
I enjoyed the result, but when testing usability I noticed that when I select a region without text or image (red region on image) the "IsSelected" doesn't fire and doesn't select the item. Without the style change, that issue not occur..
Someone know the reason e how fix that issue?
Here is my xaml code:
<DockPanel>
<ListBox x:Name="lvCustomers" Margin="0" BorderThickness="0" SelectionMode="Single"
VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Auto" Background="{x:Null}" >
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid>
<Border Name="BackgroundBorder" SnapsToDevicePixels="True"/>
<Border Name="Border">
<ContentPresenter />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="BackgroundBorder" Property="Background" Value="Black" />
<Setter TargetName="BackgroundBorder" Property="Opacity" Value="0.5" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsFocused" Value="False"/>
</MultiTrigger.Conditions>
<Setter TargetName="BackgroundBorder" Property="Background" Value="Black" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel Margin="10,0,0,5" HorizontalAlignment="Stretch">
<DockPanel Margin="0,10,10,10" DockPanel.Dock="Left" HorizontalAlignment="Stretch">
<TextBlock FontWeight="Bold" Foreground="White" x:Name="customerDetailsName" Text="{Binding Name}" FontSize="16" DockPanel.Dock="Top"/>
<DockPanel DockPanel.Dock="Top">
<TextBlock Foreground="White" x:Name="customerDetailsCityContent" Text="{Binding City}" FontSize="14" />
<TextBlock Foreground="White" x:Name="customerDetailsBarraContent" Text="-" FontSize="12" />
<TextBlock Foreground="White" x:Name="customerDetailsStateContent" Text="{Binding Region}" FontSize="14" />
</DockPanel>
<TextBlock Foreground="White" x:Name="customerDetailsCNPJContent" Text="{Binding CNPJ}" FontSize="14" />
</DockPanel>
<Image x:Name="customerImageStatus" Source="{Binding StatusImage}" Width="22" Height="22" Margin="10,0,25,0" DockPanel.Dock="Right" HorizontalAlignment="Right" />
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DockPanel>
Thanks in advance.
Please try by setting Background="Transparent" or IsHitTestVisible="True" to grid and border in controltemplate.As to achieve hit test for an transparent object, you should set the background to transparent.

WPF ListBox items with template become invisible after grouping

I have ObservableCollection with items which I want to display in a ListBox.
Also I write a template for ListboxItem for correct display of my collection.
On this stage everything works fine.
in .cs
Sensors = new ObservableCollection<Sensor>();
...
lstBox.ItemsSource = Sensors;
in .xaml
...
<DataTemplate x:Key="SensorTileTemplate">
<Border>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" Grid.Row="0" Grid.ColumnSpan="3"></TextBlock>
<Image Source="{Binding ImageModel.ImgSource}" Style="{StaticResource ImageGlowStyle}" Height="72" Grid.Row="1" Grid.Column="0"></Image>
<StackPanel Grid.Row="1" Grid.Column="1" Margin="5">
<TextBlock Text="IP:"></TextBlock>
<TextBlock Text="Port:"></TextBlock>
<TextBlock Text="Command port:"></TextBlock>
</StackPanel>
<StackPanel Grid.Row="1" Grid.Column="2" Margin="5">
<TextBlock Text="{Binding DeviceAddress}"></TextBlock>
<TextBlock Text="{Binding DeviceDataPort}"></TextBlock>
<TextBlock Text="{Binding DeviceControlPort}"></TextBlock>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
<Style x:Key="ContainerStyle">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="ListBoxItem.Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
...
<ListBox Name="lstBox" Focusable="False"
SelectionChanged="lstBox_SelectionChanged"
HorizontalContentAlignment="Stretch"
ItemTemplate="{StaticResource SensorTileTemplate}"
ItemContainerStyle="{StaticResource ContainerStyle}">
</ListBox>
The problem appears when I need to group certain items using expander as a group container.
in .cs
...
ICollectionView view = CollectionViewSource.GetDefaultView(Sensors);
view.GroupDescriptions.Add(new PropertyGroupDescription("GroupNumber"));
lstBox.ItemsSource = view;
...
in .xaml
<!--Same Template and Style-->
...
...
<Style x:Key="GroupContainerStyle" TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander IsExpanded="True">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Group #" />
<TextBlock Text="{Binding Name}" />
</StackPanel>
</Expander.Header>
<Expander.Content>
<ItemsPresenter />
</Expander.Content>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
...
<ListBox Name="lstBox" Focusable="False"
SelectionChanged="lstBox_SelectionChanged"
HorizontalContentAlignment="Stretch"
ItemTemplate="{StaticResource SensorTileTemplate}"
ItemContainerStyle="{StaticResource ContainerStyle}">
<ListBox.GroupStyle>
<GroupStyle ContainerStyle="{StaticResource GroupContainerStyle}" />
</ListBox.GroupStyle>
</ListBox>
This code works and groups items but items become invisible.
So without grouping items display correctly but with grouping expanders show nothing in it.
I think there is something about ItemsPresenter in Expander but can't figure out what.
The problem was in one third party theme I use in my app. That theme has a ListBox template like:
<Style TargetType="{x:Type ListBox}">
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<Grid>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" Background="{DynamicResource ControlBackgroundBrush}" />
<ScrollViewer Margin="1" Style="{DynamicResource NuclearScrollViewer}" Focusable="false" Background="{x:Null}">
<StackPanel Margin="1,1,1,1" IsItemsHost="true" />
</ScrollViewer>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border" />
<Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="Border" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So I use an ItemsPresenter instead of the StackPanel in that template and everything works now.

Resources