I have an issue with a text. In some custom usercontrols it is flickering every more/less second (probably when rendering) here is a gif:
I'm using these render and text options for now which are applied on Window:
RenderOptions.ClearTypeHint="Enabled"
TextOptions.TextFormattingMode="Display"
RenderOptions.BitmapScalingMode="HighQuality"
I was using these before:
RenderOptions.ClearTypeHint="Enabled"
RenderOptions.BitmapScalingMode="Linear"
TextOptions.TextRenderingMode="Grayscale"
TextOptions.TextFormattingMode="Display"
and it was ok but the text was too sharp.
XAML of this specific component:
<UserControl x:Class="FunctionButton" x:Name="PART_Base"
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"
xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" xmlns:ViewModels="clr-namespace:SkyPCTool"
xmlns:materialDesign="clr-namespace:MaterialDesignThemes.Wpf;assembly=MaterialDesignThemes.Wpf"
mc:Ignorable="d"
TextElement.FontWeight="Medium"
TextElement.FontSize="14"
FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
MinHeight="52" d:DesignWidth="300" Margin="0">
<UserControl.DataContext>
<ViewModels:FunctionButtonViewModel/>
</UserControl.DataContext>
<UserControl.Resources>
<ViewModels:TextToVisibilityConverter x:Key="textConverter" />
</UserControl.Resources>
<Border CornerRadius="2" Background="{StaticResource MaterialDesignPaper}">
<Grid Margin="12,6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Button x:Name="PART_Button" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="12,6" Content="{Binding ButtonCaption}" />
<Grid Grid.Column="1" Margin="6,0">
<Image Source="{Binding Icon}" ToolTip="{Binding IconTag}" />
</Grid>
<Grid Grid.Column="2" SnapsToDevicePixels="True">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Title}" RenderOptions.ClearTypeHint="Enabled" VerticalAlignment="Center" TextTrimming="CharacterEllipsis" FontSize="14" />
<TextBlock Grid.Row="1" Text="{Binding Description}" RenderOptions.ClearTypeHint="Enabled" Margin="12,0,0,0" Visibility="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource textConverter}}" FontWeight="Normal" VerticalAlignment="Center" TextWrapping="Wrap" FontSize="12.667" />
</Grid>
</Grid>
</Border>
I did it. I downloaded the Roboto font from Google website, then I set these options on Window:
RenderOptions.ClearTypeHint="Enabled"
TextOptions.TextFormattingMode="Ideal"
TextOptions.TextHintingMode="Animated"
TextOptions.TextRenderingMode="ClearType"
Related
I'm new with WPF controls, before I worked with WinForms applications, and there if I put anchor on control and put dock on container all works smoothly but here I have struggle where I mistake?
<Window x:Class="ChatApp.Client.ClientWindow"
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:ChatApp.Client"
mc:Ignorable="d"
Title="Client" Height="450" Width="800">
<Grid>
<DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<GroupBox Header="Client" Height="Auto">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="5, 0, 5, 0">Address:</TextBlock>
<TextBox x:Name="txtAddress" Width="80"></TextBox>
<TextBlock Margin="10, 0, 5, 0">Port:</TextBlock>
<TextBox x:Name="txtPort" Width="80"></TextBox>
<Button x:Name="btnConnect" Margin="430, 0, 5, 0" Content="Connect" Width="80" Click="btnConnect_Click"/>
</StackPanel>
</GroupBox>
</StackPanel>
<StackPanel DockPanel.Dock="Left" Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<GroupBox Header="Chat" Width="650" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<TextBox x:Name="txtConversation" AcceptsReturn="True"></TextBox>
</GroupBox>
</StackPanel>
<StackPanel DockPanel.Dock="Right" Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<GroupBox Header="Users" Width="135" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ListBox x:Name="lbUsers" Height="Auto" Margin="5,0" VerticalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</GroupBox>
</StackPanel>
</DockPanel>
</Grid>
</Window>
I have three group box top dock, second left dock and last one is for right dock.
When I want to resize form with mouse right group box doesn't want to stretch when
I resize form.
Your layout seems very over complicated - are you just trying to clone what you did in Winforms in WPF?
It doesn't make any sense to have StackPanels or a Grid with only one child control each.
Try replacing your DockPanel with appropriately sized Grid Rows and Columns.
The GroupBoxes won't resize if you hard code their widths.
There's no need to define an ItemTemplate for the ListBox just to display a single string.
Something like the following would be a good starting point for your layout.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="*" MinWidth="135" />
</Grid.ColumnDefinitions>
<GroupBox Header="Client" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="5">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Address:"/>
<TextBox x:Name="txtAddress" Width="80" Grid.Row="1" Grid.Column="0" />
<TextBlock Grid.Row="2" Grid.Column="0" Text="Port:" />
<TextBox x:Name="txtPort" Width="80" Grid.Row="3" Grid.Column="0" />
<Button x:Name="btnConnect" Grid.Row="0" Grid.Column="2" Content="Connect" Width="80" />
</Grid>
</GroupBox>
<GroupBox Header="Chat" Grid.Row="1" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<TextBox x:Name="txtConversation" AcceptsReturn="True" />
</GroupBox>
<GroupBox Header="Users" Grid.Row="1" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ListBox x:Name="lbUsers" />
</GroupBox>
</Grid>
I try to understand why a border element get clipped when reducing the width of the main window.
Please take a look the code block below.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="300" Width="500" Name="MainWin">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Border Background="Blue" Grid.Row="0" BorderBrush="Black" Width="{Binding ElementName=MainWin, Path=Width}" />
<Grid Grid.Row="1" Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Background="Black">
<Border Background="White" Width="150" Height="150" BorderBrush="Black" BorderThickness="2"
Margin="0,-100,0,0">
<TextBlock Text="{Binding ElementName=MainWin, Path=Width}" FontSize="14" FontWeight="Bold"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
</StackPanel>
<StackPanel Grid.Column="1" Background="Red" />
<StackPanel Grid.Column="2" Background="Yellow" />
</Grid>
</Grid>
</Window>
Here is what the border appears in the original window width:
Non-resized window
As you can see that the border is displayed outside its container because of the negative top margin, -100 in this case. This is what I expect to have for the border. But when I reduce the main window width to reach the right edge of the red rectangle the outside part of the border get clipped.
Resized window
I have tried to place this border element inside a custom StackPanel which overrides ArrangeOverride, MeasureOverride and GetLayoutClip method but unfortunately these methods are not invoked when the main window is being resized.
I appreciate if somebody can explain me what the reason is and how to work around with this issue.
Thanks a lot.
Based on the explanation of #Marks, here is my solution
Create a custom grid and overrides MeasureOverride method
Replace the inner grid by this custom grid
CustomGrid class
public class CustomGrid : Grid
{
private double _originalHeight = 0;
protected override Size MeasureOverride(Size constraint)
{
Size? size = null;
if (constraint.Width <= 300)
{
size = new Size(constraint.Width, _originalHeight);
}
else
{
size = base.MeasureOverride(constraint);
_originalHeight = constraint.Height;
}
return size.Value;
}
}
XAML code
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wpfApplication1="clr-namespace:WpfApplication1"
Title="MainWindow" Height="300" Width="500" Name="MainWin">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Border Background="Blue" Grid.Row="0" BorderBrush="Black" Width="{Binding ElementName=MainWin, Path=Width}" />
<wpfApplication1:CustomGrid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Background="Black">
<Border Background="White" Width="150" Height="150" BorderBrush="Black" BorderThickness="2"
Margin="0,-100,0,0">
<TextBlock Text="{Binding ElementName=MainWin, Path=Width}" FontSize="14" FontWeight="Bold"
HorizontalAlignment="Center"
VerticalAlignment="Bottom" />
</Border>
</StackPanel>
<StackPanel Grid.Column="1" Background="Red" />
<StackPanel Grid.Column="2" Background="Yellow" />
</wpfApplication1:CustomGrid>
</Grid>
You're binding the blue border's Width to the MainWindow's Width.
For the future: if you want to bind to the width of any FrameworkElement bind to its ActualWidth property.
The order in which WPF draws its stuff is quite dependent on the containing control. I'd say in your case the outer Grid draws its children that need updating in the order they are defined. So you're good to go as long as the inner grid changes along with the border. This is the case as long as the Width of the third column changes. Once it's at 0 there's no more change so it doesn't get updated.
(2) is speculation =)
don't do (1), there's no need for it
Use one Grid
Some XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Background="Blue" BorderBrush="Black" Grid.ColumnSpan="3"/>
<StackPanel Grid.Column="0" Grid.Row="1" Background="Black" >
<Border Background="White" Width="150" Height="150" BorderBrush="Black" BorderThickness="2" Margin="0,-100,0,0">
<TextBlock Text="{Binding ElementName=MainWin, Path=ActualWidth}" FontSize="14" FontWeight="Bold"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="1" Background="Red" />
<StackPanel Grid.Column="2" Grid.Row="1" Background="Yellow" />
</Grid>
There is Usercontrol with RichTextBox.
When user adds a text then bottom of RTB moves outside of window.
How to fit RTB to window and to do vertical scroll bar?
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:ServiceProcess.Helpers.Controls"
x:Class="ServiceProcess.Helpers.Views.ServiceView"
x:ClassModifier="internal"
Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="boolToVis" />
</UserControl.Resources>
<StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Margin="2"
Grid.Row="0" Grid.Column="0"
Text="{Binding Name}" />
<TextBlock Margin="2"
Grid.Row="0" Grid.Column="1"
Text="{Binding CurrentState}" HorizontalAlignment="Left"/>
<controls:GifImage Grid.Row="0" Grid.Column="2"
AnimationSource="pack://application:,,,/ServiceProcess.Helpers;component/Images/spinner.gif"
Stretch="None"
Visibility="{Binding Path=IsBusy, Converter={StaticResource boolToVis}}" />
</Grid>
<RichTextBox Name="rtb"
Height="Auto" Width="Auto"
HorizontalAlignment="Stretch"
Margin="6,6,0,0"
VerticalAlignment="Stretch"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto" >
<FlowDocument Name="rtbFlowDoc" PageWidth="{Binding ElementName=rtb, Path=ActualWidth}" >
<Paragraph FontSize="14">Hello, world!</Paragraph>
<Paragraph FontStyle="Italic" TextAlignment="Left" FontSize="12" Foreground="Gray">Thanks to the RichTextBox control, this FlowDocument is completely editable!</Paragraph>
</FlowDocument>
</RichTextBox>
</StackPanel>
</UserControl>
I am trying to add RTB to the free space of this window to display log messages
http://windowsservicehelper.codeplex.com/
If I understand it correctly from your code, this is inside a template of a ListView's item.
In ServicesControllerView.xaml add ScrollViewer.CanContentScroll="False" to the ListView.
I have a main abstract code-only class BaseImpostorButton, inheriting UserControl. I have a child class ClickableImageButton with xaml and code-behind.
I'm using the following style with ControlTemplate :
<Style TargetType="{x:Type local:ClickableImageButton}">
<Setter Property="ToolTipService.InitialShowDelay" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ClickableImageButton}">
<StackPanel Margin="{TemplateBinding Margin}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<ContentPresenter
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
When using in a ListView as raw ListViewItem, my ClickableImageButton shows correctly.
BUT: when using it in a listview with ItemTemplate DataTemplate, the ClickableImageButton is no longer shown... as if the Content was empty when inside a DataTemplate.
The solution i found was to write a DependencyProperty ButtonContent on BaseImpostorButton and set it explicitly in xaml.
But can someone explain this issue ?
EDIT: Here are the 2 different xaml
The one that is correctly showing the underlying image (ClickableImage is an Image)
<ListView Grid.Row="1" Name="ListViewSections" ItemsSource="{Binding Path=Sections}" Background="{x:Null}" SizeChanged="ListViewSections_SizeChanged">
<ListViewItem>
<Grid MaxWidth="600">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="150"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.ColumnSpan="2" Text="{Binding Path=Titre}" Margin="5,0,5,0" FontSize="18" FontWeight="Bold" Foreground="White" TextWrapping="Wrap" FontFamily="Arial" HorizontalAlignment="Left" />
<local:ClickableImageButton Grid.Row="1" Tag="{Binding Path=Id}" Grid.Column="0" ImpostorClick="Image_Click" Margin="10">
<local:ClickableImageButton.Content>
<local:ClickableImage Source="Content/tada.png" />
</local:ClickableImageButton.Content>
</local:ClickableImageButton>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Texte}" Margin="10,0,10,0" FontSize="16" Foreground="White" TextWrapping="Wrap" FontFamily="Arial" VerticalAlignment="Center" HorizontalAlignment="Left" />
</Grid>
</ListViewItem>
</ListView>
And the one that's not working
<ListView Grid.Row="1" Name="ListViewSections" ItemsSource="{Binding Path=Sections}" Background="{x:Null}" SizeChanged="ListViewSections_SizeChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid MaxWidth="600">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="150"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.ColumnSpan="2" Text="{Binding Path=Titre}" Margin="5,0,5,0" FontSize="18" FontWeight="Bold" Foreground="White" TextWrapping="Wrap" FontFamily="Arial" HorizontalAlignment="Left" />
<local:ClickableImageButton Grid.Row="1" Tag="{Binding Path=Id}" Grid.Column="0" ImpostorClick="Image_Click" Margin="10">
<local:ClickableImageButton.Content>
<local:ClickableImage Source="Content/tada.png" />
</local:ClickableImageButton.Content>
</local:ClickableImageButton>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Texte}" Margin="10,0,10,0" FontSize="16" Foreground="White" TextWrapping="Wrap" FontFamily="Arial" VerticalAlignment="Center" HorizontalAlignment="Left" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
So finally i get it to work. That wasn't due to the fact that i was deriving from UserControl.
So i kept deriving BaseImpostorButton from UserControl, i emptyed the ContentPresenter in the ControlTemplate (<ContentPresenter />).
I didn't have to set the DefaultStyleKey.
I just had to remove any content from the child class xaml file. Indeed, when i created my child UserControl, i didn't removed the default content added, that is <Grid />. Removing this just solved all my problems.
Looks like the default Content is not overriden when we try to set it from a templated context, but only when set from a non templated context.
ie Former code:
<sk:BaseImpostorButton x:Class="Compteur_3D.ClickableImageButton"
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="300" d:DesignWidth="300">
<Grid/>
</sk:BaseImpostorButton>
revised code:
<sk:BaseImpostorButton x:Class="Compteur_3D.ClickableImageButton"
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="300" d:DesignWidth="300">
</sk:BaseImpostorButton>
Edit: At runtime, my ClickableImageButton element has the right content (ie ClickableImage) when the <Grid /> is removed. BUT when <Grid /> is not removed, my ClickableImageButton has the empty Grid as content... As if this <Grid /> was not overriden when setting the content in:
<local:ClickableImageButton ImpostorClick="Image_Click" Margin="10">
<local:ClickableImageButton.Content>
<local:ClickableImage Source="{Binding Path=Image.Source}" />
</local:ClickableImageButton.Content>
</local:ClickableImageButton>
Edit: Target Framework 4 Client Profile
Can anyone tell me why the datagrid in this example gets cut off when it grows past the bounds of the Grid.Row which contains it? Here is the xaml and code-behind which you can use in a VS 2010 'Silverlight Application' template. Thanks in advance.
<UserControl
x:Class="SilverlightApplication3.MainPage"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
mc:Ignorable="d" >
<Grid>
<Border>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- header -->
<Border Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height="40" >
</Border>
<!-- employee category selection -->
<Grid Grid.Row="1" Margin="10">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Category:" Margin="0,0,10,0" VerticalAlignment="Center" />
<ComboBox ItemsSource="{Binding EmployeeTypes}" SelectedItem="{Binding EmployeeType, Mode=TwoWay}" MinWidth="100" />
</StackPanel>
<Border BorderBrush="Black" BorderThickness="10" Height="2" Margin="0,10,0,0" ></Border>
</StackPanel>
</Grid>
<!-- content -->
<Grid Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- daily employee grid -->
<Grid Grid.Row="0" Visibility="Visible" Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="Category Type:" />
<ComboBox ItemsSource="{Binding Categories}"
SelectedItem="{Binding Category, Mode=TwoWay}"
DisplayMemberPath="Name" HorizontalAlignment="Left" Width="250">
</ComboBox>
<TextBlock Text="Category Types:" Margin="0,10,0,0" />
<sdk:DataGrid x:Name="dataGrid" AutoGenerateColumns="True"
HorizontalAlignment="Left" VerticalAlignment="Stretch" MinWidth="250" VerticalScrollBarVisibility="Visible" >
<sdk:DataGrid.ColumnHeaderStyle>
<Style TargetType="sdk:DataGridColumnHeader">
<Setter Property="FontWeight" Value="Bold"/>
</Style>
</sdk:DataGrid.ColumnHeaderStyle>
</sdk:DataGrid>
</StackPanel>
</Grid>
</Grid>
<!-- buttons -->
<StackPanel Grid.Row="3" Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,10,0,0" >
<Button Command="{Binding SaveCommand}"
Width="80" HorizontalContentAlignment="Center" Margin="0,0,2,0">
<StackPanel Orientation="Horizontal">
<Image Source="../Images/Approve24x24.png" Height="24" Width="24"/>
<TextBlock Text="Save" VerticalAlignment="Center" Margin="2"/>
</StackPanel>
</Button>
<Button Command="{Binding CancelCommand}"
Width="80" HorizontalContentAlignment="Center">
<StackPanel Orientation="Horizontal">
<Image Source="../Images/Delete24x24.png" Height="24" Width="24"/>
<TextBlock Text="Cancel" VerticalAlignment="Center" Margin="2"/>
</StackPanel>
</Button>
</StackPanel>
</Grid>
</Border>
</Grid>
and the code-behind:
using System.Collections.Generic;
using System.Windows.Controls;
namespace SilverlightApplication3
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
List<string> testItems = new List<string>();
for (int i = 0; i < 50; i++)
{
testItems.Add(string.Format("Item Number {0}", i.ToString()));
}
this.dataGrid.ItemsSource = testItems;
}
}
}
You used the StackPanel to display some elements and datagrid. So here datagrid is not constrained to any height, moreover the the parent grid of stackpanel's height is Auto. So there is no where you are making grid to occupy fixed size.
I modified your code with in a grid.
<!-- content -->
<Grid Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- daily employee grid -->
<Grid Grid.Row="0" Visibility="Visible" Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="28" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel>
<TextBlock Text="Category Type:" />
<ComboBox ItemsSource="{Binding Categories}"
SelectedItem="{Binding Category, Mode=TwoWay}"
DisplayMemberPath="Name" HorizontalAlignment="Left" Width="250">
</ComboBox>
</StackPanel>
<TextBlock Text="Category Types:" Margin="0,10,0,0" Grid.Row="1" />
<sdk:DataGrid x:Name="dataGrid" AutoGenerateColumns="True" Grid.Row="2" ScrollViewer.VerticalScrollBarVisibility="Visible" Margin="10"
HorizontalAlignment="Left" VerticalAlignment="Top" MinWidth="250" VerticalScrollBarVisibility="Visible" >
<sdk:DataGrid.ColumnHeaderStyle>
<Style TargetType="sdk:DataGridColumnHeader">
<Setter Property="FontWeight" Value="Bold"/>
</Style>
</sdk:DataGrid.ColumnHeaderStyle>
</sdk:DataGrid>
</Grid>
</Grid>
This should give you the expected result.