anybody got an idea why the datepicker shows the content of a nearby label? The label which is displayed is in a different grid. When I delete the Labels text and leave it blank the text of the next label of the grid is displayed and so on.
Cant figure out why this happens. Once im hovering over the datepicker with the mouse it shows the correct watermark.
[EDIT] Sorry, following a part of the code.
<StackPanel Grid.Row="1" Grid.Column="0">
<Grid Margin="10,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Content="Beauftragt durch:"
Grid.Row="0" Grid.Column="0"
Width="110" Margin="10,2"
HorizontalAlignment="Left" />
<TextBox x:Name="OrderedByEmp"
IsEnabled="False"
Text="{Binding OrderedByEmpName}"
Grid.Row="0" Grid.Column="1"
Width="110" Margin="10,2"
/>
<Label Content="Projekt:"
Grid.Row="1" Grid.Column="0"
Width="110" Margin="10,2"
HorizontalAlignment="Left" />
<TextBox x:Name="Project"
MaxLength="10"
Text="{Binding Project}"
Grid.Row="1" Grid.Column="1"
Width="110" Margin="0,2"
/>
<Label Content="Auftrag:"
Grid.Row="2" Grid.Column="0"
Width="110" Margin="10,2"
HorizontalAlignment="Left" />
<TextBox x:Name="Order" Text="{Binding Commission}"
MaxLength="8"
Grid.Row="2" Grid.Column="1"
Width="110" Margin="0,2"
/>
</Grid>
</StackPanel>
<StackPanel Grid.Row="1" Grid.Column="1">
<Grid Margin="10,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Content="Erstellt am:"
Grid.Row="0" Grid.Column="0"
Width="110" Margin="10,2"
HorizontalAlignment="Left" />
<TextBox x:Name="OrderDate" Text="{Binding OrderDate, Mode=TwoWay,StringFormat='{}{0:dd.MM.yyyy}'}"
IsEnabled="False"
Grid.Row="0" Grid.Column="1"
Width="110" Margin="0,2"
/>
<Label Content="Benötigt bis:"
Grid.Row="1" Grid.Column="0"
Width="110" Margin="10,2"
HorizontalAlignment="Left" />
<DatePicker x:Name="ExpectedFinishDate"
Grid.Row="1" Grid.Column="1"
Width="110"></DatePicker>
<Label Content="Abteilung:"
Grid.Row="2" Grid.Column="0"
Width="110" Margin="10,2" />
<ComboBox x:Name="Departments" Grid.Row="2" Grid.Column="1">
<ComboBox.ItemTemplate>
<DataTemplate>
<Label Content="{Binding Bezeichnung}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</Grid>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="1">
<Grid Margin="10,10,2,2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0"
VerticalAlignment="Center" HorizontalAlignment="Right">
FLAG:
</TextBlock>
<Image Grid.Row="0" Grid.Column="1" Height="20" Source="/Pictures/NotStartetButton.png" />
<Label Content="Fertiggestellt am:"
Grid.Row="1" Grid.Column="0"
Width="110" Margin="10,2"
HorizontalAlignment="Left" />
<TextBox x:Name="FinishDatetime"
IsEnabled="False"
Grid.Row="1" Grid.Column="1"
Width="110" Margin="0,2"
/>
<Label Content="Fertiggestellt durch"
Grid.Row="2" Grid.Column="0"
Width="110" Margin="10,2"
HorizontalAlignment="Left" />
<TextBox x:Name="FinishedByEmp"
IsEnabled="False"
Grid.Row="2" Grid.Column="1"
Width="110" Margin="0,2"
/>
</Grid>
</StackPanel>
When I put the datepicker to another spot its working correct.
Tried now for hours to figure out why... but cant find the reason.
Thanks for any suggestion!
I've tried to reproduce the problem in another file and realized that the behavior has changed. Stupidly I left the further research on that problem since I've thought it's located anywhere in the related bindings and just went ahead to come back to that later.
But finally I made so many changes that the problem just disappeared.
Related
I'm making an application in which i've used some controls inside Grid Panel. Its working fine but there is a problem for different screen resolution. The Grid controls cannot adapt screen resolution and clip out some control in Height. Whereas width adapt screen resolution correctly. The before and after image is under as you can see when translated into height, cause clipping problem. How to resolve this?
before translated into height:
after translated into height:
Code:
<Grid Grid.Row="3">
<Grid.Background>
<SolidColorBrush Color="#FF3E7038" Opacity="0.3"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Customer:" Grid.Column="0" Margin="10"/>
<controls:AutoCompleteBox Margin="0,10,10,0" Name="CustomerSearch" IsTextCompletionEnabled="True" SelectedItem="{Binding Name, Mode=TwoWay}" Grid.Column="1" PreviewKeyDown="CustomerSearch_PreviewKeyDown" >
<controls:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Code}"/>
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="{Binding Address}"/>
<TextBlock Text="{Binding Contact}"/>
</StackPanel>
</DataTemplate>
</controls:AutoCompleteBox.ItemTemplate>
</controls:AutoCompleteBox>
<TextBlock Text="Gross Amount:" Grid.Column="2" VerticalAlignment="Center" />
<TextBox Margin="5,10,0,0" Name="GrossAmount" Text="0.0" Grid.Column="3" IsReadOnly="True"/>
<TextBlock Text="Discount%:" Grid.Column="2" Grid.Row="1"/>
<TextBox Name="Discount" Text="0.0" Grid.Column="3" Grid.Row="1" PreviewTextInput="Discount_PreviewTextInput" PreviewKeyDown="Discount_PreviewKeyDown" />
<TextBlock Text="Net Pay:" Grid.Column="2" Grid.Row="2"/>
<TextBox Name="NetPay" Text="0.0" Grid.Column="3" Grid.Row="2" PreviewTextInput="Discount_PreviewTextInput" PreviewKeyDown="Discount_PreviewKeyDown" />
<TextBlock Text="Paid:" Grid.Column="2" Grid.Row="3"/>
<TextBox Name="Paid" Text="0.0" Grid.Column="3" Grid.Row="3" PreviewTextInput="Paid_PreviewTextInput" PreviewKeyDown="Paid_PreviewKeyDown"/>
<TextBlock Text="Return:" Grid.Column="2" Grid.Row="4"/>
<TextBox Name="Return" Text="0.0" Grid.Column="3" Grid.Row="4" IsReadOnly="True"/>
<WrapPanel Grid.Row="5" Margin="0,10,0,0" Grid.ColumnSpan="5" Grid.Column="2">
<Button Name="CheckoutBtn" Margin="0,0,5,0" PreviewKeyDown="CheckoutBtn_PreviewKeyDown" Click="CheckoutBtn_Click" >
<StackPanel Orientation="Horizontal">
<Image Width="40" Height="40" Stretch="Uniform" Source="/Images/checkout.png"/>
<Label Content="CHECKOUT" />
</StackPanel>
</Button>
<Button Name="CancelBtn" Margin="0,0,5,0" Click="CancelBtn_Click" >
<StackPanel Orientation="Horizontal">
<Image Width="40" Height="40" Stretch="Uniform" Source="/Images/cancel.png"/>
<Label Content="CANCEL" />
</StackPanel>
</Button>
<Button Name="SaveBtn" Click="SaveBtn_Click" Margin="0,0,5,0">
<StackPanel Orientation="Horizontal">
<Image Width="40" Height="40" Stretch="Uniform" Source="/Images/save.png"/>
<Label Content="SAVE" />
</StackPanel>
</Button>
</WrapPanel>
</Grid>
for the second row of the inner Grid I should set its Height explicitly, and if I set it to Auto the second and third rows are stacked over each other (will fill the same row even if the have different Grid.Row values):
<Window x:Class="Notifications.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:Notifications"
mc:Ignorable="d"
Title="Fun with Notifications!" Height="225" Width="325" WindowStartupLocation="CenterOwner">
<Grid IsSharedSizeScope="True" Margin="5,0,5,5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="CarLabels"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="Vehicle"/>
<ComboBox Name="cboCars" Grid.Column="1" DisplayMemberPath="PetName" />
</Grid>
<Grid Grid.Row="1" DataContext="{Binding ElementName=cboCars, Path=SelectedItem}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="CarLabels"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="30"/> <!--If set to auto, it will stack over the next row-->
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" Content="Id"/>
<TextBox Grid.Column="1" Grid.Row="0" Text="{Binding Path=CarId}" />
<Label Grid.Column="0" Grid.Row="1" Content="Make" Grid.RowSpan="2"/>
<TextBox Grid.Column="1" Grid.Row="1" Text="{Binding Path=Make}" Grid.RowSpan="2" />
<Label Grid.Column="0" Grid.Row="2" Content="Color"/>
<TextBox Grid.Column="1" Grid.Row="2" Text="{Binding Path=Color, UpdateSourceTrigger=PropertyChanged}"/>
<Label Grid.Column="0" Grid.Row="3" Content="Pet Name"/>
<TextBox Grid.Column="1" Grid.Row="3" Text="{Binding Path=PetName}"/>
<StackPanel Grid.Column="1" Grid.Row="4" HorizontalAlignment="Right" Orientation="Horizontal" Margin="0,5,0,5">
<Button x:Name="btnAddCar" Content="Add Car" Margin="5,0,5,0" Padding="4, 2" Click="btnAddCar_Click"/>
<Button x:Name="btnChangeColor" Content="Change Color" Margin="5,0,5,0" Padding="4, 2" Click="btnChangeColor_Click"/>
<Button x:Name="btnRemoveCar" Content="Remove Car" Margin="5,0,5,0" Padding="4,2" Click="btnRemoveCar_Click"/>
</StackPanel>
<Label Grid.Column="0" Grid.Row="5" Content="Is Changed"/>
<CheckBox Grid.Column="1" Grid.Row="5" VerticalAlignment="Center" Margin="10,5,0,5" IsEnabled="False" IsChecked="{Binding Path=IsChanged}" />
</Grid>
</Grid>
</Window>
http://i.imgur.com/hcbVBb5.png
Remove Grid.RowSpan="2" for the Make Label and Textbox. This causes it to run onto the following row.
It should be like this:
<Label Grid.Column="0" Grid.Row="1" Content="Make"/>
<TextBox Grid.Column="1" Grid.Row="1" Text="{Binding Path=Make}"/>
This is the current XAML i'm using to do this... and for the life of me cannot figure out how to expand the textbox to fill the entire column. Could anyone please guide me in the correct direction?
Thank you in advance!
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="15" />
<RowDefinition Height="15" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--ROW 0-->
<TextBlock Text="DOMAIN:"/>
<!--ROW 1-->
<Separator Grid.Row="1" Grid.ColumnSpan="2"/>
<!--ROW 2-->
<TextBlock Text="Connection credentials:" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="2" Grid.Column="0"/>
<StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1">
<Button Content="EDIT" Style="{DynamicResource SquareButtonStyle}" Width="80" Margin="0,0,10,0"/>
<TextBlock x:Name="CurrentCredentialslbl" Text="Connect as:" HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
</StackPanel>
<!--ROW 3-->
<TextBlock Text="Find accounts in domain:" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="3" Grid.Column="0"/>
<StackPanel Orientation="Horizontal" Grid.Row="3" Grid.Column="1">
<TextBox />
<Button Content="Browse" Style="{DynamicResource SquareButtonStyle}" Width="80" Margin="10,0,0,0"/>
</StackPanel>
<!--ROW 4-->
<CheckBox Content="Only search in this container" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="4" Grid.Column="0"/>
</Grid>
Grid with 2 columns instead of StackPanel should fit perfectly
<Grid Grid.Row="3" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox />
<Button Grid.Column="1"
Content="Browse"
Style="{DynamicResource SquareButtonStyle}"
Width="80" Margin="10,0,0,0"/>
</Grid>
I have a WPF form with which I would like to have arrow-key navigation. The current system is off, even though I have successfully specified the tab navigation order. I have two rows of three radio buttons. When I am on the middle button, top row, I should be able to hit the left arrow and select the first button of the top row; instead it selects the first button, bottom row. How do I correct this?
Update:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="80*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="15*"/>
<RowDefinition Height="15*"/>
<RowDefinition Height="15*"/>
<RowDefinition Height="30*"/>
<RowDefinition Height="25*"/>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" Content="Who:" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,5,0" FontSize="12"/>
<Label Grid.Column="0" Grid.Row="1" Content="Caller:" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,5,0" />
<Label Grid.Column="0" Grid.Row="2" Content="Office:" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,5,0" />
<Label Grid.Column="0" Grid.Row="3" Content="Name:" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,5,0" />
<Button Grid.Column="0" Grid.Row="4" Content="Find" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="0,0,0,0" Width="50" Command="{Binding Path=FindCommand}" IsDefault="True" Click="Button_Click" TabIndex="9" />
<Grid Grid.Column="1" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<RadioButton Content="All People" Grid.Column="0" HorizontalAlignment="Left" Margin="0,5,0,0" VerticalAlignment="Top" IsChecked="{Binding Path=IsPersonAll}" TabIndex="3" />
<RadioButton Content="Users Only" Grid.Column="1" HorizontalAlignment="Left" Margin="0,5,0,0" VerticalAlignment="Top" IsChecked="{Binding Path=IsPersonUser}" TabIndex="4" />
<RadioButton Content="Admin Only" Grid.Column="2" HorizontalAlignment="Left" Margin="0,5,0,0" VerticalAlignment="Top" TabIndex="5" />
</Grid>
<Grid Grid.Column="1" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<RadioButton Content="Off Campus" Grid.Column="0" HorizontalAlignment="Left" Margin="0,5,0,0" VerticalAlignment="Top" IsChecked="{Binding Path=IsCallerOff}" TabIndex="6" />
<RadioButton Content="Admin" Grid.Column="1" HorizontalAlignment="Left" Margin="0,5,0,0" VerticalAlignment="Top" IsChecked="{Binding Path=IsCallerOnAd}" TabIndex="7" />
<RadioButton Content="User" Grid.Column="2" HorizontalAlignment="Left" Margin="0,5,0,0" VerticalAlignment="Top" TabIndex="8" />
</Grid>
<ComboBox
Grid.Column="1" Grid.Row="2"
Height="25" HorizontalAlignment="Stretch"
Margin="0,0,0,0" VerticalAlignment="Top"
ItemsSource="{Binding Path=Offices}"
SelectedItem="{Binding Path=Office}" TabIndex="2" />
<Grid Grid.Column="1" Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="55*"/>
<RowDefinition Height="45*"/>
<RowDefinition Height="50*"/>
</Grid.RowDefinitions>
<TextBox Name="lName" Grid.Column="0" Grid.Row="0" Margin="0,0,5,0" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="22" Text="{Binding Path=LastName, UpdateSourceTrigger=PropertyChanged}" TabIndex="0" />
<TextBox Grid.Column="1" Grid.Row="0" Margin="5,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="22" Text="{Binding Path=FirstName, UpdateSourceTrigger=PropertyChanged}" TabIndex="1" />
<Label Grid.Column="0" Grid.Row="1" Content="Last Name" HorizontalAlignment="Left" Margin="-5,-5,0,0" VerticalAlignment="Top" />
<Label Grid.Column="1" Grid.Row="1" Content="First Name" HorizontalAlignment="Left" Margin="0,-5,0,0" VerticalAlignment="Top" />
<Label Grid.Row="2" Grid.ColumnSpan="2" Content="Please supply search information in Department or Name." Foreground="Red" HorizontalAlignment="Stretch" Margin="-5,-5,0,0" VerticalAlignment="Top" Height="26" Visibility="{Binding Path=ErrVisibility}"/>
</Grid>
</Grid>
It's also for me kind of odd behaviour and after playing around with it i can tell you that it's caused by the HorizontalAlignment property, but i can't really explain why. Maybe someone else can shed some light on that.
Some more information:
In your case controls are focused alphabetically by the content property. You can easily test that by changing
<RadioButton Content="All People" Grid.Column="0" HorizontalAlignment="Left"
to
<RadioButton Content="Pall People" Grid.Column="0" HorizontalAlignment="Left"
After changing, controls are now focused correctly from right to left on first line because of alphabetical order: Users -> Pall People -> Off Campus.
As i was not aware of this behaviour i tried to reproduce by creating a new project with following XAML, but the behaviour of arrow keys was as expected, focusing the next neigbour in direction of the arrow key:
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<RadioButton Grid.Column="0" Content="All People"></RadioButton>
<RadioButton Grid.Column="1" Content="Users Only"></RadioButton>
<RadioButton Grid.Column="2" Content="Admin Only"></RadioButton>
</Grid>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<RadioButton Grid.Column="0" Content="Off Campus"></RadioButton>
<RadioButton Grid.Column="1" Content="Admin"></RadioButton>
<RadioButton Grid.Column="2" Content="User"></RadioButton>
</Grid>
</Grid>
So i removed properties of the radio buttons of your xaml till i finally hit the point by removing HorizontalAlignment.
That XAML is now working as expected, at least for the radio buttons:
<Grid Grid.Column="1" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<RadioButton Content="All People" Grid.Column="0" Margin="0,5,0,0" VerticalAlignment="Top" IsChecked="{Binding Path=IsPersonAll}" TabIndex="3" />
<RadioButton Content="Users Only" Grid.Column="1" Margin="0,5,0,0" VerticalAlignment="Top" IsChecked="{Binding Path=IsPersonUser}" TabIndex="4" />
<RadioButton Content="Admin Only" Grid.Column="2" Margin="0,5,0,0" VerticalAlignment="Top" TabIndex="5" />
</Grid>
<Grid Grid.Column="1" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<RadioButton Content="Off Campus" Grid.Column="0" Margin="0,5,0,0" VerticalAlignment="Top" IsChecked="{Binding Path=IsCallerOff}" TabIndex="6" />
<RadioButton Content="Admin" Grid.Column="1" Margin="0,5,0,0" VerticalAlignment="Top" IsChecked="{Binding Path=IsCallerOnAd}" TabIndex="7" />
<RadioButton Content="User" Grid.Column="2" Margin="0,5,0,0" VerticalAlignment="Top" TabIndex="8" />
</Grid>
I'm very new to WPF and XAML. I am trying to design a basic data entry form. I have used a stack panel holding four more stack panels to get the layout I want. Perhaps a grid would be better for this, I am not sure.
And here is the XAML code that generates it:
<Window x:Class="Test1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="224" Width="536.762">
<StackPanel Height="Auto" Name="stackPanel1" Width="Auto" Orientation="Horizontal">
<StackPanel Height="Auto" Name="stackPanel2" Width="Auto">
<Label Height="Auto" Name="label1" Width="Auto">Patient Name:</Label>
<Label Height="Auto" Name="label2" Width="Auto">Physician:</Label>
<Label Height="Auto" Name="label3" Width="Auto">Insurance:</Label>
<Label Height="Auto" Name="label4" Width="Auto">Therapy Goals:</Label>
</StackPanel>
<StackPanel Height="Auto" Name="stackPanel3" Width="Auto">
<TextBox Height="Auto" Name="textBox1" Width="Auto" Padding="3" Margin="1" />
<TextBox Height="Auto" Name="textBox2" Width="Auto" Padding="3" Margin="1" />
<TextBox Height="Auto" Name="textBox3" Width="Auto" Padding="3" Margin="1" />
<TextBox Height="Auto" Name="textBox4" Width="Auto" Padding="3" Margin="1" />
</StackPanel>
<StackPanel Height="Auto" Name="stackPanel4" Width="Auto">
<Label Height="Auto" Name="label5" Width="Auto">Date:</Label>
<Label Height="Auto" Name="label6" Width="Auto">Patient Phone:</Label>
<Label Height="Auto" Name="label7" Width="Auto">Facility:</Label>
<Label Height="Auto" Name="label8" Width="Auto">Referring Physician:</Label>
</StackPanel>
<StackPanel Height="Auto" Name="stackPanel5" Width="Auto">
<TextBox Height="Auto" Name="textBox5" Width="Auto" Padding="3" Margin="1" />
<TextBox Height="Auto" Name="textBox6" Width="Auto" Padding="3" Margin="1" />
<TextBox Height="Auto" Name="textBox7" Width="Auto" Padding="3" Margin="1" />
<TextBox Height="Auto" Name="textBox8" Width="Auto" Padding="3" Margin="1" />
</StackPanel>
</StackPanel>
</Window>
What I really want is for the text boxes to stretch equally to fill up the space horizontally. I would also like for the controls in each vertical stackpanel to 'spread out' evenly as the window is resized vertically.
StackPanel always aligns its children against the top or left edge depending upon its orientation. It sounds like what you want is a UniformGrid where your outer StackPanel is. Try this:
<Window>
<UniformGrid Name="stackPanel1" Rows="1">
<StackPanel Name="stackPanel2">
...
</StackPanel>
<StackPanel Name="stackPanel3">
...
</StackPanel>
<StackPanel Name="stackPanel4">
...
</StackPanel>
<StackPanel Name="stackPanel5">
...
</StackPanel>
</UniformGrid>
</Window>
Note that you don't need to set Width=Auto or Height=Auto, this is implied.
But you are right that a Grid is probably better (even though the XAML is ugly) because in this layout configuration your labels could easily get out of alignment with the text boxes. You can try something like this too...
<UniformGrid Rows="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="Field 1" />
<TextBox Grid.Row="0" Grid.Column="1" />
<Label Grid.Row="1" Grid.Column="0" Content="Field 2" />
<TextBox Grid.Row="1" Grid.Column="1" />
<Label Grid.Row="2" Grid.Column="0" Content="Field 3" />
<TextBox Grid.Row="2" Grid.Column="1" />
</Grid>
<Grid /> <!-- repeat above -->
<Grid /> <!-- etc... -->
</UniformGrid>
Taking off what Josh said, if you require the controls to fill the space vertically as well, you can define some "space filler" rows to spread out the controls vertically as well. Here's some XAML which demonstrates this (I added margins to push the labels out from the window border).
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" Margin="5">Patient Name:</Label>
<TextBox Grid.Column="1" Grid.Row="0" Margin="5" />
<Label Grid.Column="0" Grid.Row="2" Margin="5">Physician:</Label>
<TextBox Grid.Column="1" Grid.Row="2" Margin="5" />
<Label Grid.Column="0" Grid.Row="4" Margin="5">Insurance:</Label>
<TextBox Grid.Column="1" Grid.Row="4" Margin="5" />
<Label Grid.Column="0" Grid.Row="6" Margin="5">Therapy Goals:</Label>
<TextBox Grid.Column="1" Grid.Row="6" Margin="5" />
<Label Grid.Column="2" Grid.Row="0" Margin="5">Date:</Label>
<TextBox Grid.Column="3" Grid.Row="0" Margin="5" />
<Label Grid.Column="2" Grid.Row="2" Margin="5">Patient Phone:</Label>
<TextBox Grid.Column="3" Grid.Row="2" Margin="5" />
<Label Grid.Column="2" Grid.Row="4" Margin="5">Facility:</Label>
<TextBox Grid.Column="3" Grid.Row="4" Margin="5" />
<Label Grid.Column="2" Grid.Row="6" Margin="5">Referring Physician:</Label>
<TextBox Grid.Column="3" Grid.Row="6" Margin="5" />
</Grid>