XAML set datagrid to top 90% of grid, buttons to bottom 10 % all in a tabitem - xaml

I have a TabItem which I want to display a DataGrid (MahApps.Metro) in the upper 90% of it and 2 buttons I want to display at the bottom 10% of it. This works when the window is fully enlarged, but when it is not, the scrollviewer is not visible and the controls and elements go off screen. Please help, I've been stuck for hours! Here is my code so far:
<TabItem Header="Queue" FontSize="15">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="9*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="77*"/>
<ColumnDefinition Width="24*"/>
</Grid.ColumnDefinitions>
<DataGrid x:Name="songdatagrid" VerticalAlignment="Stretch" ItemsSource="{Binding SongInfo}" VerticalScrollBarVisibility="Auto" AutoGenerateColumns="False" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" >
<DataGrid.Columns >
<DataGridTemplateColumn x:Name="songinfocolumn" Header="Song Info" Width=".6*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding songInfo.Text}" Uid="{Binding SongInfo.Uid}" ToolTipService.ToolTip="Double click to open song in Youtube." MouseLeftButtonDown="tb_MouseLeftButtonDown5" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn x:Name="requestercolumn" Header="Requester" Width=".18*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding songReq.Text}" Uid="{Binding songReq.Uid}" ToolTipService.ToolTip="Double click to open requester's Twitch page." MouseLeftButtonDown="tb_MouseLeftButtonDown6" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn x:Name="moveupcolumn" Header="Move Up" Width=".12*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Width="35" Height="35" Uid="{Binding moveUp.Uid}" Style="{DynamicResource MetroCircleButtonStyle}" Click="moveup" ToolTipService.ToolTip="Click to move this song up in the list.">
<Rectangle Width="20" Height="20" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_arrow_up}" />
</Rectangle.OpacityMask>
</Rectangle>
</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn x:Name="deletecolumn" Header="Remove" Width=".12*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Width="35" Height="35" Uid="{Binding delete.Uid}" Style="{DynamicResource MetroCircleButtonStyle}" Click="deleteSong" ToolTipService.ToolTip="Click to remove song from the list.">
<Rectangle Width="20" Height="20" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_delete}" />
</Rectangle.OpacityMask>
</Rectangle>
</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
<Button Style="{DynamicResource SquareButtonStyle}" x:Name="refresh" IsDefault="True" Background="White" Content="Refresh" Click="Button_Click" FontSize="16" Grid.Column="0" Grid.Row="1"/>
<Button Style="{DynamicResource SquareButtonStyle}" x:Name="clear" IsDefault="True" Background="White" Content="Clear List" Click="clearlist" FontSize="16" Grid.Column="1" Grid.Row="1"/>
</Grid>
</TabItem>
I had to add this to the top to get the Metro horizontal scrollbar working on the tabholder. Other than this, there are just more tabitems.
<TabControl x:Name="tabholder" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="LightBlue"
SelectionChanged="TabControl_SelectionChanged" >
<TabControl.Template>
<ControlTemplate TargetType="TabControl">
<StackPanel>
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
<TabPanel x:Name="HeaderPanel"
Panel.ZIndex ="1"
KeyboardNavigation.TabIndex="1"
Grid.Column="0"
Grid.Row="0"
IsItemsHost="true"/>
</ScrollViewer>
<ContentPresenter x:Name="PART_SelectedContentHost"
ContentSource="SelectedContent"/>
</StackPanel>
</ControlTemplate>
</TabControl.Template>

The StackPanel and the other Grid panels you have in there are redundant and causing your issues. Also your fixed Width & Height in templates that have their own set size attributes for things like Height are going to give unwanted results. You should only need something like this to accomplish your goal.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="9*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<DataGrid Grid.ColumnSpan="2">...</DataGrid>
<Button Grid.Row="1" Content="Button 1"/>
<Button Grid.Row="1" Grid.Column="1" Content="Button 2"/>
</Grid>
Cheers!

The StackPanel was causing the issues, everything works now! :D

Related

Controls going outside of window

