WPF ListBox Image Selected the saga continues - wpf

Ok in my ListBox scrolling images w/ text, etc. the saga continues. When I click one of the items, to select it, that runs a process to open a web browser and go to a specific URL. The problem I'm having now is that when the WPF app loses focus, and the web browser opens, the item clicked inside the listbox turns white. Here's the whole ListBox XAML. I have set the selected items to transparent, so does this have something to do with the WPF app losing focus?
Is there something I can add tom the code that runs the process to open the web browser to set focus back to the WPF app?
Thanks.
<ListBox ItemsSource="{Binding Source={StaticResource WPFApparelCollection}}" Margin="61,-8,68,-18" ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollBarVisibility="Hidden" SelectionMode="Single" x:Name="list1" MouseLeave="List1_MouseLeave" MouseMove="List1_MouseMove" Style="{DynamicResource ListBoxStyle1}" Background="Transparent" BorderThickness="0">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
<Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
<Setter Property="Padding" Value="20,10,20,10" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" SnapsToDevicePixels="true" Background="Transparent" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" TargetName="Bd" Value="Transparent" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true" />
<Condition Property="Selector.IsSelectionActive" Value="false" />
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" IsItemsHost="True" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Grid>
<Image Source="{Binding Image}" MouseLeave="Image_MouseLeave" MouseEnter="Image_MouseEnter" Cursor="Hand" Tag="{Binding Link}" MouseLeftButtonDown="Image_MouseLeftButtonDown" VerticalAlignment="Top" HorizontalAlignment="Left"></Image>
</Grid>
<Label Content="{Binding Name}" Cursor="Hand" Tag="{Binding Link}" MouseLeftButtonDown="Label_MouseLeftButtonDown" VerticalAlignment="Bottom" Foreground="White" Style="{StaticResource Gotham-Medium}" FontSize="8pt" HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

One trick I've found when playing with selection colours in a ListBox is to work with the system brushes rather than fighting against them.
When a ListBox is focused and an item is selected, that item's background is SystemColors.HighlightBrush. When the ListBox loses focus, however, the selected item's background becomes SystemColors.ControlBrush.
Knowing this, you can override the system brushes for that ListBox so that the items within are painted with the colours you want.
<ListBox>
<ListBox.Resources>
<!-- override the system brushes so that selected items are transparent
whether the ListBox has focus or not -->
<SolidColorBrush
x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent" />
<SolidColorBrush
x:Key="{x:Static SystemColors.ControlBrushKey}"
Color="Transparent" />
<SolidColorBrush
x:Key="{x:Static SystemColors.HighlightTextBrushKey}"
Color="Black" />
</ListBox.Resources>
<!-- ... your items here ... -->
</ListBox>

Related

WPF Make ScrollViewer transparent

