Develop Reference

How to layout scrolling ListBox with auto max height and attach always visible Button below?

I want a layout where a ListBox is placed at the top of the window and a button is attached to the bottom of the ListBox. When the window is too small I want the ListBox to scroll and the button to be visible. When the window is too large, i.e. enough space for all controls and all list items, I want the ListBox to take up exactly as much space as it needs, and empty space be added below the button.
I have tried DockPanel:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Title="MainWindow" Height="200" Width="525">
<DockPanel LastChildFill="False">
<ListBox Name="List" DockPanel.Dock="Top">
<ListBoxItem>Item</ListBoxItem>
<ListBoxItem>Item</ListBoxItem>
<ListBoxItem>Item</ListBoxItem>
<ListBoxItem>Item</ListBoxItem>
<ListBoxItem>Item</ListBoxItem>
<ListBoxItem>Item</ListBoxItem>
</ListBox>
<Button Content="Button" DockPanel.Dock="Top"></Button>
</DockPanel>
</Window>
But then the button is not visible when the window is too small.
I have tried Grid:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Title="MainWindow" Height="200" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<ListBox Name="List" Grid.Row="0">
<ListBoxItem>Item</ListBoxItem>
<ListBoxItem>Item</ListBoxItem>
<ListBoxItem>Item</ListBoxItem>
<ListBoxItem>Item</ListBoxItem>
<ListBoxItem>Item</ListBoxItem>
<ListBoxItem>Item</ListBoxItem>
</ListBox>
<Button Content="Button" Grid.Row="1"></Button>
</Grid>
</Window>
But when the window is larger than needed, the ListBox is stretched larger than its content instead of empty space being added below the button.
If I change the RowDefinitions to:
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
Then the Listbox does not scroll when the window is too small.
Any ideas?

try change Grid.VerticalAlignment. If it is set to Stretch (default value) and the window is larger than needed, the ListBox is also stretched because of Height="*".
<Grid VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
</Grid>

MainWindow height\width will be set according current view WPF

I have a question related WPF MVVM- I want that MainWindow height and width will be set according current view height\width.
How can I define it?
MainWindow.xaml
<Window x:Class="Project.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Project"
xmlns:views ="clr-namespace:Project.Views"
mc:Ignorable="d"
Title="MainWindow"
Height="{Binding Source = {x:Static SystemParameters.PrimaryScreenHeight}, Converter={local:RatioConverter}, ConverterParameter='0.6'}"
Width="{Binding Source={x:Static SystemParameters.PrimaryScreenWidth}, Converter={local:RatioConverter}, ConverterParameter='0.5'}"
>
<Grid>
<ContentControl Name="placeholder"></ContentControl>
</Grid>
</Window>
In One of the views
<UserControl x:Class="Project.Views.MsgBox"
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:local="clr-namespace:Project.Views"
mc:Ignorable="d"
>
<UserControl.Background>
<SolidColorBrush Color="#000000" Opacity="0.5" />
</UserControl.Background>
<Grid Opacity="1" >
<Grid Width="360" Background="White" Opacity="1" Margin="0,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition MinHeight="90" Height="auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
... any code...
</Grid>
</UserControl>

If you want Window to have the same size as its content, set SizeToContent property to WidthAndHeight:
<Window ... SizeToContent="WidthAndHeight">
<Grid>
<ContentControl Name="placeholder"></ContentControl>
</Grid>
</Window>

How to add a Scrollbar in Listbox in a Grid in XAML?

I'm new to XAML and I cant seem to figure this out. I want a two column page that is docked (in winforms term) to its container. The first column has a listbox and I want this to automatically show scrollbar when needed. I was able to do so but only if I set the Height or MaxHeight of the ListBox. My problem with that is the listbox wont grow in size anymore when the main windown/form is resized. What I want is to dock the listbox to the first column so it will resize when the form is resized and show a scrollbar when needed.
Here is the code the does not show a scrollbar:
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0">
<ListBox x:Name="lstView"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Margin="10">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="20">
<TextBlock Text="{Binding}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
Here is the code that shows a scrollbar but has a fixed height.
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0">
<ListBox x:Name="lstView"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Height="200"
Margin="10">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="20">
<TextBlock Text="{Binding}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>

The problems with scroll bar visibility when using a StackPanel. I think it is because the StackPanel is always as big as it needs to be to contain all of its children. Try reorganizing the layout to remove the StackPanel (use a Grid instead) and see if that helps.

how to overflow element to be on top on another container?

<Window x:Class="TestringWpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Background="Yellow"></StackPanel>
<StackPanel Grid.Row="1" Background="Green">
<Button Margin="0,0,0,10000000000">ABC</Button>
</StackPanel>
</Grid>
</Window>
The above code will gives me the situation below:
As you can see, the button was declared at the second StackPanel and hence no matter how I set the margin, the button couldn't go out of the green background. I'm wondering what can I do to declare the button in <StackPanel Grid.Row="1"> and appear partly on <StackPanel Grid.Row="0"> .
In conclusion, how to make an element overflow in it's container and overlap on another container? Is it possible?

Another option would be a RenderTransform.
<Button Content="ABC">
<Button.RenderTransform>
<TranslateTransform Y="-50"></TranslateTransform>
</Button.RenderTransform>
</Button>

Placing controls under User Control

I'm new to WPF, and I am creating a user control as follows:
<UserControl x:Class="WpfApplication3.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"
mc:Ignorable="d"
x:Name="MyUserControl2"
d:DesignHeight="300" d:DesignWidth="300" Background="Coral">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Content="a" Grid.Row="0"/>
<Button Content="b" Grid.Row="1"/>
<Button Content="c" Grid.Row="2"/>
<ContentPresenter Grid.Row="3"/>
</Grid>
This produces the following layout, when the orange area is the content preseter:
In the main window that uses the user control, I want to inject controls into the content preseter
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication3"
Title="MainWindow" Height="350" Width="525">
<Grid>
<local:MyUserControl>
<local:MyUserControl.Content>
<Button Content="d"/>
</local:MyUserControl.Content>
</local:MyUserControl>
</Grid>
I would expect the get the following layout:
but instead the entire user control gets overlapped by button d.
How do I manage to do so?

Try placing button itself in Main Window -
<Grid>
<local:MyUserControl/>
<Button Content="d"/>
</Grid>
OR
<Grid>
<Grid.Resources>
<DataTemplate x:Key="MyContent">
<Button Content="d"/>
</DataTemplate>
</Grid.Resources>
<local:MyUserControl/>
</Grid>
and in your User Control -
<ContentPresenter Grid.Row="3" ContentTemplate="{DynamicResource MyContent}"/>

I'm pretty sure that that won't work. When you set the content of MyControl to the button you're saying that the whole content of the user control should be the Button. I think you need to have a property on your user control then bind the contentpresenter to that.
So Something like MyUserControl.SubContent {get; set;} then you can bind the ContentPresenter to that.