I'm attempting to make a "information" page, but when I get to a finished product this happens:
Video of application
So as you can see the poster of the movie and the description is fine to start with, but when the user attempts to use a different size than default it doesn't resize so the the user can see the same information.
Code:
<Grid>
<Image
Name="Backdrop"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="UniformToFill" />
<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">
<StackPanel Margin="80">
<StackPanel Orientation="Horizontal">
<Button Click="ButtonBase_OnClick" Style="{StaticResource MaterialDesignRaisedLightButton}">
<SymbolIcon Symbol="Back" />
</Button>
<TextBlock
Margin="20,0,0,0"
VerticalAlignment="Center"
Style="{StaticResource TitleTextBlockStyle}"
Text="{x:Bind Movie.Title}" />
</StackPanel>
<Border
Margin="0,10,0,10"
VerticalAlignment="Bottom"
BorderBrush="Gray"
BorderThickness="1"
Style="{StaticResource DownwardDropShadow}" />
<StackPanel
HorizontalAlignment="Center"
VerticalAlignment="Center"
Orientation="Horizontal">
<StackPanel>
<Grid>
<Image
Name="Poster"
MinWidth="200"
MaxWidth="500"
Margin="10" />
<Button
Width="100"
Height="100"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="{ThemeResource SystemControlAcrylicElementBrush}"
CornerRadius="100">
<Viewbox MaxWidth="60" MaxHeight="60">
<SymbolIcon Foreground="Gray" Symbol="Play" />
</Viewbox>
</Button>
</Grid>
</StackPanel>
<StackPanel
MinWidth="300"
MaxWidth="600"
Padding="20">
<TextBlock Style="{StaticResource PageTitleStyle}" Text="Information" />
<Border
Margin="0,10,0,10"
VerticalAlignment="Bottom"
BorderBrush="Gray"
BorderThickness="1"
Style="{StaticResource DownwardDropShadow}" />
<TextBlock
Style="{StaticResource BodyTextStyle}"
Text="{x:Bind Movie.Overview}"
TextWrapping="WrapWholeWords" />
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
So in short, how do I keep the design, but make is so when the window changes size the image & text resizes to stay inside the window and stay visible.
Controls going outside of window
The problem is that when set root panel as StackPanel , the size of children element will be fixed. And it will not change as the window size changes. For solve the this, you could try to use Grid to replace. Please refer the following xaml layout.
<Grid>
<Image
Name="Backdrop"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="Assets/hello.jpg"
Stretch="UniformToFill"
/>
<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">
<Grid Margin="80" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="9*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Button Click="ButtonBase_OnClick">
<SymbolIcon Symbol="Back" />
</Button>
<TextBlock
Margin="20,0,0,0"
VerticalAlignment="Center"
Style="{StaticResource TitleTextBlockStyle}"
Text="Grid Test Page"
/>
</StackPanel>
<Border
Margin="0,10,0,10"
VerticalAlignment="Bottom"
BorderBrush="Gray"
BorderThickness="1"
/>
<Grid
Grid.Row="1"
Margin="0,20,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Top"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid>
<Image
Name="Poster"
MinWidth="200"
MaxWidth="500"
Margin="10"
Source="Assets/hello.jpg"
/>
<Button
Width="100"
Height="100"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="{ThemeResource SystemControlAcrylicElementBrush}"
CornerRadius="100"
>
<Viewbox MaxWidth="60" MaxHeight="60">
<SymbolIcon Foreground="Gray" Symbol="Play" />
</Viewbox>
</Button>
</Grid>
<StackPanel
Grid.Column="1"
MinWidth="300"
MaxWidth="600"
Padding="20"
>
<TextBlock Text="Information" />
<Border
Margin="0,10,0,10"
VerticalAlignment="Bottom"
BorderBrush="Gray"
BorderThickness="1"
/>
<TextBlock Text="Defines a flexible grid area that consists of columns and rows. Child elements of the Grid are measured and arranged according to their row/column assignments (set by using Grid.Row and Grid.Column attached properties) and other logic." TextWrapping="WrapWholeWords" />
</StackPanel>
</Grid>
</Grid>
</Grid>
</Grid>

Button Flyout has a border I can't remove