I would like to get scrollbar in ListBox see through.
Currently I managed to move contents under with negative margin, but I cannot make it visible under ScrollBar even setting its Opacity.
Any ideas?
Current XAML (to disable selection and hover effects):
<ListBox x:Name="TestIC" Grid.Row="1"
ScrollViewer.CanContentScroll="True"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.VirtualizationMode="Recycling" >
<ListBox.Resources>
<sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">100</sys:Double>
</ListBox.Resources>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
<Setter Property="Focusable" Value="false"/>
<Setter Property="Margin" Value="0,0,-100,0"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Padding" Value="2,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="Selector.IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}}"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
You must simply override the default Style of the ScrollViewer and e.g., place it in the ResourceDictionary of App.xaml or your ListBox:
Allow the content to stretch into the scroll bar's column/row by setting the ColumnSpan/RowSpan of the ScrollContentPresenter
Set Background of ScrollBar elements, and if required the Rectangle named "Corner" too, to Transparent or modify their Opacity
To make the Thumb of the ScrollBar opac, override/copy all the default ScrollBar Styles and Templates and set the Thumb.Opacity in the x:Key="ScrollBarThumb" style.
As you already have a customized ScrollBar, you probably want to adjust your current Thumb style instead.
Important: don't forget to remove your negative Margin!
Since the content of the ScrollViewer is now allowed to span accross the full content host, the Margin is no longer needed. You should generally avoid a negative Margin in order to layout elements, when arranging them in columns (using proper spanning) yield the same result.
<Color x:Key="BorderMediumColor">#FF888888</Color>
<Style TargetType="{x:Type ScrollViewer}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border Grid.ColumnSpan="2" Grid.RowSpan="2"
BorderThickness="0,1,1,1">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
<ScrollContentPresenter CanContentScroll="{TemplateBinding CanContentScroll}" />
</Border>
<ScrollBar x:Name="PART_VerticalScrollBar"
Grid.Column="1"
Background="Transparent"
Value="{TemplateBinding VerticalOffset}"
Maximum="{TemplateBinding ScrollableHeight}"
ViewportSize="{TemplateBinding ViewportHeight}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
<ScrollBar x:Name="PART_HorizontalScrollBar"
Grid.Row="1"
Background="Transparent"
Orientation="Horizontal"
Value="{TemplateBinding HorizontalOffset}"
Maximum="{TemplateBinding ScrollableWidth}"
ViewportSize="{TemplateBinding ViewportWidth}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />
<Rectangle x:Name="Corner"
Grid.Column="1" Grid.Row="1"
Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

How to keep highlighting selected item of listbox even listbox lost focus?

I have a ListBox with ItemsSource binding to an ObservableCollection<Item>.
Item has two string properties Name and Description.
DataTemplate for Item is StackPanel with Children: TextBlock with Text Bind to Name, TextBox with Text bind to Description.
What I have now:
1. When cursor is in TextBox corresponding to Description of an item, the corresponding ListBoxItem is highlighted.
2. I can use Tab to navigate among item's Textbox
3. If I move cursor to another named TextBox(theTextBox in code below) outside of listbox, the selected item do not highlight any more. That is my problem.
The png at https://drive.google.com/file/d/1tyxaBLnnjFUCJRTsHbwBwSvdU_X_L1fn/view?usp=sharing help explains my problem.
<DockPanel>
<ListBox ItemsSource="{Binding Items}" DockPanel.Dock="Top" Height="100" KeyboardNavigation.TabNavigation="Cycle">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Focusable" Value="False"/>
<Style.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="Background" Value="LightGreen" />
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<ItemContainerTemplate >
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Name}"/>
<TextBox Text="{Binding Description}"/>
</StackPanel>
</ItemContainerTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBox Name-"theTextBox" AcceptsReturn="True" />
</DockPanel>
The background when not focussed is different because it uses a different brush.
If this is something you want to apply to everything and you don't care whether they're focussed or not then you could over-ride the system colour.
In a resource dictionary merged by app.xaml add:
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}"
Color={x:Static SystemColors.HighlightColor}"/>
This is the style that I use globally for ListBoxItems that includes keeping the selected item highlighted even when the control loses focus.
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<!-- Revert to the "Windows 7" style template that used "SystemColors.HighlightBrushKey" etc -->
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border
x:Name="ItemBorder"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
<ControlTemplate.Triggers>
<!-- Use the same colours for selected items, whether or not the control has focus -->
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="ItemBorder" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

How to set a WPF ListView Selected Item color?

