Related
This is my main window code it has one browse button and this button also display on user control but I don't want to show that button and space taken by that button in user control
<Window x:Class="Take_Out_Info.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Take Out Info" Height="auto" Width="auto"
Closing="Window_Closing" WindowState="Maximized">
<Window.Resources>
<Style x:Key="menuitem" TargetType="MenuItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border x:Name="Bd" Padding="17,0,17,0" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" Uid="Border_38">
<ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Header}" Grid.Column="1" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Uid="ContentPresenter_33"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="0.8"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Background="#b5d2fc">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" >
<Menu Name="browsemenu" DockPanel.Dock="Top" Opacity="1" Height="50" Background="#1389e4" >
<MenuItem x:Name="browse" Width="140" Margin="10,10,10,10" HorizontalAlignment="Center" Style="{StaticResource menuitem}" Click="browse_Click" Height="30" Background="white" BorderThickness="2" BorderBrush="black">
<MenuItem.Header>
<TextBlock Width="90" TextAlignment="Center" VerticalAlignment="CENTER" Foreground="#1389e4" FontWeight="Bold" HorizontalAlignment="Center" FontSize="15" ><Run Text="Browse"/></TextBlock>
</MenuItem.Header>
</MenuItem>
</Menu>
</Grid>
<Grid Grid.Row="1" >
<ContentControl x:Name="DetailsControl" Margin="0" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Grid>
</Grid>
</Window>
this image is my main window
This is my user control code
<UserControl x:Class="Take_Out_Info.BrowseFile"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:adorners="http://gu.se/Adorners"
Height="auto" Width="auto">
<Grid Background="#b5d2fc">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="50"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid Width="auto" Background="#1389e4">
<Button Grid.Row="0" Content="Browse" Name="btnBrowse" Click="btnBrowse_Click" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0" Height="27" Width="140" Background="White" FontSize="15" BorderThickness="2" BorderBrush="Black" />
<Button Grid.Row="0" Content="Search" Name="btnSearch" Click="btnSearch_Click" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="190,0,0,0" Height="27" Width="140" Background="White" FontSize="15" BorderThickness="2" BorderBrush="Black" />
<Button Grid.Row="0" Content="Reset" Name="btnReset" Click="btnReset_Click" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="370,0,0,0" Height="27" Width="140" Background="White" FontSize="15" BorderThickness="2" BorderBrush="Black" />
<ContentControl x:Name="DetailsControl" VerticalAlignment="Top" HorizontalAlignment="Left" Width="0" />
</Grid>
<Grid Grid.Row="1" Width="auto">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBox Name="txtDayfind" adorners:Watermark.Text="Search Day Here" Grid.Row="1" Grid.Column="0" Margin="-10,0,0,0" Height="24" Width="120"/>
<Button Name="btnDayfind" Grid.Row="1" Grid.Column="0" Margin="110,0,0,0" Height="24" Width="24" Click="btnDayfind_Click">
<Image Source="002-search.png"></Image>
</Button>
<Button Name="btnDayReset" Grid.Row="1" Grid.Column="0" Margin="157,0,0,0" Height="24" Width="24" Click="btnDayReset_Click">
<Image Source="001-multiply.png"></Image>
</Button>
<TextBox Name="txtDatefind" adorners:Watermark.Text="Search Date Here" Grid.Row="0" Grid.Column="1" Margin="-10,0,0,0" Height="24" Width="120"/>
<Button Name="btnDatefind" Grid.Row="0" Grid.Column="1" Margin="121,0,0,0" Height="24" Width="24" Click="btnDatefind_Click">
<Image Source="002-search.png"></Image>
</Button>
<Button Name="btnDateReset" Grid.Row="0" Grid.Column="1" Margin="170,0,0,0" Height="24" Width="24" Click="btnDateReset_Click">
<Image Source="001-multiply.png"></Image>
</Button>
<TextBox Name="txtTimefind" adorners:Watermark.Text="Search Time Here" Grid.Row="0" Grid.Column="2" Margin="-10,0,0,0" Height="24" Width="120"/>
<Button Name="btnTimefind" Grid.Row="0" Grid.Column="2" Margin="121,0,0,0" Height="24" Width="24" Click="btnTimefind_Click">
<Image Source="002-search.png"></Image>
</Button>
<Button Name="btnTimeReset" Grid.Row="0" Grid.Column="2" Margin="170,0,0,0" Height="24" Width="24" Click="btnTimeReset_Click">
<Image Source="001-multiply.png"></Image>
</Button>
<TextBox Name="txtLatfind" adorners:Watermark.Text="Search Lat Here" Grid.Row="0" Grid.Column="3" Margin="-10,0,0,0" Height="24" Width="120"/>
<Button Name="btnLatfind" Grid.Row="0" Grid.Column="3" Margin="121,0,0,0" Height="24" Width="24" Click="btnLatfind_Click">
<Image Source="002-search.png"></Image>
</Button>
<Button Name="btnLatReset" Grid.Row="0" Grid.Column="3" Margin="170,0,0,0" Height="24" Width="24" Click="btnLatReset_Click">
<Image Source="001-multiply.png"></Image>
</Button>
<TextBox Name="txtLongfind" adorners:Watermark.Text="Search Long Here" Grid.Row="0" Grid.Column="4" Margin="-10,0,0,0" Height="24" Width="120"/>
<Button Name="btnLongfind" Grid.Row="0" Grid.Column="4" Margin="121,0,0,0" Height="24" Width="24" Click="btnLongfind_Click">
<Image Source="002-search.png"></Image>
</Button>
<Button Name="btnLongReset" Grid.Row="0" Grid.Column="4" Margin="170,0,0,0" Height="24" Width="24" Click="btnLongReset_Click">
<Image Source="001-multiply.png"></Image>
</Button>
<TextBox Name="txtAddressfind" adorners:Watermark.Text="Search Address Here" Grid.Row="0" Grid.Column="5" Margin="-15,0,0,0" Height="24" Width="120"/>
<Button Name="btnAddressfind" Grid.Row="0" Grid.Column="5" Margin="121,0,0,0" Height="24" Width="24" Click="btnAddressfind_Click">
<Image Source="002-search.png"></Image>
</Button>
<Button Name="btnAddressReset" Grid.Row="0" Grid.Column="5" Margin="170,0,0,0" Height="24" Width="24" Click="btnAddressReset_Click">
<Image Source="001-multiply.png"></Image>
</Button>
<TextBox Name="txtTypefind" adorners:Watermark.Text="Search Type Here" Grid.Row="0" Grid.Column="6" Margin="-10,0,0,0" Height="24" Width="120"/>
<Button Name="btnTypefind" Grid.Row="0" Grid.Column="6" Margin="121,0,0,0" Height="24" Width="24" Click="btnTypefind_Click">
<Image Source="002-search.png"></Image>
</Button>
<Button Name="btnTypeReset" Grid.Row="0" Grid.Column="6" Margin="170,0,0,0" Height="24" Width="24" Click="btnTypeReset_Click">
<Image Source="001-multiply.png"></Image>
</Button>
</Grid>
<TabControl x:Name="tabControl1" Grid.Row="2" Grid.Column="1" Height="auto" Width="auto" ItemsSource="{Binding tabs}" SelectedItem="{Binding SelectedEvaluation}" TabStripPlacement="Top" >
<TabControl.ContentTemplate >
<DataTemplate>
<DataGrid x:Name="dataGrid1" Height="auto" Width="auto" ItemsSource="{Binding}" AutoGenerateColumns="False" >
<DataGrid.Columns>
<DataGridTextColumn Width="*" Header="Day" Binding="{Binding [Day]}"/>
<DataGridTextColumn Width="*" Header="Date" Binding="{Binding [Date]}"/>
<DataGridTextColumn Width="*" Header="Time" Binding="{Binding [Time]}"/>
<DataGridTextColumn Width="*" Header="Lat" Binding="{Binding [Lat]}"/>
<DataGridTextColumn Width="*" Header="Long" Binding="{Binding [Long]}"/>
<DataGridTextColumn Width="*" Header="Address" Binding="{Binding [Address]}"/>
<DataGridTextColumn Width="*" Header="Type" Binding="{Binding [Type]}"/>
</DataGrid.Columns>
</DataGrid>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</Grid>
</UserControl>
What to do for getting output like image 3.I to want to remove that browse button which is in blue color and also space has taken on user control for that window.
User control takes the only controls of user control and not of the main window.
It can only show user-control controls and not of main windows control when opening on user control window.
Maybe you should remove this below Grid from XAML source:
<Grid Background="#b5d2fc">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" >
<Menu Name="browsemenu" DockPanel.Dock="Top" Opacity="1" Height="50" Background="#1389e4" >
<MenuItem x:Name="browse" Width="140" Margin="10,10,10,10" HorizontalAlignment="Center" Style="{StaticResource menuitem}" Click="browse_Click" Height="30" Background="white" BorderThickness="2" BorderBrush="black">
<MenuItem.Header>
<TextBlock Width="90" TextAlignment="Center" VerticalAlignment="CENTER" Foreground="#1389e4" FontWeight="Bold" HorizontalAlignment="Center" FontSize="15" ><Run Text="Browse"/></TextBlock>
</MenuItem.Header>
</MenuItem>
</Menu>
</Grid>
<Grid Grid.Row="1" >
<ContentControl x:Name="DetailsControl" Margin="0" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Grid>
</Grid>
If No , You can set 0 for <RowDefinition Height="50"/>
You can disable visibility of browse MenuItem's on click event(browse_Click) of mainwindow xaml page like below
private void browse_Click(object sender, RoutedEventArgs e)
{
browse.Visibility = Visibility.Collapsed;
}
I'm working on small and very simple WPF application, BUT I'm having trouble with responsive stuffs, computer where I'm working at is like 22'' with full HD resolution and everything looks fine, let me post picture how it looks like this:
[![enter image description here][1]][1]
But when I run application on smaller monitor, my content also moves up, acctualy my datagrid and my textboxes somehow glue up to the header ( which has blue background). And it looks really bad on smaller devices. I'm working with grids and I thought that's right way, but probably I am doing something wrong..
So this is how it looks on smaller device and resolution:
[![enter image description here][2]][2]
And here is my xaml code:
<Window x:Class="Test.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" WindowStartupLocation="CenterScreen" WindowState="Maximized" WindowStyle="None">
<!-- This is my main grid which is coming by default when I created this window -->
<Grid>
<!-- I created this grid, because soon I will put image to the left, as my logo, and few informations also, thats reason why I have column definition -->
<Grid Height="65" Margin="0" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0,60*" />
<ColumnDefinition Width="0,10*" />
<ColumnDefinition Width="0,10*" />
<ColumnDefinition Width="0,10*" />
<ColumnDefinition Width="0,10*" />
</Grid.ColumnDefinitions>
<Rectangle Grid.ColumnSpan="5">
<Rectangle.Fill>
<SolidColorBrush Color="#0091EA"></SolidColorBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
<!-- This is big grid which is separated in two columns which fits on screen 80% of screen - left part 20% of screen right part -->
<Grid Margin="0,50,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0,80*"/>
<ColumnDefinition Width="0,20*"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Grid.RowSpan="10" BorderThickness="0,0,3,0" BorderBrush="#0091EA"/>
<!-- Here are my text boxes, 6 of them, so I have 6 column definitions-->
<Grid Margin="0,0,0,0" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0,20*" />
<ColumnDefinition Width="0,30*"/>
<ColumnDefinition Width="0,12*" />
<ColumnDefinition Width="0,12*" />
<ColumnDefinition Width="0,12*" />
<ColumnDefinition Width="0,12*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0,10*"/>
<RowDefinition Height="0,86*"/>
<RowDefinition Height="0,04*"/>
</Grid.RowDefinitions>
<Border Grid.Row="2" Grid.ColumnSpan="10" BorderThickness="0,3,0,0" BorderBrush="#0091EA"/>
<TextBox Height="40" Margin="15,0,8,0" Grid.Row="0" Grid.Column="0" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" FontSize="20" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="1" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="2" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="3" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="4" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="5" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<DataGrid Grid.ColumnSpan="6" MinHeight="200" Margin="15,-20,8,50" Grid.Row="1" Grid.Column="0" AutoGenerateColumns="False" Background="White" >
<DataGrid.Resources>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#0091EA"/>
<Setter Property="Opacity" Value="1"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Height" Value="40"/>
</Style>
</DataGrid.Resources>
</DataGrid>
</Grid>
</Grid>
</Grid>
</Window>
Edit after Mark's answer:
XAML CODE:
<Window x:Class="xTouchPOS.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" WindowStartupLocation="CenterScreen" WindowState="Maximized" WindowStyle="None">
<Grid>
<!-- I created this grid, because soon I will put image to the left, as my logo, and few informations also, thats reason why I have column definition -->
<Grid.RowDefinitions>
<!--Reserved header space-->
<RowDefinition Height="50" />
<!--Rest of space for textboxes and grid, etc.-->
<RowDefinition />
</Grid.RowDefinitions>
<Rectangle Fill="#0091EA" />
<!--My edit.Added one more grid to row 0 which will contain some things that I need like time, date, user which is currently using app-->
<Grid Height="50" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0,60*" />
<ColumnDefinition Width="0,10*" />
<ColumnDefinition Width="0,10*" />
<ColumnDefinition Width="0,10*" />
<ColumnDefinition Width="0,10*" />
</Grid.ColumnDefinitions>
<Image Stretch="Fill" Name="image2" Source="C:\Users\Tuca\Desktop\microsoft.logo.png" Width="135" Height="42" VerticalAlignment="Center" Margin="15,0,0,0" Grid.Column="0" HorizontalAlignment="Left"/>
<StackPanel Grid.Column="4" Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock x:Name="lblTimeText" Text="Time" Margin="0,0,0,0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" VerticalAlignment="Bottom" />
<TextBlock x:Name="lblTime" Text="labelTime" Grid.Column="0" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
</StackPanel>
<StackPanel Grid.Column="3" Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Name="lblDateText" Text="Date" Margin="0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
<TextBlock Name="lblDate" Text="labelaDate" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Vertical" VerticalAlignment="Center">
<TextBlock x:Name="lblOperater" Text="User" Margin="0,0,0,0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" VerticalAlignment="Bottom" />
<TextBlock x:Name="lblOperaterText" Text="Tony Montana" Grid.Column="0" Margin="0" FontSize="16" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Center">
<TextBlock x:Name="lblNumber" Text="Ordinal number." Margin="0,0,40,0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" VerticalAlignment="Bottom" />
<TextBlock x:Name="lblNumber" Text="0014" Grid.Column="0" Margin="0" FontSize="16" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
</StackPanel>
</Grid>
<!--header section-->
<!-- This is big grid which is separated in two columns which fits on screen 80% of screen - left part 20% of screen right part -->
<Grid Margin="0,0,0,0" Grid.Row="1">
<Grid.RowDefinitions>
<!--Space for Textboxes - left to auto so that it is not overconstrained, but does
not take up too much space-->
<RowDefinition Height="Auto" />
<!--Datagrid gets the remainder of the space-->
<RowDefinition />
<!--This is the space allowed for the bottom border-->
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<!--Reserved 80% of remaining space for text/grid-->
<ColumnDefinition Width="8*"/>
<!--This is the space allowed for the right border-->
<ColumnDefinition Width="Auto" />
<!--This is the 20% of remaining space-->
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<!--textbox section-->
<Grid Grid.Row="0" Margin="0 5">
<Grid.ColumnDefinitions>
<!--you only had 8 definitions, but 6 boxes... not sure what is intended-->
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox Height="40" Margin="15,0,8,0" Grid.Row="0" Grid.Column="0" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" FontSize="20" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="1" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="2" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="3" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="4" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="5" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
</Grid>
<!--grid element-->
<DataGrid Grid.Row="1" MinHeight="200" Margin="15,0,8,0" AutoGenerateColumns="False" Background="White" >
<DataGrid.Resources>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#0091EA"/>
<Setter Property="Opacity" Value="1"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Height" Value="40"/>
</Style>
</DataGrid.Resources>
</DataGrid>
<!--right border element-->
<Rectangle Fill="#0091EA" Width="3" Grid.Column="1" Grid.RowSpan="3" />
<!--bottom border element-->
<Rectangle Fill="#0091EA" Height="3" Grid.Row="2" />
<Grid Grid.Row="0" Grid.Column="2"/>
<Grid Grid.Row="1" Grid.Column="2"/>
</Grid>
</Grid>
</Window>
So mate take a look I edited header, is that right way? To add one more grid with stackpanels, and how could I add copyright and stuffs at the bottom, shouldn't I treat it as one more row which will be very small by heigh for exaple 20px?
Thanks a lot
I think you've got the right idea - use grids for layout... You just need some more experience with it. Pikoh is correct in the comment about "hard coded" dimensions. What was a red flag for me was the negative margin on the grid (this is why it will be allowed to overlap your textboxes).
I tend to use multiple grids nested within each other to create what you're looking to do. Think of it from the largest container to the smallest. For example, there is no reason for your main grid to have 6 columns... it only needs 1 column, but 2 rows to fit your "sections". The larger section needs 3 sections side-by-side (80%/border/20%) (columns) and 2 sections in the left-most section (grid/border) Here is an example of what I think you're trying to accomplish. I left a number of the hard-coded heights and such, as I'm not privy to your requirements, but left off enough to make it responsive.
<Grid>
<!-- I created this grid, because soon I will put image to the left, as my logo, and few informations also, thats reason why I have column definition -->
<Grid.RowDefinitions>
<!--Reserved header space-->
<RowDefinition Height="40" />
<!--Rest of space for textboxes and grid, etc.-->
<RowDefinition />
</Grid.RowDefinitions>
<!--header section-->
<Rectangle Fill="#0091EA" />
<!-- This is big grid which is separated in two columns which fits on screen 80% of screen - left part 20% of screen right part -->
<Grid Margin="0,0,0,0" Grid.Row="1">
<Grid.ColumnDefinitions>
<!--Reserved 80% of remaining space for text/grid-->
<ColumnDefinition Width="8*"/>
<!--This is the space allowed for the right border-->
<ColumnDefinition Width="Auto" />
<!--This is the 20% of remaining space-->
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<!--left-hand grid-->
<Grid>
<Grid.RowDefinitions>
<!--Space for Textboxes - left to auto so that it is not overconstrained, but does
not take up too much space-->
<RowDefinition Height="Auto" />
<!--Datagrid gets the remainder of the space-->
<RowDefinition />
<!--This is the space allowed for the bottom border-->
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!--textbox section-->
<Grid Grid.Row="0" Margin="0 5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox Height="40" Margin="15,0,8,0" Grid.Row="0" Grid.Column="0" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" FontSize="20" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="1" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="2" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="3" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="4" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="5" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
</Grid>
<!--grid element-->
<DataGrid Grid.Row="1" MinHeight="200" Margin="15,0,8,0" AutoGenerateColumns="False" Background="White" >
<DataGrid.Resources>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#0091EA"/>
<Setter Property="Opacity" Value="1"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Height" Value="40"/>
</Style>
</DataGrid.Resources>
</DataGrid>
<!--bottom border element-->
<Rectangle Fill="#0091EA" Height="3" Grid.Row="2" />
</Grid>
<!--right border element-->
<Rectangle Fill="#0091EA" Width="3" Grid.Column="1" Grid.RowSpan="3" />
<!--right-hand grid-->
<Grid Grid.Column="2">
<!--Whatever content ends up here-->
</Grid>
</Grid>
</Grid>
UPDATE:
Here is the final product based on the image you included. At this point, it is just reviewing the different pieces that were used to put it together and practice that will get it to all come together for you. Subdivide into logical sections, then work within those sections when you need to manipulate the layout. If you found this helpful, please feel free to mark as answer and good luck with your application!
<!--header section-->
<Rectangle Fill="#0091EA" />
<Grid Height="50" Grid.Row="0">
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Margin" Value="0" />
<Setter Property="Foreground" Value="#FFFFFFFF" />
<Setter Property="FontSize" Value="15" />
<Setter Property="FontFamily" Value="Arial" />
</Style>
<Style TargetType="StackPanel">
<Setter Property="Margin" Value="6 0" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="135" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="4" >
<TextBlock x:Name="lblTimeText" Text="Time" />
<TextBlock x:Name="lblTime" Text="labelTime" />
</StackPanel>
<StackPanel Grid.Column="3" >
<TextBlock Name="lblDateText" Text="Date" />
<TextBlock Name="lblDate" Text="labelaDate" />
</StackPanel>
<StackPanel Grid.Column="2" >
<TextBlock x:Name="lblOperater" Text="User" />
<TextBlock x:Name="lblOperaterText" Text="Tony Montana" />
</StackPanel>
<StackPanel Grid.Column="1" >
<TextBlock x:Name="lblBrojRacuna" Text="Ordinal number." />
<TextBlock x:Name="lblBrojRacunaText" Text="0014" FontSize="16" />
</StackPanel>
</Grid>
<!-- This is big grid which is separated in two columns which fits on screen 80% of screen - left part 20% of screen right part -->
<Grid Margin="0,0,0,0" Grid.Row="1">
<Grid.ColumnDefinitions>
<!--Reserved 80% of remaining space for text/grid-->
<ColumnDefinition Width="8*"/>
<!--This is the space allowed for the right border-->
<ColumnDefinition Width="Auto" />
<!--This is the 20% of remaining space-->
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<!--left-hand grid-->
<Grid>
<Grid.RowDefinitions>
<!--Space for Textboxes - left to auto so that it is not overconstrained,
but does not take up too much space-->
<RowDefinition Height="Auto" />
<!--Datagrid gets the remainder of the space-->
<RowDefinition />
<!--This is the space allowed for the bottom border-->
<RowDefinition Height="Auto" />
<!--This is the space allowed for the copyright-->
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<!--textbox section-->
<Grid Grid.Row="0" Margin="15 5">
<Grid.Resources>
<Style TargetType="TextBox">
<Setter Property="Height" Value="40" />
<Setter Property="Margin" Value="0 0 8 0" />
<Setter Property="TextWrapping" Value="Wrap" />
<Setter Property="BorderBrush" Value="#0091EA" />
<Setter Property="BorderThickness" Value="1" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" Text="TextBox" FontSize="20" />
<TextBox Grid.Row="0" Grid.Column="1" Text="TextBox" />
<TextBox Grid.Row="0" Grid.Column="2" Text="TextBox" />
<TextBox Grid.Row="0" Grid.Column="3" Text="TextBox" />
<TextBox Grid.Row="0" Grid.Column="4" Text="TextBox" />
<TextBox Grid.Row="0" Grid.Column="5" Text="TextBox" />
</Grid>
<!--grid element-->
<DataGrid Grid.Row="1" MinHeight="200" Margin="15,0,8,0" AutoGenerateColumns="False" Background="White" >
<DataGrid.Resources>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#0091EA"/>
<Setter Property="Opacity" Value="1"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Height" Value="40"/>
</Style>
</DataGrid.Resources>
</DataGrid>
<!--bottom border element-->
<Rectangle Fill="#0091EA" Height="3" Grid.Row="2" />
<!--copyright-->
<TextBlock Grid.Row="3" HorizontalAlignment="Center" Text="Copyright some holder ####" />
</Grid>
<!--right border element-->
<Rectangle Fill="#0091EA" Width="3" Grid.Column="1" Grid.RowSpan="3" />
<!--right-hand grid-->
<Grid Grid.Column="2">
<!--Whatever content ends up here-->
</Grid>
</Grid>
I would advise looking into using stackpanels and dockpanels. Stackpanels have generally been more useful to me in my WPF experience. Also for headers and stuff near the top of the page use fixed spacing instead of calculated percentages based on screen size. I find it's generally better to keep menu bars at a fixed size and let the content be dynamic size.
once again after hours of struggle with WPF I need your awesome help.
I have read many different StackOverflows, nonetheless, I cannot seem to get my current situation working and I don't understand why. I have chosen to use a Grid in contrast to a DockPanel and I would like to keep it that way as well. According to what I have read the row definitions are ok, the second row of the template grid should automatically stretch. Unfortunately it does not, as it seems that the last row of the grid does not move away.
This is how my window looks at the moment:
As you can see is the blue row not at the bottom of the window. In fact, the window should not be that long in the first place.
This is the code snippet of my Generic.xaml file that is relevant to the problem.
The way it works is, that I have a Skin with a custom control group:
<!-- Window START-->
<ControlTemplate x:Key="WindowTemplate" TargetType="{x:Type Window}">
<Border BorderBrush="LightGray" BorderThickness="1" Background="Red" Padding="0" VerticalAlignment="Stretch">
<Grid x:Name="WindowRoot" Margin="0" VerticalAlignment="Top" Background="Blue" MouseDown="Window_MouseDown">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="25"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<!-- HEADER START-->
<Frame x:Name="header_background" Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="0" Background="#ddd" BorderThickness="0 0 0 1" BorderBrush="#c9c9c9"/>
<Image x:Name="LogoICon" Source="/MTApp;component/Resources/Icon.png" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Left" Margin="10 8"/>
<Label x:Name="windowTitle" Grid.ColumnSpan="2" Content="{TemplateBinding Title}" VerticalAlignment="Center" Foreground="#393939" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" FontFamily="Segoe UI Regular" FontSize="12"/>
<Grid Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35"/>
<ColumnDefinition Width="18"/>
<ColumnDefinition Width="19"/>
<ColumnDefinition Width="18"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition Height="20" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Button x:Name="minimizeBtn" Content="0" FontFamily="Marlett" Foreground="#393939" Background="Transparent" BorderThickness="0" Grid.Row="1" Grid.Column="1" Margin="3 0 0 0" Click="minimizeBtn_Click"/>
<Button x:Name="maximizeBtn" Content="2" FontFamily="Marlett" Foreground="#393939" Background="Transparent" BorderThickness="0" Grid.Row="1" Grid.Column="2" Margin="3 0 0 0" Click="maximizeBtn_Click"/>
<Button x:Name="quitBtn" Content="r" FontFamily="Marlett" Foreground="#393939" Background="Transparent" BorderThickness="0" Grid.Row="1" Grid.Column="3" Margin="3 0 0 0" Click="quitBtn_Click"/>
</Grid>
<!-- HEADER END-->
<!-- CONTENT START-->
<ContentPresenter Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="1" Height="Auto"/>
<!-- CONTENT END-->
<!-- FOOTER START-->
<Border x:Name="footer_background" Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="2" Height="25">
<ResizeGrip />
</Border>
<!-- FOOTER END-->
</Grid>
</Border>
</ControlTemplate>
<!-- Window END-->
<Style x:Key="LightSkin_0_1" TargetType="Window">
<Setter Property="WindowStyle" Value="None" />
<Setter Property="AllowsTransparency" Value="True" />
<Setter Property="ResizeMode" Value="CanResizeWithGrip" />
<Setter Property="Template" Value="{StaticResource WindowTemplate}" />
<Style.Triggers>
<DataTrigger Binding="{Binding WindowState}" Value="Maximized">
</DataTrigger>
</Style.Triggers>
</Style>
And my MainWindow.xaml is:
<Window x:Class="UHashIt.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:UHashIt"
mc:Ignorable="d"
Title="Window title"
WindowStartupLocation="CenterScreen"
MinHeight="275"
MinWidth="700"
Width="700"
Style="{DynamicResource LightSkin_0_1}">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Menu -->
<Border VerticalAlignment="Top" Padding="5" Background="#f2f2f2" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" BorderThickness="0 0 0 1" BorderBrush="LightGray">
<DockPanel >
<Menu DockPanel.Dock="Left">
<MenuItem Header="File">
<MenuItem Header="Add File" />
<MenuItem Header="Export.." />
<Separator />
<MenuItem Header="Close"/>
</MenuItem>
<MenuItem Header="Help">
<MenuItem Header="Online Documentation" />
<MenuItem Header="About"/>
</MenuItem>
</Menu>
</DockPanel>
</Border>
<!-- Menu End -->
<!-- Content -->
<Grid Grid.Row="1" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="150*"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="150*"/>
<ColumnDefinition Width="25"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="40" />
<RowDefinition Height="30" />
<RowDefinition Height="40" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Label Style="{DynamicResource headline4}" Content="File 1" Grid.Row="0" Grid.Column="1"/>
<TextBox Grid.Row="1" Style="{DynamicResource NormalTextBox}" Grid.Column="1"/>
<Button Grid.Column="2" Grid.Row="1" Style="{DynamicResource CommonButton}" Height="30" Width="30" VerticalAlignment="Top"/>
<Label Style="{DynamicResource headline5}" Grid.Row="1" Grid.Column="3"/>
<Label Style="{DynamicResource headline4}" Content="File 2" Grid.Row="2" Grid.Column="1"/>
<TextBox Grid.Row="3" Style="{DynamicResource NormalTextBox}" Grid.Column="1"/>
<Button Grid.Column="2" Grid.Row="3" Style="{DynamicResource CommonButton}" Height="30" Width="30" VerticalAlignment="Top"/>
<Label Style="{DynamicResource headline5}" Grid.Row="3" Grid.Column="3"/>
<!-- Hash Button and Selection -->
<ComboBox Grid.Row="4" Grid.Column="1" HorizontalAlignment="Left" Width="200" Height="30">
<ComboBoxItem>
Please Choose Your Algorithm
</ComboBoxItem>
</ComboBox>
<Button Grid.Column="1" Grid.Row="4" Style="{DynamicResource ActionBtn}" Content="Button" HorizontalAlignment="Right"/>
<!-- End-->
</Grid>
<!-- Content End-->
</Grid>
I cannot explain myself why the "blue bar" is not attached to the bottom. Despite the fact, that the window is so big.
I think you want to change this:
<Grid x:Name="WindowRoot" Margin="0" VerticalAlignment="Top" Background="Blue" MouseDown="Window_MouseDown">
to this:
<Grid x:Name="WindowRoot" Margin="0" VerticalAlignment="Stretch" Background="Blue" MouseDown="Window_MouseDown">
So I have a multi tier header, that is basically just a header with two sub headers underneath it,
the code for the look of the header is:
<Style x:Key="PlateDetailsmultitier" TargetType="DataGridColumnHeader" BasedOn="{StaticResource DataGridHeaderStyleBase2Tier}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="Root" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="49" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="24" />
<RowDefinition Height="1" />
<RowDefinition Height="24" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="49"/>
<ColumnDefinition Width="1" />
<ColumnDefinition Width="49"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="LightGray" Grid.ColumnSpan="3"/>
<Rectangle Fill="Black" Height="1" VerticalAlignment="Top" HorizontalAlignment="Stretch" Grid.ColumnSpan="3"/>
<ContentPresenter Content="Plate Details" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.ColumnSpan="3" MouseDown="ContentPresenter_MouseDown"/>
<Rectangle Fill="Black" VerticalAlignment="Stretch" Height="1" Grid.Row="1" Grid.ColumnSpan="3"/>
<ContentPresenter Content="t__plate" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" MouseDown="ContentPresenter_MouseDown"/>
<Rectangle Fill="Black" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="2" Grid.Column="1" />
<ContentPresenter Content="σy" Grid.Row="2" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center" MouseDown="ContentPresenter_MouseDown"/>
<Rectangle Fill="Black" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="3" Grid.Column="1" />
<Rectangle Fill="Black" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="4" Grid.Column="1" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But the problem is that when I go to try to edit these cells it just selects both columns as one cell, and i can not edit either of these columns.
I would like to be able to edit both columns seperatly.
To start off datagrid template column I just used
<DataGridTemplateColumn HeaderStyle="{StaticResource PlateDetailsmultitier}" Width="100">
Is anyone aware of a solution to this problem.
I'm new to vs10 and I'm trying to make a customized schedule/calender using WPF. So far I have somewhat of a visual. I'm using a grid with rectangles and separators to make the grid lines. What I'm confused on is how I can make every month. I want to be able to have two arrow buttons switching between months but I'm not sure what I can do to make the correct dates to appear where they should be. I was going to use buttons to display each date on the calender so when the user clicks on it he/she can add an event/appointment for that particular day/date. Any advice or tips is greatly appreciated.
Page x:Class="Camp_.SchedulePage"
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="315" d:DesignWidth="587"
Title="schedulePage" Background="#FF0A0A0A">
<Grid Width="Auto">
<Calendar Height="174" HorizontalAlignment="Left" Margin="190,78,0,0" Name="calendar1" VerticalAlignment="Top" Width="189" />
<Grid>
<Grid.Background>
<RadialGradientBrush>
<GradientStop Color="#FFC3D6F5" Offset="0" />
<GradientStop Color="#FFEFF5FF" Offset="1" />
</RadialGradientBrush>
</Grid.Background>
<Grid HorizontalAlignment="Stretch" Margin="98,60,0,0" Name="grid1" VerticalAlignment="Stretch" Width="Auto" OpacityMask="Black" Opacity="1" Background="#FFC2ECEC" ShowGridLines="False">
<Grid.Resources> <Style x:Key="VerticalSeparatorStyle"
TargetType="{x:Type Separator}"
BasedOn="{StaticResource {x:Type Separator}}">
<Setter Property="Margin" Value="0,0,0,0"/>
<Setter Property="LayoutTransform">
<Setter.Value>
<TransformGroup>
<TransformGroup.Children>
<TransformCollection>
<RotateTransform Angle="90"/>
</TransformCollection>
</TransformGroup.Children>
</TransformGroup>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Separator Grid.ColumnSpan="7" Height="19" HorizontalAlignment="Stretch" Margin="0" Name="separator4" VerticalAlignment="Stretch" Width="Auto" Grid.Row="3" Grid.RowSpan="2" Background="Aqua" HorizontalContentAlignment="Stretch" Foreground="Aqua" OpacityMask="Aqua" />
<Separator Height="19" HorizontalAlignment="Stretch" Margin="0" Name="separator2" VerticalAlignment="Stretch" Width="Auto" Background="Aqua" Grid.ColumnSpan="7" Grid.Row="1" Grid.RowSpan="2" HorizontalContentAlignment="Stretch" Foreground="Aqua" />
<Separator Height="26" HorizontalAlignment="Stretch" Name="separator1" VerticalAlignment="Stretch" Background="Aqua" Grid.Row="2" Grid.ColumnSpan="7" Margin="0" Grid.RowSpan="2" HorizontalContentAlignment="Stretch" Foreground="Aqua" />
<Separator Height="27" HorizontalAlignment="Stretch" Margin="0" Name="separator3" VerticalAlignment="Stretch" Background="Aqua" Grid.ColumnSpan="7" Grid.RowSpan="2" Width="Auto" HorizontalContentAlignment="Stretch" Foreground="Aqua" />
<Rectangle Height="Auto" HorizontalAlignment="Stretch" Name="rectangle1" Stroke="Aqua" VerticalAlignment="Stretch" Width="Auto" Grid.RowSpan="5" />
<Rectangle Grid.RowSpan="5" Height="Auto" HorizontalAlignment="Stretch" Name="rectangle2" Stroke="Aqua" VerticalAlignment="Stretch" Width="Auto" Grid.Column="1" />
<Rectangle Grid.RowSpan="5" HorizontalAlignment="Stretch" Name="rectangle3" Stroke="Aqua" VerticalAlignment="Stretch" Width="Auto" Grid.Column="2" />
<Rectangle Grid.RowSpan="5" Height="Auto" HorizontalAlignment="Stretch" Name="rectangle4" Stroke="Aqua" Grid.Column="3" />
<Rectangle Grid.RowSpan="5" Height="Auto" HorizontalAlignment="Stretch" Name="rectangle5" Stroke="Aqua" Grid.Column="4" Margin="0" Grid.ColumnSpan="2" />
<Rectangle Grid.RowSpan="5" Height="Auto" HorizontalAlignment="Stretch" Name="rectangle6" Stroke="Aqua" VerticalAlignment="Stretch" Grid.Column="5" />
<Rectangle Grid.RowSpan="5" Height="Auto" HorizontalAlignment="Stretch" Name="rectangle7" Stroke="Aqua" VerticalAlignment="Stretch" Grid.Column="6" />
<Button Content="1" Height="20" HorizontalAlignment="Stretch" Name="button1" VerticalAlignment="Top" Width="Auto" Grid.Column="6" HorizontalContentAlignment="Left" />
<Button Content="2" Height="20" HorizontalAlignment="Stretch" Name="button2" VerticalAlignment="Top" Width="Auto" Grid.Row="1" HorizontalContentAlignment="Left" />
</Grid>
<Grid Height="31" HorizontalAlignment="Stretch" Margin="98,31,0,0" Name="grid2" VerticalAlignment="Top" Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Content="Sunday" Height="28" HorizontalAlignment="Stretch" Margin="0,6,0,0" Name="label1" VerticalAlignment="Top" />
<Label Content="Monday" Height="28" HorizontalAlignment="Stretch" Margin="0,6,0,0" Name="label2" VerticalAlignment="Top" Grid.Column="1" />
<Label Content="Tuesday" Height="28" HorizontalAlignment="Stretch" Margin="0,6,0,0" Name="label3" VerticalAlignment="Top" Grid.Column="2" />
<Label Content="Wednesday" Height="28" HorizontalAlignment="Stretch" Margin="0,6,68,0" Name="label4" VerticalAlignment="Top" Grid.Column="3" Grid.ColumnSpan="2" />
<Label Content="Thursday" Height="28" HorizontalAlignment="Stretch" Margin="0,6,2,0" Name="label5" VerticalAlignment="Top" Grid.Column="4" />
<Label Content="Friday" Height="28" HorizontalAlignment="Stretch" Margin="0,6,0,0" Name="label6" VerticalAlignment="Top" Grid.Column="5" />
<Label Content="Saturday" Height="28" HorizontalAlignment="Stretch" Margin="0,6,0,0" Name="label7" VerticalAlignment="Top" Grid.Column="6" />
</Grid>
<Button Content=">" Height="23" HorizontalAlignment="Left" Margin="488,6,0,0" Name="button3" VerticalAlignment="Top" Width="29" />
<Button Content="<" Height="23" HorizontalAlignment="Left" Margin="168,8,0,0" Name="button4" VerticalAlignment="Top" Width="29" />
</Grid>
</Grid>
Usually I would bind a list of Day objects to an ItemsControl whose ItemsPanel is set to a Grid with 6 rows, and 7 columns, and either have each Day track what Week and WeekDay it belongs to, or have a converter figure out those values for me. Then I could bind those values to Grid.Row and Grid.Column in my ItemsControl.ItemContainerStyle
So my Day object would look like:
public class Day : INotifyPropertyChanged
{
// Of course, these should implement the usual PropertyChange Notifications
public int WeekNo {get; set;}
public int WeekDay {get; set;}
public DateTime Date {get; set;}
}
and I would have an ObservableCollection<Day> Days in my ViewModel, which would be bound in the XAML with this:
<ItemsControl ItemsSource="{Binding Days}">
<!-- ItemsPanelTemplate -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- ItemContainerStyle -->
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Column" Value="{Binding DayOfWeek}" />
<Setter Property="Grid.Row" Value="{Binding WeekNo}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
I wrote some examples on how to use an ItemsControl here if you're interested