Event not being called on Grid - c#

Problematic code
<Canvas x:Name="CanvaContainer" Margin="0,0,0,0" Background="Transparent" Height="360" Width="540" MouseMove="CanvaContainer_MouseMove" MouseLeftButtonDown="CanvaContainer_MouseLeftButtonDown" MouseRightButtonDown="CanvaContainer_MouseRightButtonDown">
<Grid x:Name="GridContainer" Background="Transparent" Height="360" Width="540">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="1" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="2" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="3" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="4" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="5" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="6" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="7" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="8" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="9" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="10" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="11" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
</Grid>
</Canvas>
Whole code
<Grid Name="GraphGrid" Background="Transparent" Margin="140,30,0,0" Width="582" Height="620" HorizontalAlignment="Left" VerticalAlignment="Top">
<Border x:Name="CanvasBorder" BorderThickness="1" BorderBrush="Black" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="40,230,0,0" >
<Canvas x:Name="CanvaContainer" Margin="0,0,0,0" Background="Transparent" Height="360" Width="540" MouseMove="CanvaContainer_MouseMove" MouseLeftButtonDown="CanvaContainer_MouseLeftButtonDown" MouseRightButtonDown="CanvaContainer_MouseRightButtonDown">
<Grid x:Name="GridContainer" Background="Transparent" Height="360" Width="540">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="1" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="2" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="3" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="4" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="5" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="6" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="7" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="8" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="9" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="10" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="11" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
</Grid>
</Canvas>
</Border>
<Border HorizontalAlignment="Left" Height="18" Margin="40,0,0,0" VerticalAlignment="Top" Width="542" BorderBrush="Black" >
<Grid x:Name="gridMonth">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="45" />
<ColumnDefinition Width="45" />
<ColumnDefinition Width="45" />
<ColumnDefinition Width="45" />
<ColumnDefinition Width="45" />
<ColumnDefinition Width="45" />
<ColumnDefinition Width="45" />
<ColumnDefinition Width="45" />
<ColumnDefinition Width="45" />
<ColumnDefinition Width="45" />
<ColumnDefinition Width="45" />
<ColumnDefinition Width="45" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sSep, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="1" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sOct, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="2" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sNov, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="3" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sDec, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="4" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sJan, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="5" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sFeb, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="6" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sMar, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="7" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sApr, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="8" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sMay, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="9" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sJune, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="10" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sJul, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="11" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sAug, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
</Grid>
</Border>
<Border BorderBrush="Black" BorderThickness="0" HorizontalAlignment="Left" Height="480" Margin="0,230,0,0" VerticalAlignment="Top" Width="40">
<Grid x:Name="depthLeader">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderBrush="Black" BorderThickness="1,1,0,1" CornerRadius="3">
<TextBlock Name="depth0" Text="-0,25m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="1" BorderBrush="Black" BorderThickness="1,1,0,1" CornerRadius="3">
<TextBlock Name="depth1" Text="-0,5m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="2" BorderBrush="Black" BorderThickness="1,1,0,1" CornerRadius="3">
<TextBlock Name="depth2" Text="-0,75m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="3" BorderBrush="Black" BorderThickness="1,1,0,1" CornerRadius="3">
<TextBlock Name="depth3" Text="-1m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="4" BorderBrush="Black" BorderThickness="1,1,0,1" CornerRadius="3">
<TextBlock Name="depth4" Text="-1,5m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="5" BorderBrush="Black" BorderThickness="1,1,0,1" CornerRadius="3">
<TextBlock Name="depth5" Text="-2m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="6" BorderBrush="Black" BorderThickness="1,1,0,1" CornerRadius="3">
<TextBlock Name="depth6" Text="-2,5m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="7" BorderBrush="Black" BorderThickness="1,1,0,1" CornerRadius="3">
<TextBlock Name="depth7" Text="-3m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="8" BorderBrush="Black" BorderThickness="1,1,0,1" CornerRadius="3">
<TextBlock Name="depth8" Text="-3,5m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="9" BorderBrush="Black" BorderThickness="1,1,0,1" CornerRadius="3">
<TextBlock Name="depth9" Text="-4m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="10" BorderBrush="Black" BorderThickness="1,1,0,1" CornerRadius="3">
<TextBlock Name="depth10" Text="-4,5m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="11" BorderBrush="Black" BorderThickness="1,0,0,1" CornerRadius="3">
<TextBlock Name="depth11" Text="-5m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</Grid>
</Border>
<Button Margin="20,-10,542,590" Name="nextMonth" Content=">" Background="LightGray" Width="20" Height="20" Click="nextMonth_Click"/>
<Button Margin="0,-10,562,590" Name="previousMonth" Content="<" Background="LightGray" Width="20" Height="20" Click="previousMonth_Click"/>
<Grid x:Name="AirTempGd" Background="Transparent" HorizontalAlignment="Left" Height="175" Margin="10,20,0,0" VerticalAlignment="Top" Width="572"/>
</Grid>
That would be the code I'm working one, I gave it to you all so you will get the context better. So my problem is the mouse enter event is not being called I,ve tried with breakpoint to console output and it's never getting called I don't know why I've also tried other event like MouseDown or MouseLeave and it's not working yet even with the background being transparent I have no clue where's my problem I could use some help.
EDIT
I may be wrong but I think it because it being in another container but I don't know if it's the problem and if it's I don't know how to fix it except removing container but I need them. But it would be stupid if this is the error so I would be surprised.


