Add Columnheader to Treeview with HierarchicalDataTemplate - wpf

I want do add a Columnheader to a Treeview (see below). However, if I add a row to the ControlTempalte for the TreeViewItem, the Header is shown above each item. How can I add a Headerrow, that just shows once above the whole tree?
I want to show a ColumnHeader like in a DataGrid as shown (white on grey text) in the picture below:
<TreeView Grid.Row="1" ItemsSource="{Binding AktuellerDatensatz.Abschnitte}"
SelectedItemChanged="TreeView_SelectedItemChanged" Style="{StaticResource StandardTreeview}">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate DataType="{x:Type model:BaustelleModel}" ItemsSource="{Binding Abschnitte}">
<DockPanel HorizontalAlignment="Stretch" >
<Grid HorizontalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding Converter={StaticResource Breite}}"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" BorderThickness="0 0 1 1" BorderBrush="{StaticResource Grau}">
<Label Content="{Binding Name}"/>
</Border>
<Border Grid.Column="1" BorderThickness="0 0 1 1" BorderBrush="{StaticResource Grau}">
<Label Content="{Binding Start}" />
</Border>
<Border Grid.Column="2" BorderThickness="0 0 1 1" BorderBrush="{StaticResource Grau}">
<Label Content="{Binding End}" Grid.Column="2" />
</Border>
<Border Grid.Column="3" BorderThickness="0 0 1 1" BorderBrush="{StaticResource Grau}">
<Label Content="{Binding Duration}" />
</Border>
<Border Grid.Column="4" BorderThickness="0 0 1 1" BorderBrush="{StaticResource Grau}">
<Label />
</Border>
</Grid>
</DockPanel>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>

The best way to achieve the requirement is to include TreeView inside DataGrid instead of doing it reverse. You can refer here
With TreeView, you can try using AlternationIndex to show the headers only for the first item in every level.
<Grid.Style>
<Style TargetType="Grid">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=(ItemsControl.AlternationIndex), RelativeSource={RelativeSource AncestorType=TreeViewItem, Mode=FindAncestor}}" Value="0">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
Remember to set AlternationCount to max int value for your TreeView.

Related

Can not remove the the border around grid after rendering

Here is my XAML and I see a border around the grid and I am not sure how to remove it.
<Border
BorderBrush="#971c1c"
BorderThickness="5"
CornerRadius="5">
<Grid Background="#971c1c">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image
Width="20"
Height="20"
Margin="3"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="/DataSuite.Administration.Console.WinClient;component/Resources/Integration_Error.png" />
<ItemsControl
Grid.Column="1"
Margin="0,5"
BorderThickness="0"
FontSize="14"
Foreground="White">
<ListBoxItem>
<TextBlock Text="This is sample text for the error. Width will be set as per the value of message" />
</ListBoxItem>
<ListBoxItem>
<TextBlock Text="This is sample text for the error." />
</ListBoxItem>
<ListBoxItem>
<TextBlock Text="This is sample text for the error." />
</ListBoxItem>
</ItemsControl>
<Button
Grid.Column="2"
VerticalAlignment="Center"
Background="Transparent"
BorderThickness="0"
Foreground="White">
Dissmiss
<Button.Style>
<Style>
<Style.Triggers>
<Trigger Property="Control.IsMouseOver" Value="True">
<Setter Property="Control.Cursor" Value="Hand" />
<Setter Property="Control.Background" Value="Transparent" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Grid>
</Border>
I have removed the border from the Itemscontrol and also this xaml is part of usercontrol and I have set the Borderthickness of usercontrol to 0 as well
Here is output that I am seeing.
Rendered Image
The easiest way to do this is to set the margin on the grid to -1.
<Grid Background="#971c1c" Margin="-1">
Try to set background of the border instead of the grid.
<Border
Background="#971c1c"
BorderThickness="0"
CornerRadius="5">
<Grid>
</Grid>
</Border>