I am trying to recreate the Mail UI from Windows 8 in a WPF application running on Windows 7. Here's what I want to achieve:
In particular, I don't know how to change the background color for selected items e.g. the Inbox item in the first column and the mail from Twitter in the second column. I have tried several solutions from other similar Stackoverflow Questions but none seem to work for me. e.g.
Selected item loses style when focus moved out in WPF ListBox
WPF ListView Inactive Selection Color
Here is the code I have for my listview:
<ListView Grid.Row="0" SelectedItem="{Binding Path=SelectedArea}" ItemsSource="{Binding Path=Areas}" Background="#DCE3E5" >
<ListView.Resources>
<!-- Template that is used upon selection of an Area -->
<ControlTemplate x:Key="SelectedTemplate" TargetType="ListViewItem">
<Border Background="#388095" Cursor="Hand" >
<TextBlock Text="{Binding Name}" Margin="5" />
</Border>
</ControlTemplate>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<!-- Base Template that is replaced upon selection -->
<ControlTemplate TargetType="ListViewItem">
<Border Background="#DCE3E5" Cursor="Hand" >
<TextBlock Text="{Binding Name}" Margin="5" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<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>
How can I change the background color of the selected item? And how do I retain the color change when the focus changes.
I did something similar to this recently:
<ListView.Resources>
<ControlTemplate x:Key="SelectedTemplate" TargetType="ListViewItem">
<Border CornerRadius="5" BorderThickness="1" BorderBrush="DarkGray" Background="#FF92C6F9" Padding="2" HorizontalAlignment="Left" Margin="5" Tag="{Binding Value}" Cursor="Hand" MouseUp="Border_MouseUp_1">
<TextBlock Text="{Binding Name}" Margin="5" />
</Border>
</ControlTemplate>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border CornerRadius="5" BorderThickness="1" BorderBrush="DarkGray" Background="WhiteSmoke" Padding="2" HorizontalAlignment="Left" Margin="5" Tag="{Binding Value}" Cursor="Hand" MouseUp="Border_MouseUp_1" >
<TextBlock Text="{Binding Name}" Margin="5" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true" />
<Condition Property="Selector.IsSelectionActive" Value="true" />
</MultiTrigger.Conditions>
<Setter Property="Template" Value="{StaticResource SelectedTemplate}" />
</MultiTrigger>
</Style.Triggers>
</Style>
</ListView.Resources>
I believe removing:
<Condition Property="Selector.IsSelectionActive" Value="true" />
will allow you to keep the background color after focus is lost.
EDIT:
In response to your question below:
You can bind the tag property of the TextBlock to the command parameter, and then execute the command on the MouseUp event of the TextBlock:
<TextBlock x:Name="MyTextBlock" Text="Click Me!" Tag="{Binding MyCommandParameter}" MouseUp="MyTextBlock_MouseUp" />
And in the code behind:
private void MyTextBlock_MouseUp(object sender, MouseButtonEventArgs e)
{
TextBlock tb = sender as TextBlock;
if (tb != null && tb.Tag != null)
{
ViewModel.MyCommand.Execute(tb.Tag);
}
}
Just adding to "TrueEddie" point.
The other option would be "ItemContainerStyle" in ListView.
<ListView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
BorderThickness="0"
ItemContainerStyle="{StaticResource ListViewSmartNotes}"
SelectedItem="{Binding SelectedSmartNotes, Mode=TwoWay}"
ItemsSource="{Binding LstSmartNotes, Mode=TwoWay}"
ItemTemplate="{DynamicResource ListViewItemOptionStyle}">
</ListView>
ListViewItemOptionStyle defined in Style.xml
<Style x:Key="ListViewItemOptionStyle" TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<!-- Trun off default selection-->
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Bd" BorderBrush="Gray" BorderThickness="0,1,0,1"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="true">
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Background" Value="Green" />
<Setter Property="BorderBrush" Value="Green" />
<Setter Property="Foreground" Value="White"/>
</MultiTrigger.Setters>
</MultiTrigger>
</Style.Triggers>
</Style>
Fore more details
https://sites.google.com/site/greateindiaclub/mobil-apps/windows8/wpfimportantbindings

WPF DataGrid column ignores Width

