Develop Reference

How to keep my screen responsive using grid in wpf

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.

WPF custom control datagrid - creating column

I am WPF newbie and i want to create datagrid custom control with multiple controls inside this control.
my custom datagrid xaml:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Bank"
xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit">
<Style TargetType="{x:Type local:EDataGrid}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:EDataGrid}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="500*" />
<RowDefinition Height="100*" />
</Grid.RowDefinitions>
<local:FilteringDataGrid x:Name="datagrid" Grid.Row="0" ItemsSource="{TemplateBinding ItemsSource}"></local:FilteringDataGrid>
<Grid Grid.Row="1" Height="26" Width="208">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="25*"/>
</Grid.ColumnDefinitions>
<Button x:Name="ButtonFirstPage" Grid.Column="0" Tag="First" Content="<<" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderThickness="1,1,0,1" />
<Button x:Name="ButtonPreviousPage" Grid.Column="1" Tag="Previous" Content="<" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Button x:Name="ButtonNextPage" Grid.Column="5" Tag="Next" Content=">" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Button x:Name="ButtonLastPage" Grid.Column="6" Tag="Last" Content=">>" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderThickness="0,1,1,1"/>
<TextBox x:Name="TbPage" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" Grid.Column="2" TextAlignment="Right" TextWrapping="Wrap" Text="1" VerticalAlignment="Stretch" BorderThickness="0,1" />
<TextBox x:Name="TbOfPage" VerticalContentAlignment="Center" Grid.Column="4" HorizontalAlignment="Stretch" TextWrapping="Wrap" VerticalAlignment="Stretch" Text="1" BorderThickness="0,1" />
<TextBox x:Name="TbPage_Copy" VerticalContentAlignment="Center" Grid.Column="3" TextAlignment="Center" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="z" VerticalAlignment="Stretch" BorderThickness="0,1"/>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
and i want use this datagrid as follows in main windows(ie. specify columns):
<local:EDataGrid x:Name="dataGrid" " AutoGenerateColumns="False" >
<wp:DataGrid.Columns>
<wp:DataGridTextColumn Header="Id" Binding="{Binding Id}"/>
<wp:DataGridTextColumn Header="Type" Binding="{Binding Type}"/>
</wp:DataGrid.Columns>
</local:EDataGrid>
when i use it as in this example, datagrid autogenerate columns and i want to have only this two specified columns in datagrid.

WPF Grid Rows and ResizeGrip do not anchor correctly

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">

WPF window shows blank

