I am trying to get this Grid control to fill to the width of the parent container. I saw several references the HorizontialAlignment set to Stretch should work but for me it does nothing. The Grid is sized only to the Width of my largest textblock. I have tried setting the Width to 'auto' and nothing there either.
<UniformGrid Rows="1" Columns="1" Height="75" Background="{StaticResource SteelBrush_Vert}" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Grid.Row="0">
<Viewbox Width="auto">
<Grid HorizontalAlignment="Stretch" Width="auto">
<Grid.RowDefinitions>
<RowDefinition Height="7*"/>
<RowDefinition Height="18*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="AppGreeting" Text="Good Morning, User" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,5,0,4.6" FontWeight="Bold" Grid.RowSpan="2"/>
<TextBlock x:Name="WindowName" Text="Home" HorizontalAlignment="Right" Margin="0,5,4.6,4.6" Grid.RowSpan="2"/>
</Grid>
</Viewbox>
</UniformGrid>
Use the Stretch="Fill" property in your Viewbox
<Viewbox Width="auto" Stretch="Fill">
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="7*"/>
<RowDefinition Height="18*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="AppGreeting" Text="Good Morning, User" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,5,0,4.6" FontWeight="Bold" Grid.RowSpan="2"/>
<TextBlock x:Name="WindowName" Text="Home" HorizontalAlignment="Right" Margin="0,5,4.6,4.6" Grid.RowSpan="2"/>
</Grid>
</Viewbox>
Related
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button
VerticalContentAlignment="Stretch"
Margin="0,0,100,0"
Grid.RowSpan="3"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Height="80" Width="30"
Background="blue">
<!--<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>[![enter image description here][1]][1]
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Button
x:Name="Add"
Width="25"
Height="25"
Grid.Row="2"
Margin="3,1,3,0"
Padding="0"/>
</Grid>-->
</Button>
<Grid
Margin="0,0,0,100"
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="3"
VerticalAlignment="Bottom"
HorizontalAlignment="Center"
Width="50" Height="25"
Background="Red">
<Button
x:Name="Add1"
Width="20"
Height="20"
Margin="3,1,3,0"
Padding="0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
VerticalContentAlignment="Center"/>
<Button
x:Name="Remove1"
Width="20"
Height="20"
HorizontalAlignment="Right"
VerticalAlignment="Top"
VerticalContentAlignment="Center"/>
</Grid>
<Grid
Grid.Row="0"
Grid.Column="1"
Grid.RowSpan="3"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="100"
Height="50"
Background="Green">
<!--<Button
x:Name="Add2"
Width="20"
Height="20"
Margin="3,1,3,0"
Padding="0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
VerticalContentAlignment="Center"/>
<Button
x:Name="Remove2"
Width="20"
Height="20"
Margin="3,1,3,0"
Padding="0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
VerticalContentAlignment="Center" />-->
</Grid>
<!--Element #-->
<Grid Margin="0,0,0,100"
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="3"
VerticalAlignment="Bottom"
HorizontalAlignment="Center"
Width="100" Height="25"
Background="Red">
<!--<Button
Name="myButton"
IsEnabled="False"
Background="#C0C0C0"
BorderThickness="2"
Width="25"
Height="25"/>-->
</Grid>
</Grid>
Is there any possibility to keep all the elements center and stretched to the right when maximize? Every container from Grid can have 3 or 4 children's. Children's can be any container as long as all elements are stretching to right and down but maintained center position.
I attached also the result. All elements are centered but the stretching is missing.
What kind of container is suitable for this situations?
Yes, as o_w mentioned in the comment, a good solution is to use Border. Where you use your child Grids, encapsulate them in a Border and set the Background-property on the Border instead of the Grid. You will see that you will achieve way faster what you want.
The problem you describe is actually something I also struggled with in the beginning, and that's when I found that not only Grid, but the combination of Grid and Borders (with a Grid encapsulated in it) is even more powerful than Grid alone.
How can i make Scroll in the Items resides in the Canvas.There is listbox inside the canvas which contains DataTemplate with the control image and textblock and I am using the following code but it was not worked.
<ScrollViewer x:Name="scvImages" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Margin="0" Grid.Row="1"
HorizontalContentAlignment="Stretch" Height="Auto" Width="Auto">
<Canvas x:Name="canvas" Grid.Row="1" Visibility="Visible" Background="Black" Opacity="0.7" Grid.RowSpan="2">
<ListBox x:Name="lstcountry" Margin="0,50,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="content" Height="70" Width="480">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image x:Name="img" Source="{Binding Path=img}" Grid.Row="0" Grid.Column="0" Margin="20,0,0,0" Height="70" Width="150"></Image>
<TextBlock x:Name="countryname" Text="{Binding Path=short_name}" Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" Height="70" Padding="0,15,0,0" Margin="15,0,0,0" FontSize="32" FontFamily="The Times of Roman"></TextBlock>
<Border x:Name="brd1" BorderBrush="White" BorderThickness="0,2,0,2" Grid.ColumnSpan="2" ></Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Canvas>
</ScrollViewer>
First thing to enable scrolling in scrollviewer change height Auto to some definite height
<ListBox x:Name="lstcountry" Margin="0,0,0,0" Height="300">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="content" Height="70" Width="480">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image x:Name="img" Source="{Binding Path=img}" Grid.Row="0" Grid.Column="0" Margin="20,0,0,0" Height="70" Width="150"></Image>
<TextBlock x:Name="countryname" Text="{Binding Path=short_name}" Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" Height="70" Padding="0,15,0,0" Margin="15,0,0,0" FontSize="32" FontFamily="The Times of Roman"></TextBlock>
<Border x:Name="brd1" BorderBrush="White" BorderThickness="0,2,0,2" Grid.ColumnSpan="2" ></Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Canvas>
</ScrollViewer>
But i suggest you to remove scrollviewer and canvas control from your layout. because both are usefulness. If i guess right you need scrolling in your ListBox control and The Listbox control has it's own scroll implementation. You should remove height property from listbox if you define height of grid's 1st row like
<RowDefination Height="*"/>
or
<RowDefination Height="400"/>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="content" Height="70" Width="480">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image x:Name="img" Source="{Binding Path=img}" Grid.Row="0" Grid.Column="0" Margin="20,0,0,0" Height="70" Width="150"></Image>
<TextBlock x:Name="countryname" Text="{Binding Path=short_name}" Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" Height="70" Padding="0,15,0,0" Margin="15,0,0,0" FontSize="32" FontFamily="The Times of Roman"></TextBlock>
<Border x:Name="brd1" BorderBrush="White" BorderThickness="0,2,0,2" Grid.ColumnSpan="2" ></Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Don't use Auto for ScrollViewer. Auto stretches the ScrollViewer same size as canvas. You need to set fixed height so content can be scrolled within it.
The list box control has it's own scroll implementation. Unless you are going to have other elements along side the list box, I would remove the scroll viewer and canvas elements.
I have a ScrollViewer, inside of which is some content. The problem is that the scroll doesn't work properly. When you scroll the content with your finger and then release, the scrollable area always snaps back to the top. It just bounces like elastic, and won't stay at the bottom where you scrolled it to.
<Grid Name="DetailPane" Margin="0,0,0,65" VerticalAlignment="Bottom" Visibility="Collapsed" Background="White" Opacity="0.85">
<StackPanel>
<Grid VerticalAlignment="Top">
<Button Margin="0" Padding="0" Click="CloseDetailPanel" HorizontalAlignment="Right" >
<Button.Content>
<Image Source="images\appbar.close.rest.small.png" Width="20" Height="20"></Image>
</Button.Content>
</Button>
</Grid>
<ScrollViewer x:Name="contentScrollViewer" VerticalAlignment="Top">
<Grid>
<StackPanel>
<TextBlock Padding="10,0,10,0" HorizontalAlignment="Left" Name="titleTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" FontWeight="Bold" />
<Image x:Name="contentThumbnail" Source="bild.jpg" Visibility="Visible" Width="400" Height="300" Margin="10" />
<TextBlock Padding="10" HorizontalAlignment="Left" Name="statusTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" />
<HyperlinkButton Padding="0,5,0,10" x:Name="WikipeadiaLink" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="More on Wikipedia" TargetName="_blank" NavigateUri="" Foreground="Blue" FontSize="18" />
</StackPanel>
</Grid>
</ScrollViewer>
</StackPanel>
</Grid>
I've actually had a similar problem before, which I managed to solve with help from Stack Overflow... and yet, here I am again, asking for help on the same topic...
thanks heaps!
UPDATE:
Based on suggestions, I removed the StackPanels and replaced them with Grids. The formatting is perfect, but I still have the same scroll problem! The content still snaps back to the beginning!
<Grid Name="DetailPane" Margin="0,0,0,65" VerticalAlignment="Bottom" Visibility="Collapsed" Background="White" Opacity="0.85">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Margin="0" Padding="0" Click="CloseDetailPanel" HorizontalAlignment="Right" >
<Button.Content>
<Image Source="images\appbar.close.rest.small.png" Width="20" Height="20"></Image>
</Button.Content>
</Button>
</Grid>
<Grid Grid.Row="1">
<ScrollViewer x:Name="contentScrollViewer" VerticalAlignment="Top">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Padding="10,0,10,0" HorizontalAlignment="Left" Name="titleTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" FontWeight="Bold" />
<Image x:Name="contentThumbnail" Grid.Row="1" Source="bild.jpg" Visibility="Visible" Width="400" Height="300" Margin="10" />
<TextBlock Grid.Row="2" Padding="10" HorizontalAlignment="Left" Name="statusTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" />
<HyperlinkButton Grid.Row="3" Padding="0,5,0,10" x:Name="WikipeadiaLink" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="More on Wikipedia" TargetName="_blank" NavigateUri="" Foreground="Blue" FontSize="18" />
</Grid>
</ScrollViewer>
</Grid>
</Grid>
Its because of the stackPanel, try replacing it with something else like Grid.
Try this, I removed a redundant grid and added stretched alignment for the scroll viewer:
<Grid Name="DetailPane" Margin="0,0,0,65" VerticalAlignment="Bottom" Visibility="Collapsed" Background="White" Opacity="0.85">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Click="CloseDetailPanel" HorizontalAlignment="Right" VerticalAlignment="Top">
<Button.Content>
<Image Source="images\appbar.close.rest.small.png" Width="20" Height="20"></Image>
</Button.Content>
</Button>
<ScrollViewer x:Name="contentScrollViewer" VerticalAlignment="Stretch" Grid.Row="1"HorizontalAlignment="Stretch">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Padding="10,0,10,0" HorizontalAlignment="Left" Name="titleTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" FontWeight="Bold" />
<Image x:Name="contentThumbnail" Grid.Row="1" Source="bild.jpg" Visibility="Visible" Width="400" Height="300" Margin="10" />
<TextBlock Grid.Row="2" Padding="10" HorizontalAlignment="Left" Name="statusTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" />
<HyperlinkButton Grid.Row="3" Padding="0,5,0,10" x:Name="WikipeadiaLink" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="More on Wikipedia" TargetName="_blank" NavigateUri="" Foreground="Blue" FontSize="18" />
</Grid>
</ScrollViewer>
</Grid>
What solved this, in the end, was adding a static height to the ScrollViewer. I realise noone could have seen this as I omitted the part of the code that shows that this is inside a PivotItem.
According to this discussion: http://forums.create.msdn.com/forums/t/84933.aspx a ScrollViewer stops working properly when it is inside a Pivot, unless it has a static height defined.
Infuriating!
How to convert stackpanel to grid?
<DataTemplate >
<Grid Margin="0,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image delay:LowProfileImageLoader.UriSource="{Binding image_uri}" Width="50" Height="50" VerticalAlignment="Top" Stretch="None" />
<StackPanel Grid.Column="1" >
<Line Stroke="#4284B0" StrokeDashArray="4 2" X2="380"/>
<TextBlock Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Margin="{StaticResource PhoneHorizontalMargin}" MinHeight="20" Text="{Binding author_name}">
<TextBlock.Foreground>
<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
</TextBlock.Foreground>
</TextBlock>
<TextBlock Text="{Binding text}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Margin="{StaticResource PhoneHorizontalMargin}" MinHeight="40" MaxHeight="180"/>
<TextBlock Text="{Binding Date_Time}" Style="{StaticResource PhoneTextSmallStyle}" Margin="{StaticResource PhoneHorizontalMargin}" Height="20" HorizontalAlignment="Left" Width="133"/>
<TextBlock Text="{Binding likes_count}" Style="{StaticResource PhoneTextSmallStyle}" Margin="181,-20,0,0" Height="20" Width="77" HorizontalAlignment="Left"/>
<TextBlock Text="{Binding comm_count}" Style="{StaticResource PhoneTextSmallStyle}" Margin="289,-20,0,0" Height="20" Width="77" HorizontalAlignment="Left"/>
<Image Height="21" Margin="154,-19,0,0" Source="/Images/like.png" HorizontalAlignment="Left" Width="20"/>
<Image Source="/Images/ico_comments.png" Stretch="Fill" HorizontalAlignment="Left" Width="21" Margin="264,-19,0,0" />
</StackPanel>
</Grid>
</DataTemplate>
I don't know how to do this.I tried :
<Grid Grid.RowSpan="5" Margin="5,0,0,0" VerticalAlignment="Top" Width="380" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Line Grid.RowSpan="0"
But my content look like it cobbled together in a bunch.Please help me.
I want to convert because I need to improve performance.
Considering you're using TextWrapping, and by that seems to require a dynamic height, using a Grid wouldn't do much different from using a stackpanel.
And if you can't figure out how to use a Grid, I'll recommend you read a tutorial, and perhaps install Expression Blend.
This isn't quite the right place to post some code, and expect people to convert it for you.
I'm assuming you want everything that was in the StackPanel to now be in a Grid.
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<!--Add as many row definitions as you need-->
</Grid.RowDefinitions>
<Line Grid.Row="0" />
<TextBlock Grid.Row="1" />
<!-- The rest of your TextBlocks, Images etc. add a row number for each-->
</Grid>
<Grid x:Name="LayoutRoot" Background="Aqua" Margin="20" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Ellipse Fill="Red" Stroke="Black" MinWidth="75" MinHeight="75" Grid.Row="0" Stretch="Uniform"/>
<Ellipse Fill="#FF57F61F" Stroke="Black" MinWidth="75" MinHeight="75" Grid.Row="1"/>
<Ellipse Fill="#FF3D13F0" Stroke="Black" Width="75" Height="75" Grid.Row="2"/>
</Grid>
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>