Reason is your rectangle is missing content. Simple fix is to fill it with transparent color
<Rectangle Fill="Transparent" Grid.Column="0" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"

Related

How to move canvas?

I am using canvas within which there are several controls.
I want to allow user a facility to easily drag and drop canvas anywhere within the control.
How can i move canvas with name myCanvas?
Below is the xml code:
<UserControl x:Class="EMap.Windows.MainWindowNew"
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"
xmlns:src="clr-namespace:EMap"
d:DesignHeight="500" d:DesignWidth="1000" Background="#FF3E3E40">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120*"/>
<ColumnDefinition Width="121*"/>
<ColumnDefinition Width="285*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="49*"/>
<RowDefinition Height="101*"/>
</Grid.RowDefinitions>
<Canvas Name="myCanvas" Height="800" Background="Aqua"
Grid.Row="0" Grid.RowSpan="2" Panel.ZIndex="1" Opacity="0.5" Canvas.Left="0" Canvas.Top="0">
<Label Content="Lattitude" Foreground="Black" Padding="5"/>
<Label Content="Longitude" Foreground="Black" Padding="5" Canvas.Top="25"/>
<Label Content="Camera Name" Foreground="Black" Padding="5" Canvas.Top="50"/>
<Border Canvas.Left="85" Padding="2"
VerticalAlignment="Center"
BorderBrush="Green"
BorderThickness="1">
<TextBox x:Name="Lattitude" Background="Black" TextWrapping="Wrap" Width="119" Foreground="White"/>
</Border>
<Border Canvas.Left="85" Canvas.Top="25" HorizontalAlignment="Center"
VerticalAlignment="Center"
Padding="1"
BorderBrush="Green"
BorderThickness="1">
<TextBox Name="Longitude" Background="Black" TextWrapping="Wrap" Width="119" Foreground="White"/>
</Border>
<Border Canvas.Left="85" Canvas.Top="50" HorizontalAlignment="Center"
VerticalAlignment="Center"
Padding="1"
BorderBrush="Green"
BorderThickness="1">
<TextBox Name="camName" Background="Black" TextWrapping="Wrap" Width="119" Foreground="White"/>
</Border>
<Button Name="PlaceCamera" Content="Place Camera" Foreground="Black"
HorizontalAlignment="Center" VerticalAlignment="Bottom" Background="Transparent"
Canvas.Left="110" Canvas.Top="75" Click="PlaceCamera_Click"/>
<Button Name="RemoveCamera" Content="Remove Camera" Foreground="Black"
HorizontalAlignment="Center" VerticalAlignment="Bottom" Background="Transparent"
Canvas.Left="110" Canvas.Top="100" Click="RemoveCamera_Click"/>
<Button Name="GetAllCamera" Content="Get all Cameras" Foreground="Black"
HorizontalAlignment="Center" VerticalAlignment="Bottom" Background="Transparent"
Canvas.Left="110" Canvas.Top="125" Click="GetAllCamera_Click"/>
</Canvas>
<GroupBox Name="mapgroup" Panel.ZIndex="0" Background="Teal"
Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="3"
VerticalContentAlignment="Stretch"
HorizontalContentAlignment="Stretch">
<src:Map x:Name="MainMap" CanDragMap="False" Zoom="13" MaxZoom="24" MinZoom="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</GroupBox>

C# WPF Dynamic created Labels in a Grid dont show on the Top of the Grid