Excel AddIn, c#, .net 4.0, windows 7, ribbon
my addin has a ribbon tab, several ribbon buttons,
when one ribbon is clicked, the addin will send several web service calls and a window will pop up providing data in tab, treeview, gridview etc.
data in treeview, gridview are populated from web service calls.
All worked for a particular end user until yesterday
When he clicked button, the window seems showing up, but it is kind of behind Excel and could not be focused. Also it is blank with no tab, treeview, gridview, etc.
I verified all web service calls return properly.
The user has windows 7, Excel 2010 (32 bit).
I have no idea what could cause this. Please help.
this is my WPF window. thanks
<Window x:Class="MIMICWPFLib.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sharedC="clr-namespace:MIMICShared.Converter;assembly=MstarCommodityShared"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
xmlns:dxt="clr-namespace:DevExpress.Xpf.Utils.Themes;assembly=DevExpress.Xpf.Core.v11.2"
xmlns:Controls="clr-namespace:MIMICWPFLib.Controls"
Title="{Binding Title}"
Height="600" Width="850" Top="223" Left="164" ResizeMode="CanResize" Closing="WindowClosing"
WindowStyle="ToolWindow">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="MainWindowResources.xaml" />
<ResourceDictionary Source="Controls/BizzySpinner.xaml" />
</ResourceDictionary.MergedDictionaries>
<sharedC:BooleanToHiddenVisibility x:Key="boolToVis"/>
<sharedC:NegativeBooleanToHiddenVisibiltyConverter x:Key="negativeBoolToVis" />
<DataTemplate x:Key="{dxt:DXTabControlThemeKey ResourceKey=BackgroundTemplate, ThemeName=Office2007Silver}">
<Border BorderBrush="#FF828790" BorderThickness="1" Background="#E5E3E3"/>
</DataTemplate>
<DataTemplate x:Key="{dxt:DXTabControlThemeKey ResourceKey=BackgroundTemplate}">
<Border BorderBrush="#FF828790" BorderThickness="1" Background="White"/>
</DataTemplate>
<ControlTemplate x:Key="{dxt:DXTabControlThemeKey ResourceKey=TopLayoutTemplate}" TargetType="{x:Type dx:DXTabControl}">
<Grid>
<KeyboardNavigation.TabNavigation>Local</KeyboardNavigation.TabNavigation>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Margin="0,2,0,0" x:Name="tabHeadersPanel">
<KeyboardNavigation.TabIndex>1</KeyboardNavigation.TabIndex>
<KeyboardNavigation.DirectionalNavigation>Cycle</KeyboardNavigation.DirectionalNavigation>
<KeyboardNavigation.TabNavigation>Once</KeyboardNavigation.TabNavigation>
<Panel.ZIndex>1</Panel.ZIndex>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<dx:ClippedContainer Grid.Column="0" UseLayoutRounding="{TemplateBinding UseLayoutRounding}"
Style="{DynamicResource {dxt:DXTabControlInternalThemeKey ResourceKey=ClippedContainerTopLayoutStyle}}">
<dx:TabPanelContainer x:Name="panelContainer" Style="{DynamicResource {dxt:DXTabControlInternalThemeKey ResourceKey=PanelContainerTopLayoutStyle}}">
<dx:TabPanelContainer.Resources>
<Storyboard x:Key="ScrollStoryboard">
<DoubleAnimation Storyboard.TargetName="ItemsPanelTranslate"
Storyboard.TargetProperty="X" Duration="0:0:0.4" To="0">
<DoubleAnimation.EasingFunction>
<ExponentialEase EasingMode="EaseOut" Exponent="0" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</dx:TabPanelContainer.Resources>
<ItemsPresenter>
<ItemsPresenter.RenderTransform>
<TranslateTransform x:Name="ItemsPanelTranslate" />
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</dx:TabPanelContainer>
</dx:ClippedContainer>
<dx:TabControlScrollButton x:Name="PrevButton" Grid.Column="1" Style="{DynamicResource {dxt:DXTabControlThemeKey ResourceKey=PrevButtonStyle}}"
Margin="{DynamicResource {dxt:DXTabControlInternalThemeKey ResourceKey=ComponentsSpaceForHorizontalLayouts}}" />
<dx:TabControlScrollButton x:Name="NextButton" Grid.Column="2" Style="{DynamicResource {dxt:DXTabControlThemeKey ResourceKey=NextButtonStyle}}"
Margin="{DynamicResource {dxt:DXTabControlInternalThemeKey ResourceKey=ComponentsSpaceForHorizontalLayouts}}" />
<!--<dx:HeaderMenu Grid.Column="3" x:Name="HeaderMenu" IsTabStop="False" Style="{DynamicResource {dxt:DXTabControlThemeKey ResourceKey=HeaderMenuStyle}}"
Margin="{DynamicResource {dxt:DXTabControlInternalThemeKey ResourceKey=ComponentsSpaceForHorizontalLayouts}}" />-->
<Controls:HeaderMenuForDXTabControl Grid.Column="3"
x:Name="HeaderMenu"
IsTabStop="False"
Style="{DynamicResource {dxt:DXTabControlThemeKey ResourceKey=HeaderMenuStyle}}"
Margin="{DynamicResource {dxt:DXTabControlInternalThemeKey ResourceKey=ComponentsSpaceForHorizontalLayouts}}" />
</Grid>
<Grid Grid.Row="1">
<dx:DXContentPresenter ContentTemplate="{DynamicResource {dxt:DXTabControlThemeKey ResourceKey=BackgroundTemplate}}" IsTabStop="False">
</dx:DXContentPresenter>
<Grid Margin="1">
<dx:DXContentPresenter x:Name="contentPresenter" Margin="{TemplateBinding Padding}" UseLayoutRounding="{TemplateBinding UseLayoutRounding}"
Content="{TemplateBinding SelectedItemContent}" ContentTemplate="{TemplateBinding SelectedItemContentTemplate}">
<KeyboardNavigation.TabNavigation>Local</KeyboardNavigation.TabNavigation>
<KeyboardNavigation.DirectionalNavigation>Contained</KeyboardNavigation.DirectionalNavigation>
<KeyboardNavigation.TabIndex>2</KeyboardNavigation.TabIndex>
</dx:DXContentPresenter>
<dx:TabControlFastRenderPanel x:Name="fastRenderPanel" Margin="{TemplateBinding Padding}" UseLayoutRounding="{TemplateBinding UseLayoutRounding}" Visibility="Collapsed">
<KeyboardNavigation.TabNavigation>Local</KeyboardNavigation.TabNavigation>
<KeyboardNavigation.DirectionalNavigation>Contained</KeyboardNavigation.DirectionalNavigation>
<KeyboardNavigation.TabIndex>2</KeyboardNavigation.TabIndex>
</dx:TabControlFastRenderPanel>
</Grid>
</Grid>
</Grid>
</ControlTemplate>
</ResourceDictionary>
</Window.Resources>
<Grid>
<Grid Visibility="{Binding ShowProgress, Converter={StaticResource negativeBoolToVis}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" ></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="65"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto" MinWidth="2"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Row ="0" Height="37" Width="174" Margin="11,6,0,0"
Name="image1" Stretch="Fill" VerticalAlignment="Top"
HorizontalAlignment="Left"
Source="/MstarCommodityWPFLib;component/Resources/MorningstarLogo_Red.gif" />
<Border Grid.ColumnSpan="1" Grid.Row="0" HorizontalAlignment="Right" Margin="0,10,0,0"
Height="50" Width="400" Background="white" BorderThickness="1" BorderBrush="White" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="23"/>
<RowDefinition Height="4"/>
<RowDefinition Height="23"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentControl Content="{Binding Path=SearchBox}" Margin="0 0 5 0" />
<TextBlock Grid.Row="0" Grid.Column="1">
<Hyperlink Click="ShowSettings" TextDecorations="None">
<Image Source="{Binding ConfigImageFilePath}" ></Image>
</Hyperlink>
</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="1">
<Hyperlink Click="HelpHyperlinkClick">
<Image Source="{Binding HelpIconFilePath}"></Image>
</Hyperlink>
</TextBlock>
</Grid>
</Border>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Name="columnWidth" MaxWidth="350"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid x:Name="horizontalGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*" MinHeight="125"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Name="rowHeight" MinHeight="150"></RowDefinition>
</Grid.RowDefinitions>
<dx:DXTabControl Grid.Row="0"
Margin="10 0 5 5"
Name="MainTabRegion"
SelectedIndex="{Binding Tabs.SelectedIndex}"
ItemsSource="{Binding Tabs.TabItems}"
DestroyContentOnTabSwitching="False" BorderThickness="5"
OverridesDefaultStyle="True">
<dx:DXTabControl.View>
<dx:TabControlScrollView
ShowHeaderMenu="True"
AllowHideTabItems="True"
CloseHeaderMenuOnItemSelecting="True" ShowHiddenTabItemsInHeaderMenu="True" />
</dx:DXTabControl.View>
<dx:DXTabControl.ItemContainerStyle>
<Style TargetType="{x:Type dx:DXTabItem}">
<Setter Property="Visibility" Value="{Binding IsVisible, Mode=OneWay, Converter={StaticResource boolToVis}}"/>
</Style>
</dx:DXTabControl.ItemContainerStyle>
<dx:DXTabControl.ItemHeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Header}"
Visibility="{Binding IsVisible, Mode=OneWay, Converter={StaticResource boolToVis}}"
OverridesDefaultStyle="True" />
</DataTemplate>
</dx:DXTabControl.ItemHeaderTemplate>
</dx:DXTabControl>
<GridSplitter Grid.Row="1"
Margin="10 0 5 5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ShowsPreview="true"
ResizeDirection="Rows"
Height="5" />
<Border Grid.Row="2" Margin="10 0 5 5">
<ContentControl Content="{Binding Path=Basket}" />
</Border>
</Grid>
<GridSplitter Margin="0 20 0 0" Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ShowsPreview="true"
ResizeDirection="Columns"
x:Name="verticalSplitter"
DragCompleted="OnDragCompleted"
Width="5" />
<Border Grid.RowSpan="3" Grid.Column="2" Margin="3 20 0 0">
<ContentControl Content="{Binding Path=ColumnDataPreview}" />
</Border>
</Grid>
</Grid>
<Grid Height="25" Width="300" Visibility="{Binding ShowProgress, Converter={StaticResource boolToVis}}">
<ProgressBar IsIndeterminate="True" Orientation="Horizontal" />
<Viewbox>
<TextBlock Text="Loading ..." Padding="50 0"/>
</Viewbox>
</Grid>
</Grid>