Shadow under hovered ListBoxItem (and not under it's text)

I need shadow under ListBoxItem on MouseOver. Bottom code works but the whole listbox including the TextBlock's letters have a shadow:
<ListBox ItemContainerStyle="{StaticResource Style1}"
And the item Style:
<Style x:Key="Style1" TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
<Setter Property = "Effect" >
<Setter.Value>
<DropShadowEffect ShadowDepth="10" Direction="0" Opacity="1" BlurRadius="5" Color="Black"/>
</Setter.Value>
</Setter>
</Trigger>
Simplified DataTemplate:
<DataTemplate x:Key="TemplateSimple" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Title}" Grid.Column="0"/>
<TextBlock Text="{Binding FirstName}" Grid.Column="1"/>
<TextBlock Text="{Binding LastName}" Grid.Column="2"/>
Example is simplified.
I also tried adding to the DataTemplate:
<Rectangle Grid.Column="0" Fill="GreenYellow" Grid.ColumnSpan="3">
and assigning the shadow to it, but it would react only if TextBlocks are empty. Other ideas are appreciated.
EDIT:
As you can see it is not really a shadow but a blurry text. If it was a shadow, it would change much on changing shadow length:
See this post, How do I apply an effect to a Border but not to its contents in WPF?, which has some documentation on this "feature".
The easiest workaround in your case might be to give the Grid in your DataTemplate a background color:
<DataTemplate x:Key="TemplateSimple" >
<Grid Background="White" > ...
EDIT:
A more thorough approach would be to apply the DropShadowEffect to an element that lies beneath the text, but doesn't contain the text. For example, add a rectangle to your DataTemplate:
<DataTemplate x:Key="TemplateSimple" >
<Grid Margin="2" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Style="{StaticResource RectStyle1}"
Fill="Lime" Grid.ColumnSpan="3" />
<TextBlock Text="{Binding Title}" Grid.Column="0" />
<TextBlock Text="{Binding FirstName}" Grid.Column="1" />
<TextBlock Text="{Binding LastName}" Grid.Column="2" />
</Grid>
</DataTemplate>
..and instead of having the DropShadowEffect in Style1, put it in RectStyle1, but still triggered by IsMouseOver on the parent ListBoxItem:
<Style x:Key="RectStyle1" TargetType="Rectangle" >
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListBoxItem},
Path=IsMouseOver,
Mode=OneWay}"
Value="True" >
<Setter Property="Effect" >
<Setter.Value>
<DropShadowEffect ShadowDepth="10" Direction="0"
Opacity="1" BlurRadius="5"
Color="Black" />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>

WPF: Adding a ProgressBar to ListBox Items

I'm trying to make the background of my ListBoxItems to be constituted of a ProgressBar, but the "Z-Index" thing is not seemingly working for me. I have read somewhere that Grid doesn't support Z-Index (like Canvas) and that by default elements are rendered in the order they are added. This is what apparently happens in my case too. But when I click on a listbox item, my TextBlock (see below) disappears, apparently because the ProgressBar comes to front. Interestingly, the other child controls (image and animation) do not disappear, so I'm kind of puzzled.
Here's my ListBox's ItemTemplate:
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Name="ListBoxGrid">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<ProgressBar Grid.Column="0" Grid.ColumnSpan="3" Background="White" Value="{Binding Path=SendProgress}" />
<Image Width="50" Stretch="Uniform" Grid.Column="0" HorizontalAlignment="Center" Margin="20,0,0,0" VerticalAlignment="Center" Source="{Binding Image}" />
<TextBlock FontSize="16" Grid.Column="1" VerticalAlignment="Center" Text="{Binding Path=ImageFilePath, Padding="20,0,0,0" />
<Canvas Grid.Column="2">
<Image Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" Source="{Binding Status}" />
<my:LoadingAnimation HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100" Canvas.Left="5" Canvas.Top="5" Visibility="{Binding IsSending, Converter={StaticResource BooleanToVisibilityConverter1}}" />
</Canvas>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
Panel.ZIndex property works fine for me Sample code:
<Grid>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Panel.ZIndex="2">
<Button Name="goButton" Height="30" Width="50" Margin="0,10,0,50" Click="goButton_Click">GO!</Button>
<ProgressBar Name="progressBar" Width="300" Height="30" />
</StackPanel>
<Label VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="100" Content="SHOWTHIS" Panel.ZIndex="1"/>
</Grid>
Perhaps Style Datatriggers for visibility might be usefull in this case if i understood it well
Sample code for each element of your datatemplate:
<Image>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSending}" Value="True">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsSending}" Value="False">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>