Hi (sry for bad english) i have the problem that i create dynamic rows with label content in a grid but they dont begin at the top of the Grid.
private void SelectAccounts(string AccountUsername) //Findet Nutzer und Account ID und gibt alle Accounts des Nutzers aus //// neu machen jede reihe einzeln zurückgeben!!!!!!!
{
MId=database.GetID(this.MasterUsername,"MasterUser","MId"); //for database request
AccId = database.GetID(AccountUsername, "Accounts","AccId"); //for database request
AccountsList.Children.Clear(); //My Grid where i safe it
int rows = database.GetRows("Accounts", "AccID"); //How many Rows i have in my table
for (int i = 1; i <= rows; i++)
{
stringusername=database.GetUsernameById("Accounts","Username", i, MId); //getting the username back as string
if(username!="") // not evry username has the right condition so somtimes the function returns me only ""
{
Label l = new Label();
RowDefinition newRow = new RowDefinition();
newRow.Height = new GridLength(40);
AccountsList.RowDefinitions.Add(newRow);
l.Content = username;
AccountsList.Children.Add(l);
l.SetValue(Grid.RowProperty, i);
}
}
}
the problem is when i now start the programm it looks like this:
enter image description here
if i use the loop like this:
for (int i = 1; i <= rows; i++)
{
Label l = new Label();
RowDefinition newRow = new RowDefinition();
newRow.Height = new GridLength(40);
AccountsList.RowDefinitions.Add(newRow);
string username= database.GetUsernameById("Accounts", "Username", i, MId);
if(username!="")
{
l.Content = username;
AccountsList.Children.Add(l);
l.SetValue(Grid.RowProperty, i);
}
}
and it looks like this: enter image description here
I can normally add a label in the .xaml and it show normal on the top of the grid.
MyUserControll where i want to show the rows:
<UserControl x:Class="AccountManager.Login"
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"
d:DesignHeight="500" d:DesignWidth="750">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="400"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="13*"/>
<ColumnDefinition Width="37*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0">
<Label Content="Your Accounts" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="21.333" FontFamily="Tekton Pro" FontWeight="Bold"></Label>
<Border BorderBrush="LightBlue" BorderThickness="1.5" HorizontalAlignment="Right"/>
<Border BorderBrush="LightBlue" BorderThickness="1.5" VerticalAlignment="Bottom"/>
<Border BorderBrush="Blue" BorderThickness="1.5" VerticalAlignment="Bottom" Opacity="0.2"/>
<Border BorderBrush="Blue" BorderThickness="1.5" HorizontalAlignment="Right" Opacity="0.2"/>
</Grid>
<Grid Grid.Row="1" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="146*"/>
<ColumnDefinition Width="348*"/>
<ColumnDefinition Width="91*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0">
<Border BorderBrush="LightBlue" BorderThickness="1.5" HorizontalAlignment="Right"/>
<Border BorderBrush="Blue" BorderThickness="1.5" Opacity="0.2" HorizontalAlignment="Right"/>
</Grid>
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110*"/>
<ColumnDefinition Width="191*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Label Content="Benutzername:" VerticalAlignment="Center" HorizontalAlignment="Right" Height="26" Width="90"/>
<TextBox x:Name="addBenutzername" Grid.Row="0" Grid.Column="1" Width="185" Height="30" HorizontalAlignment="Right" VerticalAlignment="Center" BorderBrush="Black" BorderThickness="1" />
<PasswordBox x:Name="addPw" Grid.Row="1" Grid.Column="1" Width="185" Height="30" HorizontalAlignment="Right" VerticalAlignment="Center" BorderBrush="Black" BorderThickness="1" ></PasswordBox>
<Label Grid.Row="1" Grid.Column="0" Content="Password:" VerticalAlignment="Center" HorizontalAlignment="Right" Height="26" Width="62"/>
<Label x:Name="repeatPasswordLabel" Grid.Row="2" Grid.Column="0" Content="Repeat Password:" HorizontalAlignment="Right" VerticalAlignment="Center" Height="26" Width="102" />
<PasswordBox x:Name="addReapeatPw" Grid.Row="2" Grid.Column="1" Width="185" Height="30" HorizontalAlignment="Right" VerticalAlignment="Center" BorderBrush="Black" BorderThickness="1" />
<Label Content="Email:" Grid.Row="3" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Right" Height="26" Width="41"/>
<TextBox x:Name="addEmail" Grid.Row="3" Grid.Column="1" Width="185" Height="30" HorizontalAlignment="Right" VerticalAlignment="Center" BorderBrush="Black" BorderThickness="1"/>
<Button Grid.Row=" 5" Grid.Column="1" Content="ADD" Height="36" HorizontalAlignment="Center" VerticalAlignment="Center" Width="80" Click="AddAccount"></Button>
</Grid>
<Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<RadioButton x:Name="r1" Grid.Row="0" Width="70" Height="30">
<Image Source="Bilder/Facebook.png"></Image>
</RadioButton>
<RadioButton x:Name="r2" Grid.Row="1" Width="70" Height="30">
<Image Source="Bilder/Skype.png"></Image>
</RadioButton>
<RadioButton x:Name="r3" Grid.Row="2" Width="70" Height="30">
<Image Source="Bilder/Youtube.png"></Image>
</RadioButton>
<RadioButton x:Name="r4" Grid.Row="3" Width="70" Height="30">
<Image Source="Bilder/Twitter.png"></Image>
</RadioButton>
<RadioButton x:Name="r5" Grid.Row="4" Width="70" Height="30">
<Image Source="Bilder/Microsoft.png"></Image>
</RadioButton>
<RadioButton x:Name="r6" Grid.Row="5" Width="70" Height="30">
<Image Source="Bilder/reddit.png"></Image>
</RadioButton>
<RadioButton x:Name="r7" Grid.Row="6" Width="70" Height="30">
<Image Source="Bilder/Origin.png"></Image>
</RadioButton>
<RadioButton x:Name="r8" Grid.Row="8" Width="70" Height="30">
<Image Source="Bilder/Steam.png"></Image>
</RadioButton>
</Grid>
</Grid>
<Grid VerticalAlignment="Top" x:Name="AccountsList" Grid.Row="1" Grid.Column="0">
<Border BorderBrush="LightBlue" BorderThickness="1.5" HorizontalAlignment="Right"/>
<Border BorderBrush="Blue" BorderThickness="1.5" HorizontalAlignment="Right" Opacity="0.2"/>
</Grid>
<Grid Grid.Row="0" Grid.Column="1">
<Border BorderBrush="LightBlue" BorderThickness="1.5" VerticalAlignment="Bottom"/>
<Border BorderBrush="Blue" BorderThickness="1.5" VerticalAlignment="Bottom" Opacity="0.2"/>
<Button x:Name="delete" Content="Delete" HorizontalAlignment="Left" Width="80" Height="36" Margin="85,19,0,19"/>
<Button x:Name="change" Content="Change" HorizontalAlignment="Center" VerticalAlignment="Center" Width="80" Height="36"></Button>
</Grid>
</Grid>
My Main Windows is:
<Window x:Class="AccountManager.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="500" Width="750" MaxWidth="750" MinWidth="750" MinHeight="500" MaxHeight="500">
<Grid x:Name="Main">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="371"></ColumnDefinition>
<ColumnDefinition Width="371"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="80"></RowDefinition>
<RowDefinition Height="190"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="Accountmanager" HorizontalAlignment="Center" VerticalAlignment="Center" Background="White" FontSize="24" FontFamily="Snap ITC"/>
<Grid Grid.Row="0" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
<Grid Grid.Row="1" x:Name="bilder">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Source="Bilder/Facebook.png" Height="70" HorizontalAlignment="Center" VerticalAlignment="Center" Width="70"/>
<Image Grid.Row="0" Grid.Column="1" Source="Bilder/Skype.png" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Image Grid.Row="0" Grid.Column="2" Source="Bilder/Youtube.png" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Image Grid.Row="0" Grid.Column="3" Source="Bilder/Twitter.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Image Grid.Row="1" Grid.Column="0" Source="Bilder/Microsoft.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Image Grid.Row="1" Grid.Column="1" Source="Bilder/reddit.png" HorizontalAlignment="Center" VerticalAlignment="Center"></Image>
<Image Grid.Row="1" Grid.Column="2" Source="Bilder/Origin.png" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
<Image Grid.Row="1" Grid.Column="3" Source="Bilder/Steam.png" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
</Grid>
<Grid Grid.Row="1" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Content="Benutzername:" VerticalAlignment="Top" HorizontalAlignment="Right"/>
<TextBox x:Name="benutzername" Grid.Row="0" Grid.Column="1" Width="185" Height="30" HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1"></TextBox>
<PasswordBox x:Name="pw" Grid.Row="0" Grid.Column="1" Width="185" Height="30" HorizontalAlignment="Left" BorderBrush="Black" BorderThickness="1" VerticalAlignment="Bottom"/>
<Label Grid.Row="0" Grid.Column="0" Content="Password:" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
<Button Grid.Column="0" Grid.Row="1" Content="Add" Width="80" Height="40" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="47,0,23,0" Click="ClickAddAccount"/>
<Button Grid.Column="1" Grid.Row="1" Content="Login" Width="80" Height="40" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,23,0" Click="Login" />
<Button Grid.Column="1" Grid.Row="1" Content="Forgot Password" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="40" Width="95" Click="ForgotPw" />
</Grid>
</Grid>
</Grid>