I have a button with a flyout and for some reason I can't remove the border, white, around the black grid. Any suggestions?
Picture of output
Xaml Implementation
<Button Foreground="Transparent" HorizontalAlignment="Right" Width="30" Height="30" Margin="0,0,15,5">
<Button.Background>
<ImageBrush ImageSource="ms-appx:///Assets/ButtonImage.png" />
</Button.Background>
<Button.Flyout>
<Flyout Placement="Top" >
<Grid Width="300" Height="auto" Margin="0,0,0,0" Background="Black" BorderThickness="3" BorderBrush="blue" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Height="50" Grid.Row="0" Background="Black" BorderBrush="Black">
<TextBlock x:Name="SSMenuAppVersionText" Text="123" FontSize="15" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid x:Name="AppSuggestionGrid" Grid.Row="1" Background="Black" BorderBrush="Black">
<Button x:Name="AppSuggestionButton" Click="FeedBackButtonClicked" Background="Transparent" Height="50" HorizontalAlignment="Stretch">
<TextBlock x:Name="SSMenuAppSuggesstionText" Text="App Suggestions" Foreground="#007AFF" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Button>
</Grid>
<Grid Grid.Row="2" BorderBrush="Black" Background="Black">
<Button x:Name="ReferButton" Click="ReferButtonClicked" Background="Black" Height="50" HorizontalAlignment="Stretch">
<TextBlock x:Name="SSMenuReferText" Text="Refer " Foreground="#007AFF" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Button>
</Grid>
<Grid Grid.Row="3" BorderBrush="Black" Background="Black">
<Button x:Name="VisitButton" Click="VisitButtonClicked" Background="Black" Height="50" HorizontalAlignment="Stretch">
<TextBlock x:Name="SSMenuVisitText" Text="Visit " Foreground="#007AFF" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Button>
</Grid>
</Grid>
</Flyout>
</Button.Flyout>
</Button>
You have options. If we go look at the guts of the Flyout Style Template we notice some set theme resources for Padding and Border which you can use to either override the properties, or just create your own Style template for Flyout and make them whatever you like.
So for example if you went and tossed something like this into your resource dictionary, you should override the ThemeResource for the app.
<Thickness x:Key="FlyoutContentThemePadding">0,0,0,0</Thickness>
<Thickness x:Key="FlyoutBorderThemeThickness">0</Thickness>
Hope this helps, cheers!

UWP XAML Grid Resizes Unevenly With Equal Column Widths

