Its kinda simple if you just read the xaml. Take the definitions for the Grid. The size of these items are imperative that you set the correct values here, because these will not resize if items in your grid or stackpanel are bigger in width or height than what is set here :
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*"/>
<ColumnDefinition Width="80*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
As you can see we have two columns and only one row. A row is from the top to the bottom. Columns are from left to right. So when we set the below definitions, we are adding two columns for the grid control :
<ColumnDefinition Width="30*"/>
<ColumnDefinition Width="80*"/>
<Grid Grid.Column="0" Width="180" Grid.Row="0" Margin="0,10,557,9" Grid.ColumnSpan="2" Grid.RowSpan="2">
Grid.ColumnSpan sets the number of columns that a child item can span. When using the grid control it is important to use columnspan too, because this allows us to control how many column items can reside in each one. Most people use other controls and use dockers to avoid having to manually do the extra legwork involved when using a grid layout like mine. But its worth writing the extra code! As you can see, you can use the grid control to achieve similar functionality. Anyway, the next bit opens up the option to set individual properties on this grid, since we are still operating inside of its closing tag
</grid> :
<Grid.Background>
<SolidColorBrush Color="Beige"/>
</Grid.Background>
Self explanatory, as it sets the background for this grid column and row, because they are both set to 0. Zero is the first column in the actual grid layout itself :
And the same applies for rows :
If we changed these values to 1, it will move to set properties on the next ColumnDefinition/RowDefinition. (If we had additional Rows. We only have defined one.) Next I added a rectangle for style only, as it makes the UI look a bit more impressive especially with those radius corners curved :
<Rectangle Margin="10,10,10,10" Fill="WhiteSmoke" RadiusY="10" RadiusX="10" Width="162" Height="300">
<Rectangle.Effect>
<DropShadowEffect BlurRadius="20" Color="#FFDEDEDE" RenderingBias="Quality" ShadowDepth="1"/>
</Rectangle.Effect>
</Rectangle>
Next, while we are still in the same grid span of the first grid definition, we add the scrollviewer to this same ColumnDefinition :
<ScrollViewer Height="270" Width="160" Name="leftBarScroll" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
And the important part here is the use of a StackPanel, and not a DockPanel which is used to Stack the child items of this panel on the item vertically :
<StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="80" Margin="30,30,30,30" Height="Auto">
Note that :
VerticalAlignment="Stretch" HorizontalAlignment="Stretch" helps the child items to sit comfortably according to their own size. Then we add the buttons to this item. Finishing up, we have added the second Column
Grid.ColumnDefinitions to the xaml :
<Grid Grid.Column="1" Grid.Row="0" Grid.RowSpan="1" Grid.ColumnSpan="2" Background="Aqua" Margin="10,10,10,10" Height="Auto">
</Grid>
Hope this helps you understand how it works. If you have any other questions, you will need to wait for one of the other guys to chip in. As I will be away for the next day or so.