In your place, I would use an ItemsControl and create an object to bind the ItemsSource to. Create an ItemsControl like this:
<ItemsControl ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=Window},
Path=Header}">//Instead of header, use your own sourceobject
<ItemsControl.ItemTemplate>
<DataTemplate>
//Insert your Itemtemplate here, you can bind to any object in the ItemsSource!
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
This prevents you from the hassle to create each and every control manually and you can leave the creation of the controls to the wpf!

How to design this site menu style in WPF

I am trying to implement www.devexpress.com menu.
But I do not know what to do to implement the unfolding details below.
this is my source file.
enter link description here
<Window
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:MenuTest02"
xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="MenuTest02.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="579.8" Width="1600" WindowState="Maximized">
<Window.Resources>
<Style x:Key="styleTopMenu" TargetType="{x:Type Button}">
<Setter Property="FontFamily" Value="Microsoft JhengHei"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Height" Value="Auto"/>
<Setter Property="Width" Value="Auto"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentPresenter Grid.Column="0" Grid.Row="0"
HorizontalAlignment="Center" VerticalAlignment="Center"
x:Name="mnuContent" Margin="0"/>
<Border Grid.Column="1" Grid.Row="0" BorderBrush="Gray"
BorderThickness="0,0,1,0" HorizontalAlignment="Right"
Height="30" VerticalAlignment="Center" Width="1"/>
<!--
<Polyline Name="mnuTriangle" HorizontalAlignment="Center" Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="2" Visibility="Visible"
Points="0,10 10,0 20,10 0,10" Fill="#FF313131"/> -->
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="BlueViolet"/>
<!-- <Setter TargetName="grdProductsSubmenu" Property="Visibility" Value="True"/> -->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- <GridLength x:Key="GridLength1">1195</GridLength> -->
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition x:Name="grdMainDisplay" Width="1195" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- Top border -->
<Border Grid.Row="0" Grid.ColumnSpan="3" Background="#FF4A4A4A" Width="Auto" Height="26"/>
<!-- bottom Line in menu -->
<Border Grid.Row="1" Grid.ColumnSpan="3" Background="Transparent" Width="Auto" Height="1" BorderBrush="Gray" BorderThickness="0,1,0,0" VerticalAlignment="Top" Margin="0,66,0,0"/>
<!-- Top Menu -->
<Grid Grid.Column="1" Grid.Row="1" Height="66" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="images\logo.png" HorizontalAlignment="Right" Height="66"/>
<!--
<Border Grid.Column="2" BorderBrush="Gray" BorderThickness="0,0,1,0" HorizontalAlignment="Right" Height="30" VerticalAlignment="Center" Width="1"/>
<TextBlock Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" FontSize="18" Text=" Products " />
-->
<Button Grid.Column="2" Content=" Products " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="3" Content=" Free Trials & Demos " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="4" Content=" Buy " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="5" Content=" Support " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="6" Content=" My Account " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="7" Content=" About Us " Style="{StaticResource styleTopMenu}"/>
<Image Grid.Column="8" Source="images\cart_blogs_search.jpg" Margin="30,0,0,0" Height="54" HorizontalAlignment="Right"/>
</Grid>
<Grid Grid.Column="1" Grid.Row="1" Margin="0,56,0,0" Height="10" Width="Auto" HorizontalAlignment="Left" VerticalAlignment="Top">
<Polyline x:Name="triProducts" Margin="320,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triFreeTrials" Margin="480,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triBuy" Margin="620,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triSupport" Margin="705,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triMyAccount" Margin="830,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triAboutUs" Margin="950,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
</Grid>
<Grid Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Margin="0,66,0,0" Height="Auto" Visibility="Hidden"
VerticalAlignment="Top" Background="#FF313131" x:Name="grdProductsSubmenu" Panel.ZIndex="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="{Binding ElementName=grdMainDisplay, Path=Width}"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Margin="0,0,0,0" Grid.Column="1" HorizontalAlignment="Left" Orientation="Horizontal" >
<Grid Visibility="Visible">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="1" Grid.Column="0" Orientation="Vertical">
<TextBlock Text="Suites" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="BEST VALUE" Margin="0,10,0,10" FontSize="14" Foreground="Orange"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Fill="#FFF88E1D" Height="26" Width="26" RadiusX="3" RadiusY="3"/>
<TextBlock Grid.Column="2" Margin="0" Text="Universal" Foreground="White" FontWeight="Bold"/>
<TextBlock Grid.Column="2" Margin="0,20,0,15" Foreground="DarkGray" FontSize="11" TextWrapping="Wrap"><Run Text="(includes all DevExpress.Netl"/><LineBreak/><Run Text="products in one integrated suite)"/></TextBlock>
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Fill="#FF406EA4" Height="26" Width="26" RadiusX="3" RadiusY="3"/>
<TextBlock Grid.Column="2" Margin="0,0,0,0" Text="Dxperience" Foreground="White" FontWeight="Bold"/>
<TextBlock Grid.Column="2" Margin="0,20,0,0" Foreground="DarkGray" FontSize="11" TextWrapping="Wrap"><Run Text="(includes all DevExpress.Netl"/><LineBreak/><Run Text="Controls along with CodeRush)"/></TextBlock>
</Grid>
<Rectangle VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,50,0,0"
Fill="#FF4C4C4C" Height="50" Width="230" RadiusX="2" RadiusY="2"/>
<TextBlock Margin="0,-50,0,0" FontSize="14"
Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center">
<Run Text="Compare Features"/><LineBreak/><Run Text="and Pricing"/>
</TextBlock>
</StackPanel>
<Border Grid.Row="1" Grid.Column="1" Grid.RowSpan="4" Height="Auto" Width="20" BorderBrush="Gray" BorderThickness="1,0,0,0" Margin="20,0,0,0"/>
<StackPanel Grid.Row="1" Grid.Column="2" Orientation="Vertical">
<TextBlock Text=".NET Products" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="INDIVIDUAL PLATFORMS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="WinForms" FontSize="14" Foreground="White"/>
<TextBlock Text="ASP.NET" FontSize="14" Foreground="White"/>
<TextBlock Text="MVC" FontSize="14" Foreground="White"/>
<TextBlock Text="WPF" FontSize="14" Foreground="White"/>
<TextBlock Text="Windows 10 Apps" FontSize="14" Foreground="White"/>
<TextBlock Text="CROSS-PLATFORM" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="Reporting" FontSize="14" Foreground="White"/>
<TextBlock Text="Document Automatoin" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Row="1" Grid.Column="2" Orientation="Vertical" Margin="220,24,0,0">
<TextBlock Text="ENTERPRISE TOOLS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="Report Server" FontSize="14" Foreground="White"/>
<TextBlock Text="Analytics Dashboard" FontSize="14" Foreground="White"/>
<TextBlock Text="FRAMEWORKS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="eXpressApp Framework" FontSize="14" Foreground="White"/>
<TextBlock Text="CODE-DEBUG-REFACTOR" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="CodeRush for Visual Studio" FontSize="14" Foreground="White"/>
</StackPanel>
<Border Grid.Row="1" Grid.Column="3" Grid.RowSpan="4" Height="Auto" Width="20" BorderBrush="Gray" BorderThickness="1,0,0,0" Margin="20,0,0,0"/>
<Grid Grid.Row="1" Grid.Column="4">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical">
<TextBlock Text="HTML JS Products" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="HYBRID APPS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="DevExtreme Moboile" FontSize="14" Foreground="White"/>
<TextBlock Text="DevExtreme Web" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Vertical">
<TextBlock Text="Xamarin.Forms" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="UI CONTROLS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="Free Data Grid" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Row="2" Orientation="Vertical">
<TextBlock Text="iOS" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="NATIVE" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="DataExplorer" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Row="2" Grid.Column="2" Orientation="Vertical">
<TextBlock Text="Testing Tools" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="WEB TESTING" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="TestCafe" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3" Orientation="Vertical">
<TextBlock Text="Delphi & C++Builder Products" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="DELPHI & C++BUILDER" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="VCL" FontSize="14" Foreground="White"/>
</StackPanel>
</Grid>
</Grid>
</StackPanel>
</Grid>
<!-- Main Display -->
<Grid Grid.Column="1" Grid.Row="1" Height="Auto" Margin="0,66,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="{Binding ElementName=grdMainDisplay, Path=Width}"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center">
<Run Text="(includes all DevExpress.Netl"/>
<LineBreak/>
<Run Text="Controls along with CodeRush)"/>
<LineBreak/>
<Run Text="Some Text..."/>
</TextBlock>
<Path Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" Data="M50.0000011012083,0.5L99.5000021617096,99.5L0.00000040707015,99.5z" Stroke="Black"
StrokeThickness="4" Fill="Yellow"/>
</Grid>
</Grid>

