Develop Reference

How to do a list of square in GRID XAML?

I am trying to create a grid in XAML by the following:
GRID Type
I tried something like this but I have no ideea how to add the red squares.
Do I have to make a grid in grid?
Right now, I have this code
<Window x:Class="MonitorComenzi.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:MonitorComenzi"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" FontSize="30" TextAlignment="Center" FontWeight="Bold" Foreground="Black">Comenzi plasate</TextBlock>
<TextBlock Grid.Row="0" Grid.Column="1" FontSize="30" TextAlignment="Center" FontWeight="Bold" Foreground="Green">Comenzi preparate</TextBlock>
</Grid>
</Window>

You can make nested Grids, its absolutly fine, but a single StackPanel do the trick as well. Something like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" FontSize="30" TextAlignment="Center" FontWeight="Bold" Foreground="Black">Comenzi plasate</TextBlock>
<TextBlock Grid.Row="0" Grid.Column="1" FontSize="30" TextAlignment="Center" FontWeight="Bold" Foreground="Green">Comenzi preparate</TextBlock>
<StackPanel Orientation="Horizontal"
Margin="10"
Grid.Row="1"
Grid.Column="0">
<Rectangle Fill="Red" Width="30" Height="30" Margin="5 0"/>
<Rectangle Fill="Red" Width="30" Height="30" Margin="5 0"/>
<Rectangle Fill="Red" Width="30" Height="30" Margin="5 0"/>
<Rectangle Fill="Red" Width="30" Height="30" Margin="5 0"/>
</StackPanel>
</Grid>

Set height of element to height of neighbouring element

I have a GUI in WPF application which looks like that:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Vertical">
<Border Background="Beige" BorderThickness="1" BorderBrush="Black" Width="100" Height="50" Margin="2"></Border>
<Border Background="Beige" BorderThickness="1" BorderBrush="Black" Width="100" Height="90" Margin="2"></Border>
</StackPanel>
<Border Background="Beige" BorderThickness="1" BorderBrush="Black" Margin="2">
<StackPanel>
<StackPanel Orientation="Horizontal">
<Button Content="Some"/>
<Button Content="Buttons"/>
</StackPanel>
<Label Content="Some Label"/>
<ListView ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListViewItem>Item1</ListViewItem>
<ListViewItem>Item2</ListViewItem>
<!-- and so on...-->
<ListViewItem>Item8</ListViewItem>
</ListView>
</StackPanel>
</Border>
</StackPanel>
</Grid>
The two borders to the left are just placeholders for the GUI elements in the real application. The GUI element looks like this:
I want the right StackPanel to be just as high as the left StackPanel, like in the following screenshot:
For the screenshot, I was manually setting the MaxHeight property of the ListView to right value, but of course that is no satisfying solution and it will become impossible if I don't know at compile time which and how many elements populate the left StackPanel.
Is there any solution to this Problem? I was trying a binding:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Vertical" Name="Left">
<Border Background="Beige" BorderThickness="1" BorderBrush="Black" Width="100" Height="50" Margin="2"></Border>
<Border Background="Beige" BorderThickness="1" BorderBrush="Black" Width="100" Height="90" Margin="2"></Border>
</StackPanel>
<Border Background="Beige" BorderThickness="1" BorderBrush="Black" Margin="2" Height="{Binding ElementName=Left, Path=Height}">
<!-- as above -->
</Border>
</StackPanel>
</Grid>
But I did not succeed with it, also when I bind to the ActualHeight of the left StackPanel. Any suggestions?