I'm writing a UWP app and have a page with a full-page grid inside a scrollviewer with two even-width outer columns and two even-width inner columns. The right side of the page is a mirror of the left, and everything is aligned to the similar column on the opposite side. However, when I run my app and decrease the width, after a certain point only the third column shrinks. Before that point, all the columns adjust correctly. I don't have any width or minwidth properties set. If I set a fixed width on my grid, the columns resize to be even. I've tried changing which columns my elements are aligned to on various elements, removing the ScrollViewer, and double- and triple-checking for any min-widths being set anywhere.
<ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid MinWidth="800" Background="{ThemeResource SystemControlBackgroundAccentBrush}" ManipulationMode="All">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="69*"/>
<ColumnDefinition Width="76*"/>
<ColumnDefinition Width="76*"/>
<ColumnDefinition Width="69*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="27*"/>
<RowDefinition Height="62*"/>
<RowDefinition Height="27*"/>
<RowDefinition Height="399*"/>
<RowDefinition Height="340*"/>
<RowDefinition Height="105*"/>
</Grid.RowDefinitions>
<Viewbox Margin="100,27,89.667,0" Grid.RowSpan="3" Height="63" VerticalAlignment="Top" Stretch="Uniform">
<RichTextBlock Foreground="White">
<Paragraph>
<Run Text="Home" FontSize="48" FontWeight="Bold" FontStretch="Normal"/>
</Paragraph>
</RichTextBlock>
</Viewbox>
<Viewbox Margin="90,27,100,0" Grid.RowSpan="3" Grid.Column="3" Height="63" VerticalAlignment="Top">
<RichTextBlock Foreground="White">
<Paragraph>
<Run Text="Away" FontSize="48" FontWeight="Bold"/>
</Paragraph>
</RichTextBlock>
</Viewbox>
<Rectangle Fill="White" Margin="0,0,-1,0" Stroke="#FF252525" Grid.RowSpan="6" HorizontalAlignment="Right" Width="2" Grid.Column="1"/>
<Button x:Name="HomeGoalBtn" Margin="320,0,0.667,0.667" Grid.Row="3" Click="button_Click" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.ColumnSpan="2">
<RichTextBlock IsTextSelectionEnabled="False">
<Paragraph>
<Run Text="Goal" FontSize="48" Foreground="White" />
</Paragraph>
</RichTextBlock>
</Button>
<Button x:Name="AwayGoalBtn" HorizontalAlignment="Stretch" Margin="0.333,0,320,0.667" Grid.Row="3" VerticalAlignment="Stretch" Click="button_Click" Grid.ColumnSpan="2" Grid.Column="2">
<RichTextBlock IsTextSelectionEnabled="False">
<Paragraph>
<Run Text="Goal" FontSize="48" Foreground="White" />
</Paragraph>
</RichTextBlock>
</Button>
<Button x:Name="AwayShotBtn" Content="Button" HorizontalAlignment="Stretch" Margin="0.333,24.333,25,15" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="2"/>
<Button x:Name="AwayPenaltyBtn" Content="Button" HorizontalAlignment="Stretch" Margin="30,104.333,112,15" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="3"/>
<RichTextBlock Margin="10,10,0,0.667" Grid.Row="3" HorizontalAlignment="Left" Width="310">
<Paragraph TextAlignment="Center">
<Run Text="{x:Bind ViewModel.HomeScore, Mode=OneWay}" FontSize="200"/>
</Paragraph>
</RichTextBlock>
<RichTextBlock Margin="0,0,0,0.667" Grid.Row="3" Grid.Column="3" HorizontalAlignment="Right" Width="320">
<Paragraph TextAlignment="Center">
<Run Text="{x:Bind ViewModel.AwayScore, Mode=OneWay}" FontSize="200"/>
</Paragraph>
</RichTextBlock>
<Button x:Name="HomeShotBtn" Content="Button" HorizontalAlignment="Stretch" Margin="30.333,24.667,0,14.333" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="1" />
<Button x:Name="HomePenaltyBtn" Content="Button" HorizontalAlignment="Stretch" Margin="102,104.333,24.667,15" Grid.Row="4" VerticalAlignment="Stretch"/>
<Button x:Name="MenuBtn" Content="Button" Grid.Column="1" HorizontalAlignment="Left" Margin="30.333,20.167,0,8" Grid.Row="5" VerticalAlignment="Stretch" Width="250" Click="button3_Click"/>
</Grid>
</ScrollViewer>
This is how my page looks in the designer:
OK... it appears to me that the layout is overconstrained - likely due to a lot of Blend arranging (a lot of crazy margins in there). If you want predictable layouts, I would recommend positioning the controls within the bounds of the grid sections that you expect to see them rather than trying to use margins to position them. Basically, which grid section do you want the element (Grid.Row=# Grid.Column=#), how many sections does it span (Grid.RowSpan=# Grid.ColumnSpan=#), which edges to align to (HorizontalAlignment=Left/Right/Center/Stretch VerticalAlignment=Left/Right/Center/Stretch), and how much space do you want from the edges (Margin=# # # #)?
So,
<Viewbox Margin="100,27,89.667,0" Grid.RowSpan="3" Height="63" VerticalAlignment="Top" Stretch="Uniform">
<RichTextBlock Foreground="White">
<Paragraph>
<Run Text="Home" FontSize="48" FontWeight="Bold" FontStretch="Normal"/>
</Paragraph>
</RichTextBlock>
</Viewbox>
Becomes,
<Viewbox >
<TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Viewbox>
Additionally, I'm not sure you need the viewboxes, richtextboxes, and paragraphs with runs for what you are doing, but I do not know the entire scope of what you're trying to accomplish.
Try something like the following:
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" >
<Grid MinWidth="800" MinHeight="600" Background="{ThemeResource SystemControlBackgroundAccentBrush}" ManipulationMode="All">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="69*"/>
<ColumnDefinition Width="76*"/>
<ColumnDefinition Width="76*"/>
<ColumnDefinition Width="69*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="27*"/>
<RowDefinition Height="62*"/>
<RowDefinition Height="27*"/>
<RowDefinition Height="399*"/>
<RowDefinition Height="340*"/>
<RowDefinition Height="105*"/>
</Grid.RowDefinitions>
<Viewbox >
<TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Viewbox>
<Viewbox Grid.Column="3">
<TextBlock Text="Away" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Viewbox>
<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="3" Grid.Column="1" >
<TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Button>
<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="3" Grid.Column="2" >
<TextBlock Text="Away" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Button>
<Button x:Name="HomeShotBtn" Content="Button" Margin="15" HorizontalAlignment="Stretch" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="1"/>
<Button x:Name="HomePenaltyBtn" Content="Button" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="15" Grid.Row="4" Grid.Column="0"/>
<Button x:Name="AwayShotBtn" Content="Button" Margin="15" HorizontalAlignment="Stretch" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="2"/>
<Button x:Name="AwayPenaltyBtn" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="15" Grid.Row="4" Grid.Column="3"/>
<TextBlock Text="24" Grid.Row="3" FontSize="200" HorizontalAlignment="Left" VerticalAlignment="Center" />
<TextBlock Text="12" Grid.Row="3" Grid.Column="3" FontSize="200" HorizontalAlignment="Right" VerticalAlignment="Center" />
<Button x:Name="MenuBtn" Content="Button" Grid.Column="1" HorizontalAlignment="Stretch" Margin="15" Grid.Row="5" VerticalAlignment="Stretch" />
</Grid>
</ScrollViewer>

QT spacer equivalent in WPF

I have a StackPanel with some vertically alligned controls (stackpanel on the right in this picture:
The last control should always be placed at the bottom of the window inside of the border control (The OK button on the picture). In QT I'd insert a spacer control to push the button down. How do I do that in WPF? Thank you. Here is the xaml:
<Window x:Class="Test.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>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="354*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border Margin="5" Background="Gray" CornerRadius="6" BorderBrush="Gray">
<Viewport3D Grid.Column="0" Name="viewport" ClipToBounds="True">
</Viewport3D>
</Border>
<Border Grid.Column="1" CornerRadius="6" BorderBrush="Gray" Background="LightGray" BorderThickness="1" Margin="5" HorizontalAlignment="Left" Name="border1" VerticalAlignment="Stretch" >
<StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="Dimension" Name="label1" VerticalAlignment="Center" />
<ComboBox Text="3D" HorizontalAlignment="Right" Name="dimensioncb" VerticalAlignment="Center" IsReadOnly="True" IsEditable="True">
<ComboBoxItem>2D</ComboBoxItem>
<ComboBoxItem>3D</ComboBoxItem>
</ComboBox>
</StackPanel>
<Separator/>
<DockPanel>
<Label Content="Iteration" Name="label2" VerticalAlignment="Center" />
<ComboBox Text="3" HorizontalAlignment="Right" Name="iterationcb" VerticalAlignment="Center" IsReadOnly="True" IsEditable="True">
<ComboBoxItem>1</ComboBoxItem>
<ComboBoxItem>2</ComboBoxItem>
<ComboBoxItem>3</ComboBoxItem>
<ComboBoxItem>4</ComboBoxItem>
<ComboBoxItem>5</ComboBoxItem>
<ComboBoxItem>6</ComboBoxItem>
<ComboBoxItem>7</ComboBoxItem>
<ComboBoxItem>8</ComboBoxItem>
</ComboBox>
</DockPanel>
<Button Content="OK" VerticalAlignment="Bottom"/>
</StackPanel>
</Border>
</Grid>
</Window>
There are a bunch of ways that you can accomplish this in WPF. Shown below is one:
<Border Grid.Column="1" CornerRadius="6" BorderBrush="Gray" Background="LightGray" BorderThickness="1" Margin="5" HorizontalAlignment="Left" Name="border1" VerticalAlignment="Stretch" >
<!--Add a grid control to separate your stackpanel and button-->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<StackPanel Orientation="Horizontal">
<Label Content="Dimension" Name="label1" VerticalAlignment="Center" />
<ComboBox Text="3D" HorizontalAlignment="Right" Name="dimensioncb" VerticalAlignment="Center" IsReadOnly="True" IsEditable="True">
<ComboBoxItem>2D</ComboBoxItem>
<ComboBoxItem>3D</ComboBoxItem>
</ComboBox>
</StackPanel>
<Separator/>
<DockPanel>
<Label Content="Iteration" Name="label2" VerticalAlignment="Center" />
<ComboBox Text="3" HorizontalAlignment="Right" Name="iterationcb" VerticalAlignment="Center" IsReadOnly="True" IsEditable="True">
<ComboBoxItem>1</ComboBoxItem>
<ComboBoxItem>2</ComboBoxItem>
<ComboBoxItem>3</ComboBoxItem>
<ComboBoxItem>4</ComboBoxItem>
<ComboBoxItem>5</ComboBoxItem>
<ComboBoxItem>6</ComboBoxItem>
<ComboBoxItem>7</ComboBoxItem>
<ComboBoxItem>8</ComboBoxItem>
</ComboBox>
</DockPanel>
</StackPanel>
<Button Grid.Row="1" Content="OK" VerticalAlignment="Bottom"/>
</Grid>
</Border>
The above XAML, used to replace the right-hand Border in your XAML will produce the following result, and will keep the button on the bottom when re-sizing the window.

GridSplitter in a Frame; expand beyond border problems

I've got a generic view for displaying data in a Silverlight RIA application. Basically, the view takes in a parameter which is the query required by RIA to get the data, and the data is displayed using autogenerated fields.
Here's part of the XAML code for the view.
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition x:Name="DataGridRow"/>
<RowDefinition Height="Auto"/>
<RowDefinition x:Name="DataFormRow"/>
<RowDefinition Height="Auto" x:Name="EditRow"/>
</Grid.RowDefinitions>
<ria:DomainDataSource Name="SQLDomainDataContext" LoadingData="SQLDomainDataContext_LoadingData" LoadSize="45" SubmittedChanges="SQLDomainDataContext_SubmittedChanges" SubmittingChanges="SQLDomainDataContext_SubmittingChanges" LoadedData="SQLDomainDataContext_LoadedData">
<ria:DomainDataSource.SortDescriptors>
<ria:SortDescriptor Direction="Descending" PropertyPath="BaseProperties.CreatedOn" />
</ria:DomainDataSource.SortDescriptors>
</ria:DomainDataSource>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<sdk:DataGrid Grid.Row="0" AutoGenerateColumns="True" Name="dataGrid" ItemsSource="{Binding}" DataContext="{Binding Path=Data, Mode=TwoWay}" IsReadOnly="True" AutoGeneratingColumn="dataGrid_AutoGeneratingColumn" SelectionChanged="dataGrid_SelectionChanged" />
<custCont:LocalizedDataPager Grid.Row="1" x:Name="pager" Source="{Binding Path=Data}" PageSize="15" DisplayMode="FirstLastPreviousNext" />
</Grid>
<Border Grid.Row="1">
<Border.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF9D9D9D" Offset="0" />
<GradientStop Color="#FFDBDBDB" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Ellipse Fill="Black" HorizontalAlignment="Center" Width="4" Height="4" Margin="8,0"/>
<Ellipse Fill="Black" HorizontalAlignment="Center" Width="4" Height="4" Margin="8,0"/>
<Ellipse Fill="Black" HorizontalAlignment="Center" Width="4" Height="4" Margin="8,0"/>
</StackPanel>
</Border>
<sdk:GridSplitter Grid.Row="1" HorizontalAlignment="Stretch" Background="Transparent" Opacity="0"/>
<data:DataForm Grid.Row="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Name="DF" AutoCommit="False"
DataContext="{Binding Path=Data, Mode=TwoWay}" ItemsSource="{Binding}"
AutoGeneratingField="DF_AutoGeneratingField" EditEnded="DF_EditEnded" DeletingItem="DF_DeletingItem" Style="{StaticResource DataFormStyle}"/>
<Grid Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Name="btnHideDF" Content="{Binding Source={StaticResource ApplicationResources}, Path=ApplicationStrings.ShowEntities_HideDfBtn}" MinWidth="10" Margin="2" Click="btnHideDF_Click" />
<Button Grid.Column="2" Name="bRefresh" Content="{Binding Source={StaticResource ApplicationResources}, Path=ApplicationStrings.ShowEntities_RefreshBtn}" MinWidth="75" Margin="2" Click="bRefresh_Click" IsEnabled="{Binding Path=CanLoad}" />
<Button Grid.Column="3" Name="btnCacnelChanges" Content="{Binding Source={StaticResource ApplicationResources}, Path=ApplicationStrings.ShowEntities_CancelChangesBtn}" Margin="2" IsEnabled="{Binding Path=HasChanges}" Click="btnCacnelChanges_Click" Visibility="Collapsed" />
<Button Grid.Column="4" Name="bSubmit" Content="{Binding Source={StaticResource ApplicationResources}, Path=ApplicationStrings.ShowEntities_SubmitBtn}" MinWidth="75" Margin="2" IsEnabled="{Binding Path=HasChanges}" Click="bSubmit_Click" />
</Grid>
</Grid>
When the view is displayed in a singular Frame, all is well. But when it is displayed on a page with TWO frames, odd things begin to happen. If the user grabs the splitter and moves it all the way to the top, beyond the frames boundaries, the DataForm will expand endlessly. This isn't a big issue, but it looks ugly, and makes the buttons at the bottom vanish from sight.
What's going on here? Why is this happening? How can I prevent this behaviour?
Apparently my Google-fu was weak.
I found this today, and it describes the exact same problem I had, as well as a possible solution.
Still, I didn't expect this to be a bug in SL...