OK this is stupid! I'm confused. I have this xaml:
<StackPanel Style="{DynamicResource FormPanel}">
<StackPanel>
<Label Content="{DynamicResource Label_FirstName}"
Target="{Binding ElementName=FirstName}"/>
<TextBox x:Name="FirstName" />
</StackPanel>
<StackPanel>
<Label Content="{DynamicResource Label_LastName}"
Target="{Binding ElementName=LastName}"/>
<TextBox x:Name="LastName" />
</StackPanel>
<!-- and so one... for each row, I have a StackPanel and a Label and Textbox in it -->
</StackPanel>
and this style:
<Style x:Key="FormPanel" TargetType="{x:Type StackPanel}">
<Setter Property="Orientation" Value="Vertical"/>
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Style.Resources>
<Style TargetType="{x:Type StackPanel}">
<Setter Property="Orientation" Value="Horizontal" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Margin" Value="10"/>
<Style.Resources>
<Style TargetType="{x:Type Label}">
<Setter Property="Width" Value="140"/>
</Style>
<Style TargetType="{x:Type TextBox}">
<!-- this line doesn't affect -->
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
</Style.Resources>
</Style>
</Style.Resources>
</Style>
I want to set the TextBox.Width to the rest of container's (StackPanel) width. It seems in this case, HorizontalAlignment = Stretch not works. Have you any idea?
StackPanel only allocates space required to child elements than what's available. What you need is a DockPanel.
have a look at This for some detailed explanations on the same topic.
You can modify your code to something like:
<Style x:Key="FormPanel"
TargetType="{x:Type StackPanel}">
<Setter Property="Orientation"
Value="Vertical" />
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Style.Resources>
<Style TargetType="{x:Type DockPanel}">
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="Margin"
Value="10" />
<Setter Property="LastChildFill"
Value="True" />
<Style.Resources>
<Style TargetType="{x:Type Label}">
<Setter Property="Width"
Value="140" />
</Style>
</Style.Resources>
</Style>
</Style.Resources>
</Style>
usage:
<StackPanel Style="{DynamicResource FormPanel}">
<DockPanel>
<Label Content="{DynamicResource Label_FirstName}"
Target="{Binding ElementName=FirstName}" />
<TextBox x:Name="FirstName" />
</DockPanel>
<DockPanel>
<Label Content="{DynamicResource Label_LastName}"
Target="{Binding ElementName=LastName}" />
<TextBox x:Name="LastName" />
</DockPanel>
<!-- and so one... for each row, I have a StackPanel and a Label and Textbox in it -->
</StackPanel>
Misc:
in your case I'd probably not do this though. if your use case is to have N rows with each having 2 columns where second column stretches to use all remaining space, rather than have a StackPanel with a bunch of DockPanel's inside it per row, you can do it all with just using a Grid.
something like:
<Grid Margin="5">
<Grid.Resources>
<Style TargetType="{x:Type Label}">
<Setter Property="Margin"
Value="5" />
</Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Margin"
Value="5" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="140" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Row="0"
Grid.Column="0"
Content="{DynamicResource Label_FirstName}"
Target="{Binding ElementName=FirstName}" />
<TextBox x:Name="FirstName"
Grid.Row="0"
Grid.Column="1" />
<Label Grid.Row="1"
Grid.Column="0"
Content="{DynamicResource Label_LastName}"
Target="{Binding ElementName=LastName}" />
<TextBox x:Name="LastName"
Grid.Row="1"
Grid.Column="1" />
</Grid>
would give you the same output with only 1 layout container used.
StackPanel will only be as big as its contents.
I recommend you replace the inner StackPanel with DockPanel. The last child of DockPanel will fill available space (unless you explicitly override that behavior).
Related
I have an ItemsControl where I dynamically create a new GroupBox with several controls in it and model behind. That works so far. I've also implemented validation to my TextBoxes, which is also working as intended. And there is a Button to remove this GroupBox, which binds to the Ancestor of type UserControl.
<ItemsControl Grid.Row="2" ItemsSource="{Binding StorageLocationList, Mode=TwoWay}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<GroupBox Style="{StaticResource GroupBoxBase}">
<GroupBox.Header>
<CheckBox x:Name="ExportGroupCheckBox" Content="Storage Location active" IsChecked="{Binding GroupActive, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource CheckBoxBase}" IsEnabled="{Binding ElementName=ActivateExportCheckBox, Path=IsChecked}"/>
</GroupBox.Header>
<Grid>
<Grid IsEnabled="{Binding ElementName=ExportGroupCheckBox, Path=IsChecked}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="Name:" VerticalAlignment="Center"/>
<TextBox Grid.Row="0" Grid.Column="1" Style="{StaticResource LimitedCharTextBox}" Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnNotifyDataErrors=True}"/>
<Label Grid.Row="1" Grid.Column="0" Content="Storage Location:" VerticalAlignment="Center"/>
<TextBox Grid.Row="1" Grid.Column="1" IsReadOnly="True" Style="{StaticResource BaseTextBox}" Text="{Binding StorageLocationPath, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnNotifyDataErrors=True}"/>
<Button Grid.Row="1" Grid.Column="2" Content="Browse..." VerticalAlignment="Stretch" Command="{Binding StorageLocationBrowseCommand}" Style="{StaticResource ButtonBase}"/>
</Grid>
<Canvas>
<Button Canvas.Top="0" Canvas.Right="0" Content="X" ToolTip="Remove Group" Style="{StaticResource RemoveButton}" Command="{Binding ElementName=GPUserControl, Path=DataContext.RemoveStorageLocationGroupCommand}" CommandParameter="{Binding}"/>
</Canvas>
</Grid>
</GroupBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
When I now type something wrong in the TextBox that is bound to the Name property, the validation takes place and the TextBox receives a red border to indicate that. Cool. But the button to remove this GroupBox also gets a red border. And that's weird.
I also tried to set the Validation.ErrorTemplate of the Button to null like so:
<Setter Property="Validation.ErrorTemplate" Value="{x:Null}"/>
but that sets the TextBox Validation.ErrorTemplate to null as well.
So how are they connected to each other? Somehow through the UserControl?
Here is a screenshot of it:
EDIT:
Here are the Styles:
<Style x:Key="BaseTextBox" TargetType="TextBox">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="TextWrapping" Value="NoWrap"/>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Validation.ErrorTemplate" Value="{x:Null}"/>
</Trigger>
<Trigger Property="IsReadOnly" Value="True">
<Setter Property="Background" Value="LightGray"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="GroupBoxBase" TargetType="GroupBox">
<Setter Property="Padding" Value="2"/>
</Style>
<Style x:Key="ConfigurationMainWindownButton" TargetType="Button">
<Setter Property="Height" Value="Auto"/>
<Setter Property="Width" Value="70"/>
<Setter Property="Margin" Value="2,2,2,2"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
</Style>
<Style x:Key="RemoveButton" TargetType="Button" BasedOn="{StaticResource ConfigurationMainWindownButton}">
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Width" Value="20"/>
<Setter Property="Height" Value="20"/>
<Setter Property="Foreground" Value="Red"/>
<Setter Property="FontWeight" Value="Bold"/>
<!-- <Setter Property="Validation.ErrorTemplate" Value="{x:Null}"/> -->
</Style>
WPF marks all your ItemsControl as not valid not only your text box inside due to using the same data model (actually model is not valid - not controls) . Text box just set state to invalid value. You could resolve it with overriding Validation.ErrorTemplate style setting for Remove Group button control if the button have to ignore validate state of model .
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<AdornedElementPlaceholder />
</ControlTemplate>
</Setter.Value>
</Setter>
I am trying to create a small application using WPF. I want to add a border with a round corner to a text box. At the same time, I added global vales to the App.xaml file so I can reuse the colors.
This is what I added t my App.xaml file
<Application.Resources>
<System:String x:Key="TextRegular">#333333</System:String>
<System:String x:Key="TextDanger">#dc3545</System:String>
<System:String x:Key="TextInput">#495057</System:String>
<System:String x:Key="InputBorder">#80bdff</System:String>
<Style x:Key="FormControl" TargetType="TextBox">
<Setter Property="Padding" Value="5" />
<Setter Property="FontSize" Value="14" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="BorderThickness" Value="1" />
</Style>
<Style x:Key="FormInputBorder" TargetType="Border">
<Setter Property="BorderBrush" Value="{StaticResource TextRegular}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="3" />
</Style>
<Style x:Key="FormLabel" TargetType="Label">
<Setter Property="Padding" Value="5" />
<Setter Property="FontSize" Value="14" />
<Setter Property="VerticalAlignment" Value="Center" />
<!-- <Setter Property="Foreground" Value="{StaticResource TextRegular}" /> -->
</Style>
<Style x:Key="HasError" TargetType="TextBlock">
<Setter Property="Padding" Value="5" />
<Setter Property="VerticalAlignment" Value="Center" />
<!-- <Setter Property="Foreground" Value="{StaticResource TextDanger}" /> -->
</Style>
<Style x:Key="Col" TargetType="StackPanel">
<Setter Property="Margin" Value="3" />
</Style>
</Application.Resources>
Then in my MainWindow.xaml I am using these styles like so
<StackPanel Style="{StaticResource Col}">
<Grid>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*" ></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Style="{StaticResource Col}">
<Label Content="Name" Style="{StaticResource FormLabel}"></Label>
<Border Style="{StaticResource FormInputBorder}">
<TextBox x:Name="Name" Style="{StaticResource FormControl}"></TextBox>
</Border>
<TextBlock Text="NameError" Style="{StaticResource HasError}"></TextBlock>
</StackPanel>
<StackPanel Grid.Column="1" Style="{StaticResource Col}">
<Label Content="Phone Number" Style="{StaticResource FormLabel}"></Label>
<TextBox x:Name="Phone" Style="{StaticResource FormControl}"></TextBox>
<TextBlock Text="PhoneError" Style="{StaticResource HasError}"></TextBlock>
</StackPanel>
</Grid>
</StackPanel>
However I am the following errors
'#333333' is not a valid value for the 'System.Windows.Controls.Border.BorderBrush' property on a Setter.
'#333333' is not a valid value for the 'System.Windows.Documents.TextElement.Foreground' property on a Setter.
'#dc3545' is not a valid value for the 'System.Windows.Documents.TextElement.Foreground' property on a Setter.
How can I use my global color to change the font color of a TextBlock and TextBox? Also, how can I change the border color around my TextBox using the defined fonts?
You can't use String as the data type, because the target is a Brush:
<SolidColorBrush x:Key="TextRegular" Color="#333333" />
<SolidColorBrush x:Key="TextDanger" Color="#dc3545" />
<SolidColorBrush x:Key="TextInput" Color="#495057" />
<SolidColorBrush x:Key="InputBorder" Color="#80bdff" />
This is because XAML has built-in converter from XML attribute to SolidColorBrush during the parsing phase of XAML file (and if you check out the auto-generated xaml.g.cs files in the obj folder of your project you can confirm that is the case), but only directly when set to a property of type Brush.
In this case you are creating resources, which have to match the type required. Hence you were actually setting a string to a Brush and that is not possible, because the resource is evaluated and assigned at runtime and there is no conversion going on during the parsing of XAML (the compiler "can't know" what is the type of the resource until runtime, because you can modify resources anytime, so this is the best it can do).
I have a grid as the datatemplate for items in a listbox and it's not filling the whole width of the control. I have tried the suggestions in the other questions but they are not working:
This is the listbox xaml
<ListBox ItemsSource="{Binding AccessControl.Credentials}" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0">Name</Label>
<Label Grid.Column="0" Grid.Row="1">Attribute</Label>
<Label Grid.Column="2" Grid.Row="1">Value</Label> </Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and I am using a theme file from the following project: http://wpfthemes.codeplex.com/ here is the relevant part:
<Style TargetType="{x:Type ListBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="True" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="FontFamily" Value="Trebuchet MS" />
<Setter Property="FontSize" Value="12" />
<Setter Property="BorderBrush" Value="{DynamicResource ControlBorderBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="1" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<Grid>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Background="{DynamicResource ControlBackgroundBrush}">
<ScrollViewer Margin="1" Focusable="false" Foreground="{TemplateBinding Foreground}">
<StackPanel Margin="2" IsItemsHost="true" />
</ScrollViewer>
</Border>
<Border x:Name="DisabledVisualElement" IsHitTestVisible="false" Background="#A5FFFFFF" BorderBrush="#66FFFFFF" BorderThickness="1" Opacity="0" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="DisabledVisualElement" Value="1" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Did I miss something?
You need to make the ListBoxItems stretch their content, either by changing the respective property on the ListBox:
<ListBox HorizontalContentAlignment="Stretch" ...>
...or by setting it on the items via the ItemContainerStyle:
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
By default both will work as the ListBoxItem default style binds the HorizontalContentAlignment property to the owning ListBox's property.
I have scichart graph. The Scichart label is hidden because of too much digits.
how to make it visible?
Maybe margin it some pixels left?
How to control the margin of label through xaml or code behind?
the xaml i wrote for the graph :
<UserControl x:Class="EZTrader.Graph.GraphView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:EZTrader.Converters"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:graph="clr-namespace:EZTrader.Graph"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
xmlns:t="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
x:Name="GraphControlEx"
d:DataContext="{d:DesignInstance graph:GraphViewModel}"
d:DesignHeight="300"
d:DesignWidth="400"
mc:Ignorable="d">
<UserControl.Resources>
<converters:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
<Style x:Key="GridLineStyle"
TargetType="Line">
<Setter Property="Stroke"
Value="{StaticResource ChartGridLineBrush}" />
</Style>
<Style x:Key="AxisLabelStyle"
TargetType="s:DefaultTickLabel">
<Setter Property="Foreground"
Value="Pink" />
</Style>
<ControlTemplate x:Key="LastTickTemplate"
TargetType="Control">
<Border Name="PART_BoxAnnotationRoot"
Width="10"
Height="10"
Margin="-5,-5,0,0">
<Ellipse Fill="{StaticResource CurrentValueBrush}" />
</Border>
</ControlTemplate>
</UserControl.Resources>
<t:BusyIndicator IsBusy="{Binding IsLoadingGraph}">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<graph:GraphHeaderView Grid.Row="0"
DataContext="{Binding HeaderViewModel}"
Visibility="{Binding ElementName=LayoutRoot,
Path=DataContext.HeaderViewModel,
Converter={StaticResource NullToVisibilityConverter}}" />
<s:SciStockChart x:Name="Chart"
Grid.Row="1"
IsPanEnabled="True"
IsRubberBandZoomEnabled="False"
SeriesSource="{Binding SeriesViewModels}"
s:ThemeManager.Theme="EZ">
<s:SciStockChart.Background>
<ImageBrush ImageSource="../Resources/Images/ChartBackground.jpg" />
</s:SciStockChart.Background>
<s:SciChartSurface.RenderSurface >
<s:HighQualityRenderSurface Rendered="Rendered_Event" />
</s:SciChartSurface.RenderSurface>
<s:SciStockChart.GridLinesPanelStyle>
<Style TargetType="Control">
<Setter Property="BorderBrush"
Value="{StaticResource ChartGridLineBrush}" />
</Style>
</s:SciStockChart.GridLinesPanelStyle>
<s:SciStockChart.XAxisStyle>
<Style TargetType="s:CategoryDateTimeAxis">
<Setter Property="BarTimeFrame" Value="{Binding BarTimeFrame, Mode=OneWay}"/>
<Setter Property="VisibleRange" Value="{Binding XVisibleRange, Mode=TwoWay}"/>
<Setter Property="DrawMinorGridLines" Value="False" />
<Setter Property="DrawMajorTicks" Value="False"/>
<Setter Property="DrawMajorBands" Value="False"/>
<Setter Property="DrawMajorGridLines" Value="False"/>
<Setter Property="DrawLabels" Value="True"/>
<Setter Property="DrawMinorTicks" Value="False"/>
<Setter Property="GrowBy" Value="0, 0.1"/>
</Style>
</s:SciStockChart.XAxisStyle>
<s:SciStockChart.YAxisStyle>
<Style TargetType="s:NumericAxis">
<Setter Property="CursorTextFormatting" Value="0.000###"></Setter>
<Setter Property="AutoRange" Value="Always"/>
<Setter Property="TickTextBrush" Value="Gray"/>
<Setter Property="DrawMinorGridLines" Value="False" />
<Setter Property="DrawMajorTicks" Value="False"/>
<Setter Property="DrawMajorBands" Value="False"/>
<Setter Property="DrawMajorGridLines" Value="False"/>
<Setter Property="DrawLabels" Value="True"/>
<Setter Property="DrawMinorTicks" Value="False"/>
<Setter Property="TextFormatting" Value="0.#######" />
</Style>
</s:SciStockChart.YAxisStyle>
</s:SciStockChart>
<ListBox Grid.Row="1"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="20"
ItemsSource="{Binding ZoomOptions}"
SelectedItem="{Binding SelectedZoomOption, Mode=TwoWay}"
DisplayMemberPath="Name">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Width"
Value="30" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
<Grid Grid.Row="1" Margin="0,30,70,0" HorizontalAlignment="Right" VerticalAlignment="Top" Height="20" Width="200">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ComboBox Grid.Column="1"
ItemsSource="{Binding SeriesStyles}"
SelectedItem="{Binding SelectedSeriesStyle,
Mode=TwoWay}" Margin="10,0,0,0" />
</Grid>
</Grid>
</t:BusyIndicator>
the image:
I am learning WPF (Windows Presentation Foundation) on Visual Studio 2013. I have an issue with the layout of elements. I am using stackpanel and grid for element layout. Here is the simple layout which i have created:
... code omitted....
<StackPanel Style="{StaticResource ersStackPanel}">
<Grid Style="{StaticResource ersGrid}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="497*"/>
</Grid.ColumnDefinitions>
<Label Content="Elector's record scrapper" Style="{StaticResource ersHeadLabel}" />
</Grid>
<Grid Style="{StaticResource ersGrid}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150*"/>
<ColumnDefinition Width="347*"/>
</Grid.ColumnDefinitions>
<Label Content="VS" Style="{StaticResource ersLabel}"/>
<TextBox x:Name="VS" Grid.Column="1" Style="{StaticResource ersTextBox}" />
<Label Content="EV" Grid.Row="1" Style="{StaticResource ersLabel}"/>
<TextBox x:Name="EV" Grid.Row="1" Grid.Column="1" Style="{StaticResource ersTextBox}" />
<Label Content="ENo." Grid.Row="2" Style="{StaticResource ersLabel}"/>
<TextBox x:Name="ENo" Grid.Row="2" Grid.Column="1" Style="{StaticResource ersTextBox}" />
<Label Content="Select" Grid.Row="3" Style="{StaticResource ersLabel}"/>
<ComboBox Grid.Row="3" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" FontFamily="Verdana" FontSize="10" Background="White"/>
</Grid>
</StackPanel>
... code omitted...
Style Resource
<Window.Resources>
<Style x:Key="ersTextBox" BasedOn="{StaticResource {x:Type TextBox}}" TargetType="{x:Type TextBox}">
<Setter Property="FontSize" Value="10"></Setter>
<Setter Property="FontFamily" Value="Verdana"></Setter>
<Setter Property="FontWeight" Value="Medium"></Setter>
<Setter Property="Width" Value="250"></Setter>
<Setter Property="HorizontalAlignment" Value="Left"></Setter>
<Setter Property="VerticalAlignment" Value="Top"></Setter>
<Setter Property="Height" Value="23"></Setter>
<Setter Property="TextWrapping" Value="Wrap"></Setter>
</Style>
<Style x:Key="ersLabel" BasedOn="{StaticResource {x:Type Label}}" TargetType="{x:Type Label}">
<Setter Property="FontFamily" Value="Verdana"></Setter>
<Setter Property="FontSize" Value="10"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}"></Setter>
<Setter Property="HorizontalAlignment" Value="Right"></Setter>
<Setter Property="VerticalAlignment" Value="Top"></Setter>
<Setter Property="Width" Value="auto"></Setter>
</Style>
<Style x:Key="ersHeadLabel" BasedOn="{StaticResource ResourceKey=ersLabel}" TargetType="{x:Type Label}">
<Setter Property="FontSize" Value="20"></Setter>
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
</Style>
<Style x:Key="ersStackPanel" TargetType="{x:Type StackPanel}">
<Setter Property="Width" Value="497"></Setter>
<Setter Property="Height" Value="44"></Setter>
<Setter Property="VerticalAlignment" Value="Top"></Setter>
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
<Setter Property="Margin" Value="0,10,0,0"></Setter>
</Style>
<Style x:Key="ersGrid" TargetType="{x:Type Grid}">
<Setter Property="Height" Value="44"></Setter>
</Style>
</Window.Resources>
The problem is that all elements (Label, TextBox ..) are overlapping each other, Why they are not positioning like a stack (one after another) ??
If you are using grid layout you need to define rows and columns. If u don't define them, XAML will stack them one over the other. The last element defined will be the visible one.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="A"/> // The first is assumed that it is Grid.Row="0" Grid.Column="0"
<TextBlock Grid.Row="0" Grid.Column="1" Text="B"/>
<TextBlock Grid.Row="1" Grid.Column="0" Text="C"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="D"/>
</Grid>
This will look like this:
A B
C D
In your code the problem is that you are setting elements to the second, third and fourth row, but you didn't defined the rows in the first place.
Also remember that enumeration is Zero-based (First row is actually 0).