ListBox content does not resize when window is made smaller

I'm using .NET 4.0 (not .NET 4.0 CP) and have run into this kinda unique issue. I created a ListBox to display bound elements, first off here is (a part) of my XAML.
<Grid Grid.Row="2" Background="#EEEEEE">
<Border Margin="6,10,10,10" BorderBrush="#666666" BorderThickness="1">
<ListBox ItemsSource="{Binding}" Name="appList" BorderThickness="0" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Margin="5" BorderThickness="3" CornerRadius="2" BorderBrush="Black" HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="ItemBorder">
<Image Width="64" Height="64" Source="{Binding Path=IconUri}" Stretch="UniformToFill" />
</Border>
<StackPanel Margin="0,5,5,5" Grid.Column="1" Orientation="Vertical" HorizontalAlignment="Stretch">
<TextBlock FontSize="18" Text="{Binding Path=DisplayName}" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<ProgressBar Grid.Column="0" Height="24" HorizontalAlignment="Stretch" IsIndeterminate="{Binding Path=IsDiscovering}" Value="{Binding Path=PercentageDownloaded}" />
<TextBlock Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"><TextBlock x:Name="percentageDownloaded" /><TextBlock x:Name="percentageMeter">%</TextBlock></TextBlock>
</Grid>
</StackPanel>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsDiscovering}">
<DataTrigger.Value>True</DataTrigger.Value>
<Setter TargetName="percentageDownloaded" Property="Text" Value="N/A" />
<Setter TargetName="percentageMeter" Property="Visibility" Value="Collapsed" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsDiscovering}">
<DataTrigger.Value>False</DataTrigger.Value>
<Setter TargetName="percentageDownloaded" Property="Text" Value="{Binding Path=PercentageDownloaded}" />
<Setter TargetName="percentageMeter" Property="Visibility" Value="Visible" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListBox>
</Border>
</Grid>
Sizing the window up stretches the ListBox content just fine, but when I size it down, it retains it's width and spawns vertical scrollbars.
Have you already tried to use a StackPanel as ItemsPanel?
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>

How can make ScrollViewer scroll when mouse is over *any* content

