Develop Reference

Vertical scrollbar for a listview within an expander

I have a grid(user-control) as follows with rows 1:5 being an Expander which holds a ListView, however my attempts to get the Vertical scrollbar for the ListView within the Expander have not been successful.
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="*"></RowDefinition> <!--Expander with ListView-->
<RowDefinition Height="*"></RowDefinition> <!--Expander with ListView-->
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
The Expander with the ListView is as below, I also attempted enclosing the Expander within a ScrollViewer but then the sizing of the collapsed header takes up all the space
<Expander IsExpanded="True"
Background="#1F4762"
BorderBrush="#1F4762"
Foreground="#FFEEEEEE"
Grid.Row="1"
Visibility="{qc:Binding '$P.View.Count > 0 ? Visibility.Visible: Visibility.Collapsed', P={Binding AListCVS}}"
BorderThickness="1,1,1,0">
<Expander.Header>
<TextBlock FontWeight="Bold"
VerticalAlignment="Center"
Margin="5"
FontSize="14"
Width="200">
<Run Text="A Listers : " />
<Run Text="{Binding AListCVS.View.Count, Mode=OneWay}"></Run>
</TextBlock>
</Expander.Header>
<Expander.Content>
<ListView
HorizontalContentAlignment="Stretch"
AlternationCount="2"
Style="{StaticResource aCompareTemplate}"
ItemTemplateSelector="{StaticResource ATemplateSelector}"
x:Name="lview"
ItemsSource="{Binding AListCVS.View}"
Visibility="{Binding }">
</ListView>
</Expander.Content>
</Expander
The list template is as follows
<Style x:Key="aCompareTemplate"
TargetType="ListView">
<!--Control Template-->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0"
MinWidth="900"
VerticalAlignment="Center"
Background="#D4E3F4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"></ColumnDefinition>
<ColumnDefinition MinWidth="200"></ColumnDefinition>
<ColumnDefinition MinWidth="400"></ColumnDefinition>
<ColumnDefinition Width="200*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Column="0"
Height="30">
<TextBlock Text=""
FontWeight="Bold"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextWrapping="Wrap" />
</Border>
<Border Grid.Column="1"
Height="30">
<TextBlock Text=""
FontWeight="Bold"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</Border>
<Border Grid.Column="2"
Height="30">
<TextBlock Text="A Data"
FontWeight="Bold"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</Border>
<Border Grid.Column="3"
Height="30">
<TextBlock Text="B Data"
FontWeight="Bold"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</Border>
</Grid>
<ItemsPresenter Grid.Row="1"></ItemsPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Any pointers are much appreciated.

Usually the problem with Scroll is due to the container in which it is inserted allow infinite size, and therefore it does not appear. Possibly you can correct this by setting a MaxHeight to your Grid.Row, or to your ListView.
Edit.: as was suggested by #FelixD. and as my above comment helped to solve the problem I am putting it here so the question can be marked as resolved.

Image not displaying at Run time

The image is not getting displayed at run time.It is displaying in the designer.
XAML:
<ScrollViewer Grid.Row="1" Grid.Column="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="/Assets/logo_108x108.png" Stretch="Fill" Width="400" VerticalAlignment="Top" HorizontalAlignment="Center" Height="133" Grid.RowSpan="3" />
<phone:WebBrowser x:Name="DescriptionBrowser" Grid.Row="1" Grid.RowSpan="2" Navigating="DescriptionBrowser_Navigating" Margin="0,149,0,0"/>
<TextBlock x:Name="ErrorBlock" Visibility="Collapsed" Foreground="Black" FontSize="20" Grid.Row="1" Grid.Column="1" Text="{Binding LocalizedResourcesFromCommonDll.ErrorGeneral, Source={StaticResource LocalizedCommonStrings}}" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Segoe UI"/>
</Grid>
</ScrollViewer>
</Grid>
I tried replacing the Image tag ,but still it doesn't work.

I believe you mean something like this. Keep it simple as possible and do not set properties you might not need.
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="/Resources/AnyLogo.png" />
<ScrollViewer Grid.Row="1">
<WebBrowser />
</ScrollViewer>
<TextBlock Grid.Row="2" Text="{Binding TestText}">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding TestText}" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>

I tried the proposed answer and it works for me, with the following remarks:
The Resources directory is on the same level as the View, so the Source looks like this: Source="Resources/img.png"
Also, on the Properties of the image the Build Action is set to Resource (by default, but you can still check it)

Buttons get clipped when I resize the window in WPF

I have a UserControl with MinWidth and MinHeight set.
There a grid and many controls inside.
I have another Grid inside the main grid. The inner grid's code is as below.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<DataGrid Grid.Row="0" helpers:RowHeaderNumber.DisplayRowNumber="True" AutoGenerateColumns="False"
RowHeaderWidth="40" CanUserSortColumns="False" CanUserResizeColumns="False"
Margin="10,65,20,0" ItemsSource="{Binding ExpressionCollection, Mode=TwoWay}"
SelectionUnit="CellOrRowHeader" SelectionChanged="ExpressionGrid_SelectionChanged" PreviewMouseRightButtonUp="ExpressionGrid_PreviewMouseRightButtonUp" BorderBrush="{x:Null}" VerticalAlignment="Top" >
<DataGrid.RowHeaderStyle>
<Style TargetType="DataGridRowHeader">
<Setter Property="ContextMenu" Value="{StaticResource ExpressionContextMenu}"/>
<Setter Property="Padding" Value="4,0,0,20"/>
<Setter Property="Background" Value="#FFF1F0F0"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="1,0,1,1"/>
</Style>
</DataGrid.RowHeaderStyle>
</DataGrid>
<Button Grid.Row="1" Content="OK" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="75" Click="Ok_Button_Click" Margin="0,0,112,10"/>
<Button Grid.Row="1" Content="Cancel" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="75" Click="Cancel_Button_Click" Margin="0,0,20,10"/>
</Grid>
The buttons in the bottom get clipped when I resize the window. What changes should I make to make the DataGrid resize when the window is resized?