you can set a grid with 4 columsn and 2 rows.
In each of the upper cells you place one of the section names
In the bottom row you place one panel with the details, set its property Grid.ColumnSpan = 4 Grid.Column = 0 grid.row = 1 so it spreads through the whole section. (I think this part is pretty ok in your code) and visibility=visible opacity=1
Then you hook to the on mouse enter for each of the upper elements and when entering, you set the opacity of all the lower panels to 0, but the desired one to 1.
This will show the desired panel with no animation. When you have it working, to achieve the animation you need to use DoubleAnimation and animate the opacity property of the other to zero instead of just setting it.
Please let us know if you find particular problems in your way

Get thumb position of slider from XAML / Slider Template

How to get the slider's thumb position within the Style? I want to show the actual value at the position of the thumb. This would be possible by changing the width of the following textblock accordingly to the value. But how to get the position of the thumb?
<TextBlock Grid.Column="0" Width="THUMB POSITION" HorizontalAlignment="Right" Grid.Row="0" Text="{Binding Path=Value, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>
The full style is shown here:
<Style x:Key="MyCustomStyleForSlider" TargetType="{x:Type Slider}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto" MinWidth="{TemplateBinding MinWidth}"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="{Binding Path=Value, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Path=Minimum, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>
<TextBlock Grid.Column="2" Grid.Row="1" Text="{Binding Path=Maximum, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>
<TickBar Grid.Column="1" x:Name="TopTick" Visibility="Visible" Fill="LightGray" Placement="Top" Height="6" Grid.Row="1"/>
<TickBar Grid.Column="1" x:Name="BottomTick" Visibility="Collapsed" Fill="Green" Placement="Bottom" Height="4" Grid.Row="0"/>
<Border x:Name="TrackBackground" BorderThickness="1" CornerRadius="1" Margin="5,0" VerticalAlignment="Center" Height="4.0" Grid.Row="1" >
<Canvas Margin="-6,-1">
<Rectangle Visibility="Visible" x:Name="PART_SelectionRange" Height="4.0" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Stroke="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}" StrokeThickness="1.0"/>
</Canvas>
</Border>
<Track x:Name="PART_Track" Grid.Row="1" Grid.Column="1">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButtonStyle}" BorderBrush="Transparent" Background="Transparent" Foreground="Transparent" Command="{x:Static Slider.DecreaseLarge}"/>
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButtonStyle}" Background="Transparent" Foreground="Transparent" BorderBrush="Transparent" Command="{x:Static Slider.IncreaseLarge}"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<!--<Thumb x:Name="Thumb" Background="Black"/>-->
<Thumb x:Name="Thumb" Style="{StaticResource CustomThumbForSlider}" Background="Black"/>
</Track.Thumb>
</Track>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