I know this is old -- but we stumbled on to this with a legacy Office add-in that we support -- where one user is apparently experiencing this same issue.
We did some digging, and stumbled across this similar SO post: Blank WPF child windows on Windows 10
It looks like there are two options:
Instruct the user to update/fix their bad video card drivers.
Put a hack into the code that will force the content to redraw at just the right instant (i.e. InvalidateVisual is not sufficient, see the linked question's answers for more information).

Using datagrid to make a calender wpf

I made a calender using a grid. It has 7 columns, and 6 rows. By getting the day of the week and the week of the month I can figure out how to place the dates on the grid of the date choosen. However grids only show ugly grid lines. How can I change this to use a datagrid so that I can have solid gridlines like a calender should look. Or is there any other way I can get rid of the dashed grid lines to make it look better? Thanks in advance.
XAML: I make a ItemsControl and in that is the grid with the 7 columns and 6 rows.
<Grid Name="mainGrid">
<Grid Name="controlGrid" Margin="0,56,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="297*" />
<ColumnDefinition Width="290*" />
</Grid.ColumnDefinitions>
<ItemsControl ItemsSource="{Binding schedule}" Name="Calender" VerticalAlignment="Stretch" Grid.ColumnSpan="2">
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl" >
<Border BorderBrush="Aqua" BorderThickness="4">
<ItemsPresenter/>
</Border>
</ControlTemplate>
</ItemsControl.Template>
<!-- ItemsPanelTemplate -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid ShowGridLines="True" Name="gridCalender">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock OpacityMask="Black" Name="txtBlockdays">
<Button Content="{Binding day}" Width="175" HorizontalAlignment="Stretch" VerticalAlignment="Top" VerticalContentAlignment="Top" HorizontalContentAlignment="Left" Background="#FF94EBEB">
</Button>
</TextBlock>
</DataTemplate>
</ItemsControl.ItemTemplate>
<!-- ItemContainerStyle -->
<ItemsControl.ItemContainerStyle>
<Style >
<Setter Property="Grid.Column" Value="{Binding WeekDay}" />
<Setter Property="Grid.Row" Value="{Binding WeekNo}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</Grid>
<Grid Name="dayGrid" VerticalAlignment="Top" Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Content="Monday" Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="label2" VerticalAlignment="Bottom" Grid.Column="1" FontSize="16" />
<Label Content="Tuesday" Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="label3" VerticalAlignment="Bottom" Grid.Column="2" FontSize="16" />
<Label Content="Wednesday" Height="Auto" HorizontalAlignment="Stretch" Name="label4" VerticalAlignment="Bottom" Grid.Column="3" Margin="0" FontSize="16" />
<Label Content="Thursday" Height="Auto" HorizontalAlignment="Stretch" Name="label5" VerticalAlignment="Bottom" Grid.Column="4" Margin="0" FontSize="16" />
<Label Content="Friday" Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="label6" VerticalAlignment="Bottom" Grid.Column="5" FontSize="16" />
<Label Content="Saturday" Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="label7" VerticalAlignment="Bottom" Grid.Column="6" FontSize="16" />
<Button Content="<" Height="23" HorizontalAlignment="Left" Margin="0,1,0,0" Name="btnDateLeft" VerticalAlignment="Top" Width="29" Click="btnDateLeft_Click" />
<Button Content=">" Height="23" HorizontalAlignment="Left" Margin="26,1,0,0" Name="btnDateRight" VerticalAlignment="Top" Width="30" Click="btnDateRight_Click" />
<Label Content="Sunday" Name="label1" Width="Auto" FontSize="16" Margin="0,19,0,0" />
</Grid>
<Label HorizontalAlignment="Left" Margin="62,1,0,0" Name="lblDate" VerticalAlignment="Top" FontSize="15" FontWeight="Bold" Height="32" />
</Grid>

Adjust your ItemContainerStyle and set ShowGridlines to false.
<ItemsControl.ItemContainerStyle>
<Style TargetType="ComboBoxItem">
<Setter Property="Grid.Column" Value="{Binding WeekDay}" />
<Setter Property="Grid.Row" Value="{Binding WeekNo}" />
<Setter Property="Control.BorderBrush" Value="Black" />
</Style>
</ItemsControl.ItemContainerStyle>
Also note that you can also place a Rectangle in each box which you cold also style accordingly. there are many ways to achieve what you are after.