The reason I stress 'any' is because CanContentScroll is not fully working in my ScollViewer.
Let me explain the scenario:
I have a ScrollViewer that has three Labels followed by a ListBox each. The reason I have this content inside the ScrollViewer is because I don't want each ListBox to have a ScrollBar, I just want one "global" ScrollBar. The problem is that when the cursor is over the the ListBox the ScrollViewer doesn't scroll. I've tried to set CanContentScroll property to true in the ScrollViewer, the ListBox and on the ListBoxItem style, without success. Is there other Control type I should use?
Here is my code sample:
<UserControl x:Class="Telbit.TeStudio.View.Controls.TestStepsView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="clr-namespace:Telbit.TeStudio.View.Controls">
<UserControl.Resources>
<DataTemplate DataType="{x:Type my:TestStepsStepViewModel}">
<my:TestStepsStepView HorizontalAlignment="Stretch"/>
</DataTemplate>
<Style x:Key="StepItemStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsSelected" Value="{Binding Mode=TwoWay, Path=IsSelected}"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border" SnapsToDevicePixels="true" Background="Transparent" BorderThickness="0" Padding="1">
<ContentPresenter/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="#40a0f5ff"/>
</Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="IsSelected" Value="True" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<UserControl.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFF2F2F2"/>
<GradientStop Color="Gainsboro" Offset="1"/>
</LinearGradientBrush>
</UserControl.Background>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<HeaderedContentControl Grid.Row="0" >
<HeaderedContentControl.Header>
<Grid Background="#e8f2f8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition MinWidth="200" Width="*" />
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="130"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="#" BorderBrush="#70add4" BorderThickness="2 2 0 2"/>
<Label Grid.Column="1"
Content="Folder\Name"
BorderBrush="#70add4" BorderThickness="0 2 0 2"/>
<Label Grid.Column="2" Content="Type" BorderBrush="#70add4" BorderThickness="0 2 0 2" Margin="-20 0 0 0"/>
<Label Grid.Column="3" Content="Auto Start" BorderBrush="#70add4" BorderThickness="0 2 0 2" Margin="-20 0 0 0"/>
<Label Grid.Column="4" Content="Run After" BorderBrush="#70add4" BorderThickness="0 2 0 2" Margin="-20 0 0 0"/>
<Label Grid.Column="5" Content="Stop After" BorderBrush="#70add4" BorderThickness="0 2 0 2" Margin="-20 0 0 0"/>
<Label Grid.Column="6" Content="Delay (s)" BorderBrush="#70add4" BorderThickness="0 2 0 2" Margin="-20 0 0 0"/>
<Label Grid.Column="7" Content="Timestamp" BorderBrush="#70add4" BorderThickness="0 2 0 2" Margin="-20 0 0 0"/>
<Label Grid.Column="8" Content="Edited by" BorderBrush="#70add4" BorderThickness="0 2 2 2" Margin="-20 0 0 0"/>
</Grid>
</HeaderedContentControl.Header>
</HeaderedContentControl>
<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="1" VerticalAlignment="Top" CanContentScroll="True">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="30"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="30"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<Label Name="lblSetup" Grid.Row="0"
VerticalContentAlignment="Center"
BorderBrush="DarkGray" BorderThickness="0 0 0 1"
TextBlock.FontSize="10pt" TextBlock.FontWeight="Bold" TextBlock.Foreground="#949494"
Content="Setup" AllowDrop="True"/>
<ListBox Name="itmCtrlSetupSteps" Grid.Row="1"
BorderThickness="0" Background="Transparent"
ItemsSource="{Binding SetupSteps}" SelectionMode="Single"
HorizontalContentAlignment="Stretch"
ItemContainerStyle="{StaticResource StepItemStyle}"
SelectionChanged="manageStep_SelectionChanged"
ScrollViewer.CanContentScroll="True"
/>
<Label Name="lblTest" Grid.Row="2"
VerticalContentAlignment="Center"
BorderBrush="DarkGray" BorderThickness="0 0 0 1"
TextBlock.FontSize="10pt" TextBlock.FontWeight="Bold" TextBlock.Foreground="#949494"
Content="Test" AllowDrop="True"/>
<ListBox Name="itmCtrlTestSteps" Grid.Row="3"
BorderThickness="0" Background="Transparent"
ItemsSource="{Binding TestSteps}" SelectionMode="Single"
HorizontalContentAlignment="Stretch"
ItemContainerStyle="{StaticResource StepItemStyle}"
SelectionChanged="manageStep_SelectionChanged"
/>
<Label Name="lblTearDown" Grid.Row="4"
VerticalContentAlignment="Center"
BorderBrush="DarkGray" BorderThickness="0 0 0 1"
TextBlock.FontSize="10pt" TextBlock.FontWeight="Bold" TextBlock.Foreground="#949494"
Content="Tear Down" AllowDrop="True"/>
<ListBox Name="itmCtrlTearDownSteps" Grid.Row="5"
BorderThickness="0" Background="Transparent"
ItemsSource="{Binding TearDownSteps}" SelectionMode="Single"
HorizontalContentAlignment="Stretch"
ItemContainerStyle="{StaticResource StepItemStyle}"
SelectionChanged="manageStep_SelectionChanged"
/>
</Grid>
</ScrollViewer>
</Grid>
</UserControl>
The problem is that even though child list boxen don't have scroll bars visible, they do have ScrollViewer in them according to their template. Fortunately this template is easily modifiable. Do this for each child list box, or better yet put it in common style:
<ListBox.Template>
<ControlTemplate TargetType="ListBox">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderBrush}">
<ItemsPresenter/>
</Border>
</ControlTemplate>
</ListBox.Template>
The default is almost the same with the exception of ScrollViewer wrapping around ItemsPresenter.

Resources