I have 2 DataGrids. To make them pretty I did some styling on them. I defined CellTemplate and HeaderTemplate and applied them in an implicit Style to the DataGrid. I add the coloumns in XAML and leave them be. They also have HeaderTemplates.
EDIT:
I've tried some other scenarios, so here's some more on what happens:
DataGrid 'A' works fine. It is initiated completely from XAML. It accepts all kinds of widths (including star size) and displays correctly. It is placed inside a UserControl that has a VM. Here's the XAML:
<DataGrid ItemsSource="{Binding Items}">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Name}" Header="Name" MinWidth="50" Width="250" HeaderTemplate="{StaticResource DefaultDataGridHeader}"/>
<DataGridTextColumn Binding="{Binding StartDate}" Header="Start" MinWidth="50" Width="150" HeaderTemplate="{StaticResource DefaultDataGridHeader}" />
<DataGridTextColumn Binding="{Binding FinishDate}" Header="Finish" MinWidth="50" Width="150" HeaderTemplate="{StaticResource DefaultDataGridHeader}" />
<DataGridTextColumn Binding="{Binding Leader}" Header="Leader" MinWidth="50" Width="*" HeaderTemplate="{StaticResource DefaultDataGridHeader}" />
</DataGrid.Columns>
</DataGrid>
Then there is DataGrid B...
It's a little more complicated now. There's a Control that displays DataGrid B and does some other things. It is used in many other Views, with different data. So for every data there's another View, that contains the DataGrid columns. When the data arrives to the main control, it clears the columns of DataGrid B and repopulates it with the ones defined in the corresponding View.
Here's DataGrid B in the usercontrol:
<DataGrid x:Name="datagrid" ItemsSource="{Binding Items}" IsReadOnly="True" SelectionMode="Single" />
The UserControl has a ObservableCollection GridColumns DependencyProp. This is where the actual DataGridColumns arrive. So on the CollectionChanged event I do this:
void GridColumnsCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
datagrid.Columns.Clear();
foreach (var gridColumn in GridColumns)
{
datagrid.Columns.Add(gridColumn);
}
}
Here's an example for how I set the actual columns in data-specific View:
<c:GenericList >
<c:GenericList.GridColumns>
<DataGridTextColumn Binding="{Binding Name}" Header="Name"
Width="300" HeaderTemplate="{StaticResource DefaultDataGridHeader}"/>
</c:GenericList.GridColumns>
</c:GenericList>
-------- What happens with DataGrid B: --------
If I leave the XAML like this, the column gets rendered with 300 px width.
If I chnage the width to star size, or add any other columns with star size, they get rendered with 20px width. (even if there is some text in the header)
If I set MinWidth, then all the star sized columns are rendered with MinWidth.
If I leave out the whole 'placing columns from another view' part, and add some columns
directly to datagrid then pixel size columns span to the width of the header text and star sized columns render with 20px width. Also if I resize a starsized column in the running app, some width constraints kick in and I cannot make the columns small again anymore. - But in this version, there's no data to bind to columns. Could that be causing this effect?
//end of EDIT.
The Styles were made in Blend with the "Edit a Copy" function.
They are like this:
<Style x:Key="DefaultDataGridColumnHeaderStyle" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid >
<Microsoft_Windows_Themes:DataGridHeaderBorder BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
IsClickable="{TemplateBinding CanUserSort}" IsPressed="{TemplateBinding IsPressed}" IsHovered="{TemplateBinding IsMouseOver}"
Padding="{TemplateBinding Padding}" SortDirection="{TemplateBinding SortDirection}" SeparatorBrush="{TemplateBinding SeparatorBrush}"
SeparatorVisibility="{TemplateBinding SeparatorVisibility}" Background="#00000000">
<Grid>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle StrokeThickness="0" RadiusY="0" Opacity="0">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#33000000" Offset="1"/>
<GradientStop Color="#4CFFFFFF"/>
<GradientStop Color="#007B7B7B" Offset="0.35"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Microsoft_Windows_Themes:DataGridHeaderBorder>
<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}" Width="8"/>
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}" Width="8"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="DefaultDataGridHeader">
<Border BorderBrush="{DynamicResource ShadowBrush}" Background="{x:Null}" d:DesignWidth="289" d:DesignHeight="72.28">
<Grid>
<Rectangle RadiusY="0" StrokeThickness="0" Fill="{DynamicResource ActionTileBrush}" />
<Rectangle RadiusY="0" StrokeThickness="0" >
<Rectangle.Fill>
<SolidColorBrush Color="#88FFFFFF" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Text="{Binding}" Margin="12" FontSize="16" FontWeight="Bold">
<TextBlock.Foreground>
<SolidColorBrush Color="#FF11789D" />
</TextBlock.Foreground>
</TextBlock>
<Rectangle RadiusY="0" StrokeThickness="1" Stroke="{DynamicResource ShadowBrush}"></Rectangle>
</Grid>
</Border>
</DataTemplate>
<Style x:Key="DefaultDataGridCellStyle" TargetType="{x:Type DataGridCell}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" Padding="12,8">
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{DynamicResource HighlightBrush}"/>
</Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="BorderBrush" Value="{DynamicResource HighlightBrush}"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="DefaultDataGridStyle" TargetType="{x:Type DataGrid}">
<Setter Property="AlternatingRowBackground" Value="{x:Null}"/>
<Setter Property="AlternationCount" Value="2"/>
<Setter Property="AutoGenerateColumns" Value="False"/>
<Setter Property="Background" Value="{x:Null}"/>
<Setter Property="BorderBrush" Value="{DynamicResource ChromeBrush}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="CellStyle" Value="{StaticResource DefaultDataGridCellStyle}"/>
<Setter Property="ColumnHeaderStyle" Value="{StaticResource DefaultDataGridColumnHeaderStyle}"/>
<Setter Property="Foreground" Value="{DynamicResource ForegroundBrush}"/>
<Setter Property="HorizontalGridLinesBrush" Value="{DynamicResource ShadowBrush}"/>
<Setter Property="RowBackground" Value="{DynamicResource BackgroundBrush}"/>
<Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="Both"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="True"/>
<Setter Property="VerticalGridLinesBrush" Value="{DynamicResource ShadowBrush}"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Style.Triggers>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
</Style.Triggers>
</Style>
Clearly there is something wrong somewhere and I should be able to set the columns to star size, or if set them to pixel size I expect them to keep that.
Thank you for any help!
Hope the space is there in your xaml in the second DataGridTextColumn in-between Binding and Width
Is the HorizontalAlignment of the UserControl that hosts the second datagrid set to Stretch?
I would try setting HorizontalAlignment of the UserControl to Stretch - maybe that is restricting the DataGrid size.