I found the solution now. I use the ActualWidth of the decrease RepeatButton to get the position of the thumb. I only need a converter because of some offset but it works without any code behind.
Code:
<TextBlock Grid.Column="1" Grid.Row="0" TextAlignment="Right" Foreground="#3B3833"
HorizontalAlignment="Left" Width="{Binding Path=ActualWidth, ElementName=leftToggle,
Converter={StaticResource SliderConverter}, ConverterParameter=140}" Text="{Binding
Path=Value, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>
Preview:

Chess Board in Metro Style apps

I am just playing around with the Metro style apps. I wanted to create a simple chess board using the UniformGrid from Wpf but it seems like that it is not supported in Metro style apps. Are there any alternative ways in Metro Style apps to create a chess board?

Can't you just use an 8x8 Grid? Eight RowDefinitions and Eight ColumnDefinitions should get it.
Here's a very brute force method of doing this. As long as the grid's height and width make it square, the resultant items will be the appropriate proportions. You could also set the Height of each RowDefinition and the Width of each ColumnDefinition to the same arbitrary value and get it proportional.
For something like this, I might choose to add the controls in the codebehind, versus in the XAML, but that's a choice I leave up to you.
<Grid x:Name="LayoutRoot" Background="White" Width="400" Height="400" >
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Background="Black" Grid.Row="0" Grid.Column="0"/>
<Border Background="Ivory" Grid.Row="0" Grid.Column="1"/>
<Border Background="Black" Grid.Row="0" Grid.Column="2"/>
<Border Background="Ivory" Grid.Row="0" Grid.Column="3"/>
<Border Background="Black" Grid.Row="0" Grid.Column="4"/>
<Border Background="Ivory" Grid.Row="0" Grid.Column="5"/>
<Border Background="Black" Grid.Row="0" Grid.Column="6"/>
<Border Background="Ivory" Grid.Row="0" Grid.Column="7"/>
<Border Background="Black" Grid.Row="2" Grid.Column="0"/>
<Border Background="Ivory" Grid.Row="2" Grid.Column="1"/>
<Border Background="Black" Grid.Row="2" Grid.Column="2"/>
<Border Background="Ivory" Grid.Row="2" Grid.Column="3"/>
<Border Background="Black" Grid.Row="2" Grid.Column="4"/>
<Border Background="Ivory" Grid.Row="2" Grid.Column="5"/>
<Border Background="Black" Grid.Row="2" Grid.Column="6"/>
<Border Background="Ivory" Grid.Row="2" Grid.Column="7"/>
<Border Background="Black" Grid.Row="4" Grid.Column="0"/>
<Border Background="Ivory" Grid.Row="4" Grid.Column="1"/>
<Border Background="Black" Grid.Row="4" Grid.Column="2"/>
<Border Background="Ivory" Grid.Row="4" Grid.Column="3"/>
<Border Background="Black" Grid.Row="4" Grid.Column="4"/>
<Border Background="Ivory" Grid.Row="4" Grid.Column="5"/>
<Border Background="Black" Grid.Row="4" Grid.Column="6"/>
<Border Background="Ivory" Grid.Row="4" Grid.Column="7"/>
<Border Background="Black" Grid.Row="6" Grid.Column="0"/>
<Border Background="Ivory" Grid.Row="6" Grid.Column="1"/>
<Border Background="Black" Grid.Row="6" Grid.Column="2"/>
<Border Background="Ivory" Grid.Row="6" Grid.Column="3"/>
<Border Background="Black" Grid.Row="6" Grid.Column="4"/>
<Border Background="Ivory" Grid.Row="6" Grid.Column="5"/>
<Border Background="Black" Grid.Row="6" Grid.Column="6"/>
<Border Background="Ivory" Grid.Row="6" Grid.Column="7"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="0"/>
<Border Background="Black" Grid.Row="1" Grid.Column="1"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="2"/>
<Border Background="Black" Grid.Row="1" Grid.Column="3"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="4"/>
<Border Background="Black" Grid.Row="1" Grid.Column="5"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="6"/>
<Border Background="Black" Grid.Row="1" Grid.Column="7"/>
<Border Background="Ivory" Grid.Row="3" Grid.Column="0"/>
<Border Background="Black" Grid.Row="3" Grid.Column="1"/>
<Border Background="Ivory" Grid.Row="3" Grid.Column="2"/>
<Border Background="Black" Grid.Row="3" Grid.Column="3"/>
<Border Background="Ivory" Grid.Row="3" Grid.Column="4"/>
<Border Background="Black" Grid.Row="3" Grid.Column="5"/>
<Border Background="Ivory" Grid.Row="3" Grid.Column="6"/>
<Border Background="Black" Grid.Row="3" Grid.Column="7"/>
<Border Background="Ivory" Grid.Row="5" Grid.Column="0"/>
<Border Background="Black" Grid.Row="5" Grid.Column="1"/>
<Border Background="Ivory" Grid.Row="5" Grid.Column="2"/>
<Border Background="Black" Grid.Row="5" Grid.Column="3"/>
<Border Background="Ivory" Grid.Row="5" Grid.Column="4"/>
<Border Background="Black" Grid.Row="5" Grid.Column="5"/>
<Border Background="Ivory" Grid.Row="5" Grid.Column="6"/>
<Border Background="Black" Grid.Row="5" Grid.Column="7"/>
<Border Background="Ivory" Grid.Row="7" Grid.Column="0"/>
<Border Background="Black" Grid.Row="7" Grid.Column="1"/>
<Border Background="Ivory" Grid.Row="7" Grid.Column="2"/>
<Border Background="Black" Grid.Row="7" Grid.Column="3"/>
<Border Background="Ivory" Grid.Row="7" Grid.Column="4"/>
<Border Background="Black" Grid.Row="7" Grid.Column="5"/>
<Border Background="Ivory" Grid.Row="7" Grid.Column="6"/>
<Border Background="Black" Grid.Row="7" Grid.Column="7"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="0"/>
<Border Background="Black" Grid.Row="1" Grid.Column="1"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="2"/>
<Border Background="Black" Grid.Row="1" Grid.Column="3"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="4"/>
<Border Background="Black" Grid.Row="1" Grid.Column="5"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="6"/>
<Border Background="Black" Grid.Row="1" Grid.Column="7"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="0"/>
<Border Background="Black" Grid.Row="1" Grid.Column="1"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="2"/>
<Border Background="Black" Grid.Row="1" Grid.Column="3"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="4"/>
<Border Background="Black" Grid.Row="1" Grid.Column="5"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="6"/>
<Border Background="Black" Grid.Row="1" Grid.Column="7"/>
</Grid>

If you plan on using databinding you can use a WrapGrid with the MaximumRowsOrColumns property set to 8. Then bind to a collection of 64 items that contain the state of the board.
WrapGrid API Reference

UniformGrid isn't necessary with ViewBox:
<Window
x:Class="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:ChessGUI"
mc:Ignorable="d"
Title="Chess GUI"
Height="640"
Width="640" Background="PaleGreen"
>
<Viewbox Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="16" >
<Grid Background="White" Width="256" Height="256">
<Grid.RowDefinitions>
<RowDefinition Height="0" />
<RowDefinition Height="*" />
<RowDefinition Height="0" />
<RowDefinition Height="*" />
<RowDefinition Height="0" />
<RowDefinition Height="*" />
<RowDefinition Height="0" />
<RowDefinition Height="*" />
<RowDefinition Height="0" />
<RowDefinition Height="*" />
<RowDefinition Height="0" />
<RowDefinition Height="*" />
<RowDefinition Height="0" />
<RowDefinition Height="*" />
<RowDefinition Height="0" />
<RowDefinition Height="*" />
<RowDefinition Height="0" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="1" Grid.Column="1" Fill="LightGray" />
<Rectangle Grid.Row="1" Grid.Column="3" Fill="DarkGray" />
<Rectangle Grid.Row="1" Grid.Column="5" Fill="LightGray" />
<Rectangle Grid.Row="1" Grid.Column="7" Fill="DarkGray" />
<Rectangle Grid.Row="1" Grid.Column="9" Fill="LightGray" />
<Rectangle Grid.Row="1" Grid.Column="11" Fill="DarkGray" />
<Rectangle Grid.Row="1" Grid.Column="13" Fill="LightGray" />
<Rectangle Grid.Row="1" Grid.Column="15" Fill="DarkGray" />
<Rectangle Grid.Row="3" Grid.Column="1" Fill="DarkGray" />
<Rectangle Grid.Row="3" Grid.Column="3" Fill="LightGray" />
<Rectangle Grid.Row="3" Grid.Column="5" Fill="DarkGray" />
<Rectangle Grid.Row="3" Grid.Column="7" Fill="LightGray" />
<Rectangle Grid.Row="3" Grid.Column="9" Fill="DarkGray" />
<Rectangle Grid.Row="3" Grid.Column="11" Fill="LightGray" />
<Rectangle Grid.Row="3" Grid.Column="13" Fill="DarkGray" />
<Rectangle Grid.Row="3" Grid.Column="15" Fill="LightGray" />
<Rectangle Grid.Row="5" Grid.Column="1" Fill="LightGray" />
<Rectangle Grid.Row="5" Grid.Column="3" Fill="DarkGray" />
<Rectangle Grid.Row="5" Grid.Column="5" Fill="LightGray" />
<Rectangle Grid.Row="5" Grid.Column="7" Fill="DarkGray" />
<Rectangle Grid.Row="5" Grid.Column="9" Fill="LightGray" />
<Rectangle Grid.Row="5" Grid.Column="11" Fill="DarkGray" />
<Rectangle Grid.Row="5" Grid.Column="13" Fill="LightGray" />
<Rectangle Grid.Row="5" Grid.Column="15" Fill="DarkGray" />
<Rectangle Grid.Row="7" Grid.Column="1" Fill="DarkGray" />
<Rectangle Grid.Row="7" Grid.Column="3" Fill="LightGray" />
<Rectangle Grid.Row="7" Grid.Column="5" Fill="DarkGray" />
<Rectangle Grid.Row="7" Grid.Column="7" Fill="LightGray" />
<Rectangle Grid.Row="7" Grid.Column="9" Fill="DarkGray" />
<Rectangle Grid.Row="7" Grid.Column="11" Fill="LightGray" />
<Rectangle Grid.Row="7" Grid.Column="13" Fill="DarkGray" />
<Rectangle Grid.Row="7" Grid.Column="15" Fill="LightGray" />
<Rectangle Grid.Row="9" Grid.Column="1" Fill="LightGray" />
<Rectangle Grid.Row="9" Grid.Column="3" Fill="DarkGray" />
<Rectangle Grid.Row="9" Grid.Column="5" Fill="LightGray" />
<Rectangle Grid.Row="9" Grid.Column="7" Fill="DarkGray" />
<Rectangle Grid.Row="9" Grid.Column="9" Fill="LightGray" />
<Rectangle Grid.Row="9" Grid.Column="11" Fill="DarkGray" />
<Rectangle Grid.Row="9" Grid.Column="13" Fill="LightGray" />
<Rectangle Grid.Row="9" Grid.Column="15" Fill="DarkGray" />
<Rectangle Grid.Row="11" Grid.Column="1" Fill="DarkGray" />
<Rectangle Grid.Row="11" Grid.Column="3" Fill="LightGray" />
<Rectangle Grid.Row="11" Grid.Column="5" Fill="DarkGray" />
<Rectangle Grid.Row="11" Grid.Column="7" Fill="LightGray" />
<Rectangle Grid.Row="11" Grid.Column="9" Fill="DarkGray" />
<Rectangle Grid.Row="11" Grid.Column="11" Fill="LightGray" />
<Rectangle Grid.Row="11" Grid.Column="13" Fill="DarkGray" />
<Rectangle Grid.Row="11" Grid.Column="15" Fill="LightGray" />
<Rectangle Grid.Row="13" Grid.Column="1" Fill="LightGray" />
<Rectangle Grid.Row="13" Grid.Column="3" Fill="DarkGray" />
<Rectangle Grid.Row="13" Grid.Column="5" Fill="LightGray" />
<Rectangle Grid.Row="13" Grid.Column="7" Fill="DarkGray" />
<Rectangle Grid.Row="13" Grid.Column="9" Fill="LightGray" />
<Rectangle Grid.Row="13" Grid.Column="11" Fill="DarkGray" />
<Rectangle Grid.Row="13" Grid.Column="13" Fill="LightGray" />
<Rectangle Grid.Row="13" Grid.Column="15" Fill="DarkGray" />
<Rectangle Grid.Row="15" Grid.Column="1" Fill="DarkGray" />
<Rectangle Grid.Row="15" Grid.Column="3" Fill="LightGray" />
<Rectangle Grid.Row="15" Grid.Column="5" Fill="DarkGray" />
<Rectangle Grid.Row="15" Grid.Column="7" Fill="LightGray" />
<Rectangle Grid.Row="15" Grid.Column="9" Fill="DarkGray" />
<Rectangle Grid.Row="15" Grid.Column="11" Fill="LightGray" />
<Rectangle Grid.Row="15" Grid.Column="13" Fill="DarkGray" />
<Rectangle Grid.Row="15" Grid.Column="15" Fill="LightGray" />
</Grid>
</Viewbox>
</Window>

Categories