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.
Related
I am trying to work on this WPF design and not having any luck
This is the xaml
<UserControl x:Class="namespace.myuserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:wpf="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
mc:Ignorable="d"
Loaded="UserControl_Loaded"
Focusable="True"
d:DesignHeight="10000" d:DesignWidth="1049">
<UserControl.Resources>
<CollectionViewSource x:Key="DocumentGroup" Source="{Binding docs}">
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="type.Name"/>
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
<DataTemplate x:Key="groupingHeaderTemplate">
<Label VerticalAlignment="Center" Content="{Binding}" FontWeight="Bold" Background="AliceBlue"></Label>
</DataTemplate>
</UserControl.Resources>
<Grid HorizontalAlignment="Left" VerticalAlignment="Stretch" Focusable="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500" ></ColumnDefinition>
<ColumnDefinition Width="6"></ColumnDefinition>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" Grid.RowSpan="1" HorizontalAlignment="Center" VerticalAlignment="Stretch"
BorderBrush="DarkSlateGray" BorderThickness="1" Width="6" ShowsPreview="True" >
<GridSplitter.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF808385" Offset="0"/>
<GradientStop Color="#FFECF1F7" Offset="1"/>
</LinearGradientBrush>
</GridSplitter.Background>
</GridSplitter>
<ScrollViewer >
<ListBox Grid.Column ="0" ScrollViewer.VerticalScrollBarVisibility="Visible" Name="lstCustomList" ItemsSource="{Binding Source={StaticResource DocumentGroup}}"
SelectionChanged="ShowDocument" >
<ListBox.GroupStyle>
<GroupStyle HeaderTemplate= "{StaticResource groupingHeaderTemplate}" />
</ListBox.GroupStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
<Label Name="clLabel" Height="10000" Content="{Binding docResult, UpdateSourceTrigger=PropertyChanged}" Foreground="Red" Padding="5" Grid.ColumnSpan="2" Margin="0,0,7,0">
<Label.Style>
<Style TargetType="Label">
<Setter Property="Visibility" Value="Collapsed"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding docs.Count}" Value="0">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
<ScrollViewer Grid.Column="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid HorizontalAlignment="Left" VerticalAlignment="Stretch" Focusable="True">
<Grid.RowDefinitions>
<RowDefinition Height="50" ></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button Width="300" Height="100">Launch</Button>
<wpf:WebView2 Grid.Row="1" Name="View2" />
</Grid>
</ScrollViewer>
</Grid>
The button is not visible because you set row height to 50 but also button height to 100. I would set row height to Auto in this case.
White space on the right side in the second column is due to you've set main grid HorizontalAlignment to Left. Just remove it.
WebView2 doesn't fill the space because the parent grid has HorizontalAlignment set to Left.
Here is updated xaml (main grid only)
...
<Grid VerticalAlignment="Stretch" Focusable="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500" ></ColumnDefinition>
<ColumnDefinition Width="6"></ColumnDefinition>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" Grid.RowSpan="1" HorizontalAlignment="Center" VerticalAlignment="Stretch"
BorderBrush="DarkSlateGray" BorderThickness="1" Width="6" ShowsPreview="True" >
<GridSplitter.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF808385" Offset="0"/>
<GradientStop Color="#FFECF1F7" Offset="1"/>
</LinearGradientBrush>
</GridSplitter.Background>
</GridSplitter>
<ScrollViewer >
<ListBox Grid.Column ="0" ScrollViewer.VerticalScrollBarVisibility="Visible" Name="lstCustomList" ItemsSource="{Binding Source={StaticResource DocumentGroup}}"
SelectionChanged="ShowDocument" >
<ListBox.GroupStyle>
<GroupStyle HeaderTemplate= "{StaticResource groupingHeaderTemplate}" />
</ListBox.GroupStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
<Label Name="clLabel" Height="10000" Content="{Binding docResult, UpdateSourceTrigger=PropertyChanged}" Foreground="Red" Padding="5" Grid.ColumnSpan="2" Margin="0,0,7,0">
<Label.Style>
<Style TargetType="Label">
<Setter Property="Visibility" Value="Collapsed"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding docs.Count}" Value="0">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
<ScrollViewer Grid.Column="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid VerticalAlignment="Stretch" Focusable="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" ></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button Width="300" Height="100">Launch</Button>
<wpf:WebView2 Grid.Row="1" Name="View2" />
</Grid>
</ScrollViewer>
</Grid>
So my code looks like this:
<Window.Resources>
<Style x:Key="ButtonTemplate" TargetType="Button">
<Setter Property="Background" Value="{x:Null}"/>
<Setter Property="BorderBrush" Value="{x:Null}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="0">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Border Background="#FFFFFF" BorderThickness="0 0 0 1" BorderBrush="Black" VerticalAlignment="Top" DockPanel.Dock="Top" Width="1009" Height="30">
<Grid HorizontalAlignment="Right">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" x:Name="btnToolbarMin" Content="─" Height="30" Width="44" Style="{StaticResource ButtonTempplate}" Click="btnToolbarMin_Click"/>
<Button Grid.Column="1" x:Name="btnToolbarMax" Content="£" FontFamily="Wingdings 2" Height="30" Width="44" Style="{StaticResource ButtonTempplate}" Click="btnToolbarMax_Click" />
<Button Grid.Column="2" x:Name="btnToolbarClose" Content="Ñ" FontFamily="Wingdings 2" Height="30" Width="44" Style="{StaticResource ButtonTempplate}" Click="btnToolbarClose_Click" />
</Grid>
</Border>
<StackPanel Background="#F5F5F5" Height="70" DockPanel.Dock="Top" VerticalAlignment="Top">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="336*"/>
<ColumnDefinition Width="627*"/>
<ColumnDefinition Width="46*"/>
</Grid.ColumnDefinitions>
<Label Margin="13 10 0 0" FontWeight="Bold" Content="Artikel" FontFamily="Arial" FontSize="15" Foreground="#38C72E" Grid.Row="0" HorizontalAlignment="Left" Width="58"/>
<Menu Grid.Row="1" Background="#F5F5F5" Margin="13,0,282,11" >
<MenuItem Header="≡" FontWeight="Bold" FontSize="15">
<MenuItem Header="WW" FontSize="10"/>
</MenuItem>
</Menu>
<Button Content="↻" FontSize="15" FontFamily="Lucida Sans Unicode" Background="{x:Null}" BorderThickness="0" Grid.Column="1" HorizontalAlignment="Right" Width="42"/>
<Button Content="☼" FontSize="15" Background="{x:Null}" BorderThickness="0" Grid.Column="2" HorizontalAlignment="Right" Width="43"/>
</Grid>
</StackPanel>
<StackPanel Background="#F5F5F5" VerticalAlignment="Bottom" Height="40">
<Grid HorizontalAlignment="Right">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Content="Dummy1" Grid.Column="1" Height="25" Width="115" HorizontalAlignment="Right" Margin="5 10 13 0"/>
<Button Content="Dummy2" Grid.Column="0" Height="25" Width="115" HorizontalAlignment="Right" Margin="0 10 0 0"/>
</Grid>
</StackPanel>
</DockPanel>
</Grid>
And when I press the max button (i.e. the one next to the close button) with this code:
this.WindowState = WindowState.Maximized;
Then he lets several things grow with it, but some things like the top bar, for example, where the 3 buttons are to close, minimize and not grow with them, why is that? I also worked with dock panel and horizontal and vertical alignment, but to no avail.
I think the issue is that you set the Width of the top bar explicitly, which leads to the bar not being shown when the window is small and being centered when the window is larger that size.
<Border ... Width="1009" ...>
The same applies to the explicit Height="30" in the Border. The height is fixed, so of course it does not scale with the window.
I am new to wpf. I need to have a window that list all accounts added. But my application shows a double line below the "Accounts". Not sure what caused this. could someHow to fix this? Here is my xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel x:Name="StackPanel1" Grid.Row="0" HorizontalAlignment="Left" Height="150" VerticalAlignment="Top" Width="444">
<TextBlock x:Name="AddAccountTextBlock" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Height="60" Width="369" Text="Add account to allow for simple access to your company resources
" SnapsToDevicePixels="True"/>
<Button x:Name="AddAccount" Content="Add Account" HorizontalAlignment="Left" VerticalAlignment="Top" Width="140" RenderTransformOrigin="0.466,0.977" IsCancel="True" Height="40" Foreground="White" Background="Blue" Click="OnAddAccount"/>
</StackPanel>
<StackPanel x:Name="StackPanel2" Grid.Row="2" HorizontalAlignment="Left" Height="154" Width="444">
<TextBlock x:Name="AccountsTextBlock" TextWrapping="Wrap" Text="Accounts" Height="25" Width="68" FontSize="16" FontFamily="Tahoma"/>
<ListBox x:Name="accounts" Height="130" VerticalAlignment="Top">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Height" Value="100"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="_Border" BorderBrush="Gray" BorderThickness="0.5" SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="_Border" Property="Background" Value="LightSkyBlue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0" Width="100" Source="{Binding Path=imagePath}" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" Text="{Binding Path=userInfo}"></TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
You may remove the borders of the ListBox by setting the BorderThickness property:
<ListBox x:Name="accounts" Height="130" VerticalAlignment="Top" Margin="100"
BorderThickness="0">
You may set it to 1,0,1,0 to remove only the top and bottom borders. The order is left, top, right, bottom.
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.
I am having a form in maximize mode, within the form contains a HeaderContentControl.
Within the HeaderContentControl.Content, i added a DockLayout, but the problem is that DockLayout is not fit to the form height.
How can I resolve this problem? Here's the xaml file:
<Window x:Class="Prototype.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Prototype"
Title="XXX"
x:Name="frmMain"
Width="581" Height="340" ResizeMode="CanMinimize"
WindowStartupLocation="CenterScreen" WindowState="Maximized"
WindowStyle="None" IsHitTestVisible="True" Topmost="False" AllowsTransparency="True" Background="Transparent" Loaded="frmMain_Loaded">
<!-- Copyright Microsoft Corporation. All Rights Reserved. -->
<Window.Resources>
<Style TargetType="{x:Type local:MainWindow}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MainWindow}">
<Border Background="#FF333333"
BorderBrush="#FFCCCCCC"
BorderThickness="1"
CornerRadius="5"
Padding='2'>
<HeaderedContentControl>
<HeaderedContentControl.Header>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="19*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="212*" />
<ColumnDefinition Width="84*" />
<ColumnDefinition Width='Auto' />
</Grid.ColumnDefinitions>
<Rectangle Grid.ColumnSpan="3" Fill="#FF505050" />
<TextBlock FontSize="13"
FontWeight='Bold'
VerticalAlignment='Center'
Margin="6,5,3,6"
Text="XXX" Grid.ColumnSpan="2" OpacityMask="#FFCECECE" Foreground="#FFF3F3F3" Height="20" />
<Button x:Name='WindowCloseButton'
Grid.Column="2"
Width="17"
Height="17"
Cursor='Hand'
Margin="8,6,6,8"
VerticalAlignment='Center'
Click='WindowCloseButton_Click' FontFamily="Lucida Console">
<Button.Background>
<ImageBrush />
</Button.Background>
<Image Source="/Prototype;component/Resource/window-close.png"></Image>
</Button>
</Grid>
</HeaderedContentControl.Header>
<!-- New Content Area -->
<HeaderedContentControl.Content>
<ContentPresenter Content="{TemplateBinding Content}" />
</HeaderedContentControl.Content>
</HeaderedContentControl>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Foreground" Value="#FF7B7B7B"></Setter>
<Style.Triggers>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Foreground" Value="#333333"></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="#333333"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="23" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Menu Height="23" Name="menuContext" Margin="0,0" Background="#FF7B7B7B" Foreground="White" Grid.Row="0">
<MenuItem Header="File" Background="#FF7B7B7B" Foreground="White">
<MenuItem Header="Open" Margin="0,1"/>
<MenuItem Header="Save" Margin="0,1"/>
<MenuItem Header="Exit" Margin="0,1" UseLayoutRounding="True" />
</MenuItem>
</Menu>
<Grid Grid.Row="1" ShowGridLines="True">
<DockPanel LastChildFill="True">
<Border Height="25"
Background="SkyBlue"
BorderBrush="Black"
BorderThickness="1"
DockPanel.Dock="Top">
<TextBlock Foreground="Black">Dock = "Top"</TextBlock>
</Border>
<Border Height="25"
Background="SkyBlue"
BorderBrush="Black"
BorderThickness="1"
DockPanel.Dock="Top">
<TextBlock Foreground="Black">Dock = "Top"</TextBlock>
</Border>
<Border Height="25"
Background="LemonChiffon"
BorderBrush="Black"
BorderThickness="1"
DockPanel.Dock="Bottom">
<TextBlock Foreground="Black">Dock = "Bottom"</TextBlock>
</Border>
<Border Width="200"
Background="PaleGreen"
BorderBrush="Black"
BorderThickness="1"
DockPanel.Dock="Left">
<TextBlock Foreground="Black">Dock = "Left"</TextBlock>
</Border>
<Border Background="White"
BorderBrush="Black"
BorderThickness="1">
<TextBlock Foreground="Black">This content will "Fill" the remaining space</TextBlock>
</Border>
</DockPanel>
</Grid>
</Grid>
</Window>
Problem here is HeaderedContentControl uses StackPanel internally to layout header and content.
To fix that, use a Grid instead or re-template HeaderedContentControl to use Grid.
Example:
<ControlTemplate TargetType="HeaderedContentControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentControl Content="{TemplateBinding Header}" Grid.Row="0" />
<ContentControl Content="{TemplateBinding Content}" Grid.Row="1" />
</Grid>
</ControlTemplate>
Adding a similar answer to the accepted one, but which uses a DockPanel instead of a Grid for a simpler implementation with the same results.
Example with DockPanel:
<ControlTemplate TargetType="HeaderedContentControl">
<DockPanel>
<ContentControl Content="{TemplateBinding Header}" DockPanel.Dock="Top" />
<ContentControl Content="{TemplateBinding Content}" />
</DockPanel>
</ControlTemplate>