WPF issue with TreeView and Popup controls

When using a Popup inside a TreeView in WPF I am running into an issue where the controls inside the popup become unusable. For example, using the following code the ToggleButton inside the popup can only be toggled once and then becomes unable to be toggled back. Is there any way to work around this issue?
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<TreeView>
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel>
<ToggleButton>
Button outside popup
</ToggleButton>
<Popup IsOpen="True">
<ToggleButton>
Button inside popup
</ToggleButton>
</Popup>
</StackPanel>
</TreeViewItem.Header>
</TreeViewItem>
</TreeView>
</Grid>
</Page>
The problem is that you are embedding the Popup inside the TreeViewItem, and somehow that is interfering with its built-in functionality. I don't think Popups are meant to be used that way, anyway. Because you can specify the PlacementTarget of a Popup, you can declare them anywhere and then open them at the location you want. The following mark-up demonstrates this with your example:
<StackPanel>
<Popup IsOpen="True" PlacementTarget="{Binding ElementName=buttonPanel}"
Placement="Bottom">
<ToggleButton>
Button inside popup
</ToggleButton>
</Popup>
<TreeView>
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel Name="buttonPanel">
<ToggleButton>
Button outside popup
</ToggleButton>
</StackPanel>
</TreeViewItem.Header>
</TreeViewItem>
</TreeView>
</StackPanel>
As you can see, the Popup can be declared anywhere. You can then use PlacementTarget to put it right where you want. With this change, the ToggleButton works as expected.
Thanks to Charlie finding the issue with using TreeView...
Setting Focusable on the tree view to false also seems to work. But may cause you other issues.
<TreeView Focusable="False">
From what I can tell the issue is which control is taking focus, so it looks like your treeview is taking focus of the mouse click instead of the button.
After discussion with the WPF team I found out that is this is just an issue with WPF.
For my case I was trying to create a drop dialog that is used for each TreeViewItem. I played around with different controls trying to get the looked I needed and I discovered that the Popup portion of a ComboBox worked fine inside a TreeView.
Because of this I ended up using a ComboBox inside the TreeView and forcing the ComboBox to only have one item that is always selected and that item would be my drop dialog. After this I just needed to style the ComboBox to match the look I needed. The code below shows the general idea of what I did.
<TreeView>
<TreeViewItem>
<ComboBox HorizontalAlignment="Left" VerticalAlignment="Top">
<ComboBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
</ComboBox.Resources>
<ComboBoxItem IsSelected="True">
<StackPanel Orientation="Vertical">
<Label>Some stuff on the combobox popup</Label>
<RadioButton>Radio Button 1</RadioButton>
<RadioButton>Radio Button 2</RadioButton>
<CheckBox>Check Box</CheckBox>
<Button HorizontalAlignment="Right">Ok</Button>
</StackPanel>
</ComboBoxItem>
</ComboBox>
</TreeViewItem>
</TreeView>
Well I had the same problem where a treeview shows hierarchical items using data template and multiple user control and one of the user control is a toggle button with a pop up in it.
This would freeze totally and would not respond at all. The problem is related to Focus property but setting Focusable to false does not always work.
By looking at the solutions provided above I liked the last one that uses combo box inside a treeviewitem. But it lead to one more problem. Whenever user select the (single) item of the combobox, it would appear in the combobox as a selectedValue and I just want to behave like a toggle with pop up.
Also I wanted to change the triangle on the combobox to ellipsis. So I tried this solution by changing the control template.
Here is my solution:
...
...
<Style x:Key="ComboBoxStyle1" TargetType="{x:Type ComboBox}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ComboBoxFocusVisual}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="Padding" Value="4,3"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid x:Name="MainGrid" SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Popup x:Name="PART_Popup" Margin="1"
AllowsTransparency="true"
IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}"
Placement="Bottom"
PopupAnimation="Fade">
<Microsoft_Windows_Themes:SystemDropShadowChrome x:Name="Shdw" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=MainGrid}" Color="Transparent">
<Border x:Name="DropDownBorder" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="2" CornerRadius="0,4,4,4">
<ScrollViewer CanContentScroll="true">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.DirectionalNavigation="Contained"/>
</ScrollViewer>
</Border>
</Microsoft_Windows_Themes:SystemDropShadowChrome>
</Popup>
<ToggleButton Style="{StaticResource ComboBoxReadonlyToggleButton}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
<Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
<Setter Property="Color" TargetName="Shdw" Value="#71000000"/>
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter Property="Height" TargetName="DropDownBorder" Value="95"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
<Setter Property="Background" Value="#FFF4F4F4"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEditable" Value="true">
<Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}"/>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Padding" Value="3"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="ComboBoxItemStyle1" TargetType="{x:Type ComboBoxItem}">
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Padding" Value="3,0,3,0"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<TreeView >
<TreeViewItem IsExpanded="True">
<ComboBox HorizontalAlignment="Left" VerticalAlignment="Top"
IsEditable="False"
Style="{StaticResource ComboBoxStyle1}">
<ComboBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
</ComboBox.Resources>
<ComboBoxItem IsSelected="False">
<StackPanel Orientation="Vertical">
<Label>Some stuff on the combobox popup</Label>
<RadioButton>Radio Button 1</RadioButton>
<RadioButton>Radio Button 2</RadioButton>
<CheckBox>Check Box</CheckBox>
<Button HorizontalAlignment="Right">Ok</Button>
</StackPanel>
</ComboBoxItem>
</ComboBox>
</TreeViewItem>
</TreeView>

Resources