Stack panels expand to fit their contents. Instead you need to put the ListView in a container of a fixed size (I've used a Grid with a row of height *), that takes its size from the boxes in the first column.
I used a binding to ActualHeight, that was very similar to yours.
The other important difference was setting VerticalAlignment="Top" on the first stack panel, otherwise it automatically sizes to the same height as the border.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Vertical" Name="Left" VerticalAlignment="Top">
<Border Background="Beige" BorderThickness="1" BorderBrush="Black" Width="100" Height="50" Margin="2"></Border>
<Border Background="Beige" BorderThickness="1" BorderBrush="Black" Width="100" Height="90" Margin="2"></Border>
</StackPanel>
<Border Height="{Binding ElementName=Left, Path=ActualHeight}" >
<Border Background="Beige" BorderThickness="1" BorderBrush="Black" Margin="2">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Button Content="Some"/>
<Button Content="Buttons"/>
</StackPanel>
<Label Grid.Row="1" Content="Some Label"/>
<ListView Grid.Row="2" ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListViewItem>Item1</ListViewItem>
<ListViewItem>Item2</ListViewItem>
<ListViewItem>Item2</ListViewItem>
<ListViewItem>Item2</ListViewItem>
<ListViewItem>Item2</ListViewItem>
<ListViewItem>Item2</ListViewItem>
<!-- and so on...-->
<ListViewItem>Item8</ListViewItem>
</ListView>
</Grid>
</Border>
</Border>
</StackPanel>
</Grid>

<StackPanel>
<Grid Width="300" Height="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<Border Background="Beige" BorderThickness="1" BorderBrush="Black" Margin="2"></Border>
<Border Grid.Row="1" Background="Beige" BorderThickness="1" BorderBrush="Black" Margin="2"></Border>
</Grid>
<Border Grid.Column="1" Background="Beige" BorderThickness="1" BorderBrush="Black" Margin="2">
<StackPanel>
<StackPanel Orientation="Horizontal">
<Button Content="Some"/>
<Button Content="Buttons"/>
</StackPanel>
<Label Content="Some Label"/>
<ListView ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListViewItem>Item1</ListViewItem>
<ListViewItem>Item2</ListViewItem>
<!-- and so on...-->
<ListViewItem>Item8</ListViewItem>
</ListView>
</StackPanel>
</Border>
</Grid>
</StackPanel>

Try this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel
Name="FirstPanel"
Grid.Column="0"
VerticalAlignment="Top">
<Border
Background="Beige"
BorderThickness="1"
BorderBrush="Black"
Width="100"
Height="50"
Margin="2"/>
<Border
Background="Beige"
BorderThickness="1"
BorderBrush="Black"
Width="100"
Height="90"
Margin="2"/>
</StackPanel>
<Border
Name="ContainerBorder"
Grid.Column="1"
Background="Beige"
BorderThickness="1"
BorderBrush="Black"
Margin="2"
VerticalAlignment="Top"
MaxHeight="{Binding ElementName=FirstPanel, Path=ActualHeight}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Button Content="Some"/>
<Button Content="Buttons"/>
</StackPanel>
<Label Grid.Row="1" Content="Some Label"/>
<ListView Grid.Row="2" ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListViewItem>Item1</ListViewItem>
<ListViewItem>Item2</ListViewItem>
<ListViewItem>Item3</ListViewItem>
<ListViewItem>Item4</ListViewItem>
<ListViewItem>Item5</ListViewItem>
<ListViewItem>Item6</ListViewItem>
<ListViewItem>Item7</ListViewItem>
<ListViewItem>Item8</ListViewItem>
</ListView>
</Grid>
</Border>
</Grid>
Output:

Resize Scrollviewer and StackPanel WPF C#

how can I make the scrollviewer resize to the bottom edge of the screen, so as to maximize to resize with the mouse ? The way the code is, when the screen is maximized the scroll bar does not appear and it is not possible to scroll the contents.
My xaml File
<Window x:Class="AppSearch.MainWindow" x:Name="mainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="AppSearch" Height="600" Width="820"
WindowStartupLocation="CenterScreen"
Loaded="Window_Loaded"
StateChanged="mainWindow_StateChanged"
ResizeMode="CanResize"
PreviewKeyDown="mainWindow_PreviewKeyDown">
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="stkContentLeft"
MinWidth="510"
MinHeight="560"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
LoadCompleted="stkContentLeft_LoadCompleted"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Margin="0,0,05,0" Grid.Column="0"/>
<StackPanel Grid.Column="1" x:Name="stckContentRight" Width="276"
Height="{Binding Parent.ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}"
Orientation="Vertical"
HorizontalAlignment="Right">
<Grid VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<StackPanel Height="auto" Grid.Row="0">
<StackPanel x:Name="help" Width="20" Height="20" HorizontalAlignment="Right" Margin="0,5,10,0">
<Image Source="Imagens/help_icon.png"/>
</StackPanel>
<StackPanel x:Name="stkUcSupervisor" Height="50" Width="276" Margin="0,5,0,0" HorizontalAlignment="Center"/>
<TextBox x:Name="txtSearch"
ToolTip="put your key..."
FontSize="13"
Foreground="Black"
BorderThickness="1"
TextWrapping="Wrap"
Margin="0,5,0,05" Width="270" HorizontalAlignment="Center"/>
</StackPanel>
<ScrollViewer x:Name="scroll"
CanContentScroll="True"
IsDeferredScrollingEnabled="False"
UseLayoutRounding="False"
VerticalScrollBarVisibility="Visible"
VerticalAlignment="Top"
BorderThickness="1"
BorderBrush="Gray"
Margin="0,05,0,0"
Grid.Row="1"
Height="455">
<StackPanel x:Name="stkListOfUserControls"
CanVerticallyScroll="True"
Height="455"
OverridesDefaultStyle="False">
<StackPanel.ScrollOwner>
<ScrollViewer AllowDrop="True" />
</StackPanel.ScrollOwner>
</StackPanel>
</ScrollViewer>
</Grid>
</StackPanel>
<StackPanel x:Name="stkPopUp"
Canvas.Bottom="0"
Canvas.Left="0"
Height="285"
Width="280"
VerticalAlignment="Bottom"/>
</Grid>

StackPanel in Grid: limit height

I have a big main grid with several rows and columns. I want to place in one of these cells a vertical stackpanel. In this stackpanel there is a textblock and a scrollviewer. My problem is, that the stackpanel doesn't get limited by the cell, instead the stackpanel gets big enough to fit the whole scrollviewer.
How can I solve this?
EDIT: my xaml code:
<Grid x:Name="Grid1" Margin="120,0,0,0" Width="1244">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0*"/>
<ColumnDefinition Width="33*"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="71"/>
<RowDefinition Height="40"/>
<RowDefinition/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="3" Grid.Row="2" Grid.ColumnSpan="2" Margin="0">
<TextBlock TextWrapping="Wrap" FontSize="48" Margin="0" VerticalAlignment="Top" Foreground="#FF0083FF" Text="Top 10:" HorizontalAlignment="Left" FontFamily="Segoe UI Light"/>
<ScrollViewer Margin="0,20,0,0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible">
<StackPanel>
<ListView x:Name="TopListView" ItemsSource="{Binding}" SelectionMode="None" Foreground="White" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel >
<TextBlock FontSize="32" Text="1" Foreground="#FF0083FF"/>
</StackPanel>
<TextBlock Text="{Binding Text}" Foreground="Black"
FontSize="16" Margin="0,0,0,0" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>

Use another Grid instead of a StackPanel:
<Grid Grid.Column="3" Grid.Row="2" Grid.ColumnSpan="2" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock FontSize="48" FontFamily="Segoe UI Light"
Foreground="#FF0083FF" HorizontalAlignment="Left"
TextWrapping="Wrap" Text="Top 10:"/>
<ScrollViewer Grid.Row="1" Margin="0,20,0,0"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Visible">
...
</ScrollViewer>
</Grid >

How to make a grid in a DataTemplate for a ItemTemplate auto-size to ListBox width?

So I have the following DataTemplate for a ListBox.ItemTemplate:
<DataTemplate x:Key="Tweet">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image
Grid.Column="0"
Source="{Binding ProfileImageURL}"
Width="50" Height="50"/>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock
Grid.Row="0"
FontSize="15"
FontWeight="Bold"
Text="{Binding User}"/>
<TextBlock
Grid.Row="1" TextWrapping="Wrap"
Text="{Binding Status}"/>
<DockPanel
Grid.Row="2">
<TextBlock
DockPanel.Dock="Left"
FontSize="10" TextWrapping="WrapWithOverflow"
Text="{Binding TimeAgo}" TextAlignment="Justify"/>
<TextBlock
DockPanel.Dock="Left"
FontSize="10" TextWrapping="Wrap"
Text="{Binding Source}"/>
</DockPanel>
</Grid>
</Grid>
</DataTemplate>
The problem is that it doesn't auto-size to the ListBox. The text gets clipped:
TwitBy preview
How to fix it?
Here's the listBox XAML definition:
<ListBox
x:Name="tweetsListBox"
Margin="3,0"
Grid.Row="1"
Background="{x:Null}" Grid.IsSharedSizeScope="True"
ItemsSource="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemTemplate="{DynamicResource Tweet}"/>
Any help would be appreciated.
Thanks

Try this:
<DataTemplate x:Key="Tweet">
<Grid Width="{Binding ElementName=tweetsListBox, Path=ActualWidth>">