I have a following XAML code (also filled with some dummy content to demonstrate the issue):
<Window x:Class="WpfWatchBird.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="378" Width="728"
Name="frmMainList">
<Grid Name="grdMainLayout">
<ListBox Name="lstData" SelectionChanged="lstData_SelectionChanged" HorizontalAlignment="Stretch">
<ListBoxItem HorizontalContentAlignment="Stretch">
<ListBoxItem.Content>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="100"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Label Content="nick" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Teal" Grid.Column="0" Grid.Row="0" Margin="0" Padding="0"/>
<Label Content="kategória" VerticalAlignment="Center" Foreground="Green" Grid.Column="1" Grid.Row="0" Margin="10,0,0,0" Padding="0"/>
<Label Content="stav záznamu" Foreground="Gray" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0" Padding="0" Grid.Column="2" Grid.Row="0"/>
<Label Content="1.1. 2013 12:00" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,5,0" Padding="0" Grid.Column="3" Grid.Row="0"/>
<Image HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Grid.Row="1" Source="http://www.birdz.sk/la/bezfotky.gif" />
<StackPanel x:Name="spItemText" Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="3" HorizontalAlignment="Stretch">
<TextBlock MaxWidth="{Binding ElementName=spItemText,Path=ActualWidth}" FontSize="18" TextWrapping="Wrap">
<TextBlock.Text>Nadpis blogu, konečne, dámy a páni :)</TextBlock.Text>
</TextBlock>
<TextBlock HorizontalAlignment="Stretch" xml:space="preserve" TextWrapping="Wrap" Margin="10,0,0,0"
Padding="0" VerticalAlignment="Top"
MaxWidth="{Binding ElementName=spItemText, Path=ActualWidth}">
<TextBlock.Text>Preview textu blogu, blablabla, blabla, bude to pekné a krásne
a bude to vedieť robiť aj newliny, len ešte nejak spraviť zarovnanie, aby nebolo... aha, ono nie je, on mi len kvôli xml:space preserve... A už mi aj krásne funguje textwrapping, keď som poodstraňoval zopár nepotrebných
...hmm... tak jeden riadok to wraplo dobre, ale ten ďalší už nie, zaujímavé...
</TextBlock.Text>
</TextBlock>
</StackPanel>
<Label Grid.Column="1" Grid.Row="2">
<Hyperlink>Otvor originál</Hyperlink>
</Label>
<Label Grid.Column="3" Grid.Row="2" HorizontalAlignment="Right">
<Hyperlink>Otvor zložku so zálohou</Hyperlink>
</Label>
</Grid>
</ListBoxItem.Content>
</ListBoxItem>
<ListBoxItem Content="Menu 2" />
</ListBox>
</Grid>
</Window>
When growing the window, it resizes correctly, but upon shrinking it refuses to do so. I have found this question which seems very much related, but I don't consider the answer in there to be a proper answer (also, I can't comment on questions/answers, otherwise, I'd write it there).
The "answer" says that by default ItemsControls are grow-only, but the "by default" suggests there is a way to override this, however the answer doesn't explain how this is done and I can't find anything about it... Any ideas? I'd like to do it in XAML, it should be possible without codebehind hacks, IMO...
Set ScrollViewer.HorizontalScrollBarVisibility="Disabled" on the list box.
The reason is that scroll viewer (that is part of the template of ListBox) will "prefer" to open a horizontal scroll bar than to shrink the content.
Related
I'm learning how to use gridsplitters and I'm getting confused by how seemingly different a horizontal splitter is to a vertical one. If you look at the XAML below, the first gridsplitter I made very easily, everything worked as expected, I set what row and column it should be in, then set how many rows it should span. It placed the splitter where I would expect it, on the right side on the column. (It doesn't actually resize anything and I don't know why, but at least it's there, where it's supposed to be).
The second splitter however will simply not cooperate in any way. I want it to be placed above the textbox at the bottom of the form. So I set it to that one cell, and it looks like it put itself in the center of the row. I'm obviously getting confused by something simple I don't understand, could someone tell me why the second gridsplitter is not behaving like I want?
<Window x:Class="FontViewer.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:FontViewer"
mc:Ignorable="d"
Title="Font Viewer" Height="480" Width="600">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.8*"/>
<RowDefinition Height="0.5*"/>
<RowDefinition Height="0.7*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="0.3*"/>
</Grid.RowDefinitions>
<Border CornerRadius="6"
BorderThickness="1"
BorderBrush="Gray"
Background="LightGray"
Padding="8"
Margin="6"
Grid.ColumnSpan="2">
<TextBlock FontSize="14"
TextWrapping="Wrap">
Select a font to view from the list below.
You can change the text by typing in the region at the bottom.
</TextBlock>
</Border>
<ListBox x:Name="FontList"
Grid.Row="1"
Grid.RowSpan="5"
HorizontalAlignment="Right"
ItemsSource="{x:Static Fonts.SystemFontFamilies}"
Width="190"
Margin="0 0 0 8">
</ListBox>
<TextBox x:Name="SampleText"
Grid.Row="5"
Grid.Column="1"
VerticalAlignment="Center"
Height="18"
MinLines="4"
Margin="0 0 6 0"
TextWrapping="Wrap"
ToolTip="Type here to change the preview text.">
The quick brown fox jumps over the lazy dog.
</TextBox>
<TextBlock Text="{Binding ElementName=SampleText, Path=Text}"
FontFamily="{Binding ElementName=FontList,Path=SelectedItem}"
FontSize="10"
TextWrapping="Wrap"
Margin="6"
Grid.Column="1"
Grid.Row="1"/>
<TextBlock Text="{Binding ElementName=SampleText, Path=Text}"
FontFamily="{Binding ElementName=FontList,Path=SelectedItem}"
FontSize="16"
TextWrapping="Wrap"
Margin="6"
Grid.Column="1"
Grid.Row="2"/>
<TextBlock Text="{Binding ElementName=SampleText, Path=Text}"
FontFamily="{Binding ElementName=FontList,Path=SelectedItem}"
FontSize="24"
TextWrapping="Wrap"
Margin="6"
Grid.Column="1"
Grid.Row="3"/>
<TextBlock Text="{Binding ElementName=SampleText, Path=Text}"
FontFamily="{Binding ElementName=FontList,Path=SelectedItem}"
FontSize="32"
TextWrapping="Wrap"
Grid.Column="1"
Grid.Row="3"
Margin="6,84,6,5.765" Grid.RowSpan="2"/>
<GridSplitter Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="6"
Width="3"
Background="LightGray"
ResizeBehavior="PreviousAndNext"
ResizeDirection="Columns" />
<GridSplitter Grid.Row="5"
Grid.Column="1"
Height="3"
Background="Black"
ResizeBehavior="PreviousAndNext"
ResizeDirection="Rows" />
</Grid>
Edit: It looks like I didn't include the closing window tag in the code, but it is there, it just gets omitted for some reason.
You have
Grid.RowSpan="6"
On the first one, which will stretch it.
Try taking it out temporarily.
It is usual to set stretch on a gridsplitter.
Change your other one to:
<GridSplitter Grid.Row="5"
Grid.Column="1"
Height="3"
Background="Green"
ResizeBehavior="PreviousAndNext"
HorizontalAlignment="Stretch"
ResizeDirection="Rows" />
And it will stretch horizontally.
Still won't do much, but it will stretch horizontally.
Dificult to tell what else you want this to do but it is usual to align a gridsplitter with a column or row edge.
See
https://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/how-to-resize-rows-with-a-gridsplitter
https://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/how-to-resize-columns-with-a-gridsplitter
I am working on small wpf application and I can say this is my first wpf application
from the beginning.
I have problem here because I want to glue two labels together (see image below), because when I run app on smaller or bigger monitor they will be too much away from each other, and what I Want to do is to keep them together all the time and verticaly centered, so thats reason why I created grid and why I put stack panel inside, so maybe I could apply verticalalignment = 'center' to stack panel and content would be centered or whatever?
I am not sure is this code ok, so please guys comment it, I want to improve my skills about
WPF, so be free to tell me another solutions or whatever, maybe I wrote too much code or smth?
Anyway, how could I glue up this two labes to keep them near each other all the time and to keep them also centered all the time on different size of monitors.
Thanks a lot guys,
Cheers!
MY 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>
<!-- Definition of my Grid which contains 2 columns and 3 rows. -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3.5*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="65"/>
<RowDefinition Height="*"/>
<RowDefinition Height="0.143*" />
</Grid.RowDefinitions>
<!-- Added this rectangle to colour header of my Grid. -->
<Rectangle Grid.ColumnSpan="3">
<Rectangle.Fill>
<SolidColorBrush Color="#0091EA"></SolidColorBrush>
</Rectangle.Fill>
</Rectangle>
<!-- Added this grid and stackpanel inside this grid to place date and time, but how to glue them together text and value -->
<Grid Grid.Column="1" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Vertical">
<Label x:Name="lblTimeText" Content="Time" Margin="0,0,0,0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" VerticalAlignment="Bottom" />
<Label x:Name="lblTime" Content="labelTime" Grid.Column="0" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Vertical">
<Label Name="lblDateText" Content="Date" Margin="0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
<Label Name="lblDate" Content="labelaDate" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
</StackPanel>
</Grid>
</Grid>
</Window>
CODE BEHIND:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
lblDate.Content = DateTime.Now.Date.ToString("MM/dd/yyyy");
lblTime.Content = DateTime.Now.ToString("HH:mm:ss");
}
}
If you change your Labels to TextBlocks, I think you will get what you are looking for. You will need to change the column definition.
<Window x:Class="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">
<Grid>
<!-- Definition of my Grid which contains 2 columns and 3 rows. -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.75*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="65"/>
<RowDefinition Height="*"/>
<RowDefinition Height="0.143*" />
</Grid.RowDefinitions>
<!-- Added this rectangle to colour header of my Grid. -->
<Rectangle Grid.ColumnSpan="3">
<Rectangle.Fill>
<SolidColorBrush Color="#0091EA"></SolidColorBrush>
</Rectangle.Fill>
</Rectangle>
<!-- Added this grid and stackpanel inside this grid to place date and time, but how to glue them together text and value -->
<Grid Grid.Column="1" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Vertical" VerticalAlignment="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="1" Orientation="Vertical" VerticalAlignment="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>
</Grid>
</Grid>
</Window>
Alternative
If you want to slim down your XAML, this will give the same result. It will also lock the two stack panels to the top right. Replace your Second Grid with this block
<DockPanel Grid.Row="0" Grid.ColumnSpan="2">
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Right" DockPanel.Dock="Right" Margin="5,0">
<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 Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Right" DockPanel.Dock="Right" Margin="5,0">
<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>
</DockPanel>
Add other stackPanel with Orientation="Horizontal"
<StackPanel Grid.Column="0" Orientation="Horizontal" >
<StackPanel Orientation="Vertical">
<Label x:Name="lblTimeText" Content="Time" Margin="0,0,0,0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" VerticalAlignment="Bottom" />
<Label x:Name="lblTime" Content="labelTime" Grid.Column="0" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
</StackPanel>
<StackPanel Orientation="Vertical">
<Label Name="lblDateText" Content="Date" Margin="0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
<Label Name="lblDate" Content="labelaDate" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
</StackPanel>
Other solution:you can use run
<TextBlock Grid.Column="1">
<TextBlock TextWrapping="Wrap" >
<Run x:Name="lblTimeText" />
<Run x:Name="lblTime"/>
</TextBlock>
</TextBlock>
In my List view I use a grid to arrange the controls of list view item
here is the code
<ListView.ItemTemplate>
<DataTemplate>
<Border>
<!--<Label Width="Auto" HorizontalAlignment="Stretch" Height="3" Background="LightGray"></Label>-->
<Grid HorizontalAlignment="Stretch" MinWidth="220" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65*"/>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="25*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" FontWeight="Bold" Text="{Binding Path=Name}"/>
<TextBlock Grid.Row="0" Grid.Column="2" HorizontalAlignment="Right" Text="{Binding PlanDate.DateValue,StringFormat=d}"></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Text="{Binding Owner}"></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="2" HorizontalAlignment="Right" Text="{Binding ForecastDate.DateValue,StringFormat=d}"></TextBlock>
</Grid>
<!--<Label Width="Auto" HorizontalAlignment="Stretch" Height="3" Background="LightGray"></Label>-->
</Border>
</DataTemplate>
</ListView.ItemTemplate>
Here the text blocks in grid coloumn 2 horizontal alignment is set to right .. still the texblocks are not been placed at the right . Am i doing some mistake here? Please advise
Try adding HorizontalContentAlignment="Stretch" to your ListView (the default value is Left and that's why you see it's not stretched).
You can remove HorizontalAlignment="Stretch" MinWidth="220" in your inner Grid.
Ok, I'm using the grid to list various content. How can I get specific colums to resize while others stay fixed.
That is, form pops up with specifc Initial column sizes for the controls... if the user RESIZES the form... i want certain 'memo' like fields to expand. How to do that? i seem to only be able to get ALL 'second' columns to expand in height... not just 1 (last one)... or specific ones.
Thanks for any help!!
Here is the layout... how can i make the 'long' text resizeable with form resize, and keep the button glued to the bottom of the form??? tx
<DockPanel VerticalAlignment="Top">
<Grid DockPanel.Dock="Top" VerticalAlignment="Top" HorizontalAlignment="Stretch" Grid.Column="0" Margin="10,10,10,10" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition MinWidth="150" ></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition MinHeight="80" Height="Auto"></RowDefinition>
<RowDefinition ></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" Content="Test1"/>
<Label Grid.Column="0" Grid.Row="1" Content="Test2 -Long notes"/>
<Label Grid.Column="0" Grid.Row="2" Content="Test3"/>
<TextBox Height="Auto" Grid.Column="1" Grid.Row="0" />
<TextBox Height="Auto" Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" />
<TextBox Height="Auto" Grid.Column="1" Grid.Row="2" />
</Grid>
<StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" HorizontalAlignment="Right" MinHeight="20" Margin=" 0,0,10,10">
<Button Content="OK" Margin="0,0,10,0" Width="75" IsDefault="True"/>
<Button Content="Cancel" Width="75" IsCancel="True" />
</StackPanel>
</DockPanel>
(added after 1st 'answer')
Now, if i remove the bottom stackpanel (Ok, Cancel buttons) out of equation to make this easier and i set the 1st and 2nd rows to a fixed value... i seem to be able to get this working (don't want to have to set a max height though) ... oh and i need to change the verticalAlignment to 'stretch'. But as soon as i add the StackPanel for the buttons again... the stretching no longer works... so here is the next revised version...
<DockPanel VerticalAlignment="Stretch">
<Grid DockPanel.Dock="top" VerticalAlignment="Stretch" Grid.Column="0" Margin="10,10,10,10" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition MinWidth="150" Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="30"></RowDefinition>
<RowDefinition MinHeight="80" Height="*"></RowDefinition>
<RowDefinition MaxHeight="30"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" Content="Test1"/>
<Label Grid.Column="0" Grid.Row="1" Content="Test2 -Long notes"/>
<Label Grid.Column="0" Grid.Row="2" Content="Test3"/>
<TextBox Grid.Column="1" Grid.Row="0" />
<TextBox Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" />
<TextBox Grid.Column="1" Grid.Row="2" />
</Grid>
<StackPanel DockPanel.Dock="Bottom" VerticalAlignment="Bottom" HorizontalAlignment="Right" Orientation="Horizontal" MinHeight="20" Margin=" 0,0,10,10">
<Button Content="OK" Margin="0,0,10,0" Width="75" IsDefault="True"/>
<Button Content="Cancel" Width="75" IsCancel="True" />
</StackPanel>
</DockPanel>
So I'm still having problems...
Use * for the column width instead of Auto, which tells the column to take up whatever space is left after the other columns are set.
If you need multiple columns to share the available space in different percentages, you can prefix the * with a number, as in "2*" and "3*". By default, "" means 1.
HTH,
Berryl
I seem to only be able to solve the problems by incorporting the StackPanel in its own grid row, and column. Here is my solution. Not sure if dock panel is necessary in this case... but without tinkering more ... that's my current solution. If any one can explain to me how to get it working with the stack panel OK, Cancel buttons 'outside' the grid, i'd love to know. Meanwhile, this solution is available for those of you looking into this sort of problem. As you see you need to use Auto in all the other row definitions. * where u want it to expand.
<DockPanel VerticalAlignment="Stretch">
<Grid DockPanel.Dock="top" VerticalAlignment="Stretch" Grid.Column="0" Margin="10,10,10,10" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition MinWidth="150" Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition MinHeight="80" Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" Content="Test1"/>
<Label Grid.Column="0" Grid.Row="1" Content="Test2 -Long notes"/>
<Label Grid.Column="0" Grid.Row="2" Content="Test3"/>
<TextBox Grid.Column="1" Grid.Row="0" />
<TextBox Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" />
<TextBox Grid.Column="1" Grid.Row="2" />
<StackPanel Grid.Column="1" Grid.Row="3" VerticalAlignment="Bottom" HorizontalAlignment="Right" Orientation="Horizontal" MinHeight="20" Margin=" 0,10,0,0">
<Button Content="OK" Margin="0,0,10,0" Width="75" IsDefault="True"/>
<Button Content="Cancel" Width="75" IsCancel="True" />
</StackPanel>
</Grid>
</DockPanel>
If you want to be able to re-size only one of the squares made by the Row and Column Definitions you should add a Grid or whichever container element inside of one the squares. Then you'll make the Grid inside the square re-size accordingly. This way all the Definitions won't re-size, instead the grid and it's elements inside will re-size and thus not changing the other elements. It's not common but you can have as many stack panels and grids and set their visibility when needed. Sometimes when something doesn't work stick them inside something else and experiment with it. You might just get it by accident, but you'll still get it.
I have a WPF form where I'm trying to make a simple input form. Two labels, two textboxes, and a "submit" button. I have the layout pretty good, the only thing that I can't get is for my "Labels" to be right aligned inside their cells. I have tried both TextAlign="Right" and HorizontialAlign="Right", that moves the text ALL the way over, overlaying my textbox, not just moving inside the cell. Below is the XAML for the window.
<Window x:Class="MyWebKeepAliveDesktop.Login"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MyWebKeepAlive Desktop - Login" WindowStyle="None" AllowsTransparency="true" Height="200" Width="400" >
<Border Background="#50FFFFFF" CornerRadius="7" BorderBrush="{StaticResource WindowFrameBrush}" BorderThickness="2,0,2,2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition/>
</Grid.RowDefinitions>
<Border Background="{StaticResource WindowFrameBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
CornerRadius="5,5,0,0" Margin="-1,0,-1,0" MouseLeftButtonDown="DragWindow">
<Grid>
<TextBlock Foreground="White" FontWeight="Bold" VerticalAlignment="Center" Margin="10,2,10,2"
Text="MyWebKeepAlive Desktop Login"/>
<Button Content="X" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="5" FontSize="7"
Width="15" Height="15" Padding="0" Command="ApplicationCommands.Close"/>
</Grid>
</Border>
<Grid Grid.Row="1" Width="350" Height="130" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="10" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<TextBlock TextAlignment="center" Text="Please provide your username/password that is used on the MyWebKeepAlive.com site to login." TextWrapping="Wrap" Grid.Row="0" Grid.ColumnSpan="2" />
<TextBlock Text="Username" FontWeight="Bold" Grid.Row="1" Grid.Column="0"/>
<TextBox Name="txtUsername" Width="150" Grid.Row="1" Grid.Column="1" />
<TextBlock Text="Password" FontWeight="Bold" Grid.Row="2" />
<TextBox Name="txtPassword" Width="150" Grid.Row="2" />
<Button Name="btnLogin" Grid.Row="4" Grid.ColumnSpan="2">
<TextBlock Text="Login" />
</Button>
</Grid>
</Grid>
</Border>
</Window>
Your grid only has one column as written. It will need two to support your setting of Grid.Column=1 for the text boxes. Thus, you need to add a <ColumnDefinitions> block. With the XAML the way it is now, WPF just throws both controls into the same column, hence the behavior you are seeing.
Here's what I came up with. Just learning WPF myself. As PeterAllenWebb mentioned, your main issue is you are missing the ColumnDefinitions. I also added the TextAlignment="Right" attributes to the two TextBlocks.
<Grid Grid.Row="1" Width="350" Height="130" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="10" />
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock TextAlignment="center" Text="Please provide your username/password that is used on the MyWebKeepAlive.com site to login." TextWrapping="Wrap" Grid.Row="0" Grid.ColumnSpan="2" />
<TextBlock Text="Username" TextAlignment="Right" FontWeight="Bold" Grid.Row="1" Grid.Column="0"/>
<TextBox Name="txtUsername" Width="150" Grid.Row="1" Grid.Column="1" />
<TextBlock Text="Password" TextAlignment="Right" FontWeight="Bold" Grid.Row="2" />
<TextBox Name="txtPassword" Width="150" Grid.Row="2" Grid.Column="1"/>
<Button Name="btnLogin" Grid.Row="4" Grid.ColumnSpan="2">
<TextBlock Text="Login" />
</Button>
</Grid>