<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<DataGrid Grid.Row="0"/>
<Button Grid.Row="1" HorizontalAlignment="Left" Content="Button 1"/>
<Button Grid.Row="1" Content="Button 2" HorizontalAlignment="Left" Margin="55,0,0,0"/>
</Grid>
The above code doesnt clip the Buttons.
Remember not to set Width and Height
PS: It will Clip when the Window Width is less than 50 and in such similar cases :) thats obvious :)

Remove the Margin & width from the button. the problem should be. if the width goes less then 75+120 + 75 + 20 it will start clipping the button. I would suggest not to use the width & margin instead use extra row & column in your grid & set it accordingly. also do give min & max height or min & max width to your user control to control it overall.
See the following example
<Window x:Class="Test1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="100" Width="200" MinHeight="100" MinWidth="100">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Width="50" Margin="20"></Button>
<Button Width="50" Margin="20" Grid.Column="1"></Button>
</Grid>
</Window>
in This example buttons will always clip when you resize & decrease the size of your window.
But if you use it like this it will never clip
<Window x:Class="Test1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="100" Width="200" MinHeight="100" MinWidth="100">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button></Button>
<Button Grid.Column="1"></Button>
</Grid>

Fitting WPF DataGrid in a Grid control

I have a DataGrid control inside a Grid control in one of my WPF windows.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<SomeControl Grid.Row="0" />
<DataGrid Grid.Row="1" VerticalScrollBarVisibility="Visible" VerticalAlignment="Stretch"/>
</Grid>
The problem is that when I add rows to the DataGrid it flows out of the containing window and its scroll bar remains inactive. How do I solve this problem and make the DataGrid's scroll bar to function correctly?

You may try as follows
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<DataGrid Grid.Row="1" HorizontalAlignment="Left" Margin="54,65,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="382" VerticalScrollBarVisibility="Visible">
<DataGrid.Columns>
<DataGridTextColumn Header="ID"/>
<DataGridTextColumn Header="ViewCount" />
<DataGridTextColumn Header="Title" />
</DataGrid.Columns>
</DataGrid>
</Grid>
You need to provide some height to the DataGrid ,as you have RowDefinition Height="*" so the vertical Scrolbar was not active,try to give some height to the DataGrid.
Hope it will help you

I had the same problem;my datagrid would flow out of my grid. I have a bunch of grids I'm using, so the app will scale to the screen size. The lower row of the main grid has three data grids.
Path=ActualHeight will only work when you are fitting the datagrid with margins; take it out! Now with my app everything resizes with the screen, except my data input UI elements, which I don't want them to. Good luck! I hope this helps.
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Margin="3" >
<DataGrid x:Name="DgDbNames" CanUserAddRows="false" Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}}" VerticalScrollBarVisibility="Auto" AlternatingRowBackground="LightGray" ItemsSource="{Binding Source=Dbs}" AutoGenerateColumns="False" CanUserResizeColumns="True" Margin="10" />
</Border>
<Border Grid.Column="1" Margin="3" >
<DataGrid x:Name="DgTableNames" CanUserAddRows="false" Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}}" VerticalScrollBarVisibility="Auto" AlternatingRowBackground="LightGray" ItemsSource="{Binding Source=Tables}" AutoGenerateColumns="False" CanUserResizeColumns="True" Margin="10" />
</Border>
<Border Grid.Column="2" Margin="3" >
<DataGrid x:Name="DgSprocNames" CanUserAddRows="false" Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}}" VerticalScrollBarVisibility="Auto" AlternatingRowBackground="LightGray" ItemsSource="{Binding Source=Sprocs}" AutoGenerateColumns="False" CanUserResizeColumns="True" Margin="10" />
</Border>
</Grid>

How to customize DataGrid header?

How can I customize DataGrid Header?
This picture shows what I want to do...
I try this, but it not working...
<DataGridTemplateColumn.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Text="Název modelu"></TextBlock>
<TextBlock Grid.Column="0" Grid.Row="1" Text="Cena bez DPH"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="1" Text="Cena s DPH"></TextBlock>
</Grid>
</DataGridTemplateColumn.Header>
Can you help me, how can I do it?

Try to set the HorizontalAlignment to Center on your TextBlock
<TextBlock HorizontalAlignment="Center"
Grid.Column="1" Grid.Row="1" Text="Cena s DPH"></TextBlock>
You can start here to read more about the WPF Layout system
You also need to set the HorizontalContentAlignment to for the DataGridColumnHeader
Add this to the DataGridTemplateColumn:
<DataGridTemplateColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</DataGridTemplateColumn.HeaderStyle>

Try Width="*" on the ColumnDefinitions