We Keep Coding

Stick to bottom of grid in an inner ContentControl

I have a main view with a secondary child view ChildViewModel inside it:
<Window {...}>
<Window.Resources> {...} </Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0"> {...} </Grid>
<StackPanel Grid.Row="1"> {...} </StackPanel>
<ContentControl Grid.Row="2"
Content="{Binding ChildViewModel}"/>
</Grid>
</Window>
The ChildViewModel contains another grid of elements, with a Stack Panel of two buttons at the bottom. I would like these two buttons to be stuck to the bottom of the whole window.
I have tried this method, however it doesn't quite work as either the whole content control is at the bottom (with a large white gap at the top), or the buttons are at the bottom of the content control, but the content control itself is not at the bottom.
The following image should explain visually what I mean. The buttons are the two small rectangles that I would like at the bottom.
EDIT: Code of the Content Control:
<UserControl {..}>
<UserControl.DataContext>
<viewModels:ChildViewModel />
</UserControl.DataContext>
<Grid FocusVisualStyle="{x:Null}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.Resources>
{..}
</Grid.Resources>
<ScrollViewer Grid.Row="0" VerticalScrollBarVisibility="Auto" FocusVisualStyle="{x:Null}">
{..}
</ScrollViewer>
<customViews:SwirlyThingy Grid.Row="1" {..}/>
<TextBlock Grid.Row="2" {..}/>
<TextBlock Grid.Row="3" {..}/>
<TextBlock Grid.Row="4" {..}}"/>
<!--The buttons I'd like at the bottom-->
<StackPanel Grid.Row=5"
VerticalAlignment="Bottom"
Orientation="Horizontal"
misc:MarginSetter.Margin="6">
<Button Command="{Binding PrepareForMigrationCommand}"
IsEnabled="{Binding CanMigrate,
UpdateSourceTrigger=PropertyChanged}">
<Button.Style>
<Style BasedOn="{StaticResource MajorControlButton}" TargetType="Button">
<Setter Property="Content" Value="Migrate" />
<Style.Triggers>
<DataTrigger Binding="{Binding PrepareForMigrationCommand.Execution.IsNotCompleted}"
Value="True">
<Setter Property="Content" Value="Migrating..." />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<Button Command="{Binding PrepareForMultiMigrationCommand}"
Visibility="{Binding IsMultiMigration,
UpdateSourceTrigger=PropertyChanged,
Converter={StaticResource BooleanToVisibilityConverter}}">
<Button.Style>
<Style BasedOn="{StaticResource MajorControlButton}" TargetType="Button">
<Setter Property="Content" Value="Run All" />
</Style>
</Button.Style>
</Button>
</StackPanel>
</Grid>
</UserControl>

You want to take up all available space for the last item. In order to do this you would star size your last row of your top level grid.
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" /> <!-- Star size this one -->
</Grid.RowDefinitions>
In your control you could simply have two rows, one for all of your content which would be contained in a stackpanel (instead of multiple rows). And one row for your buttons. Your button panel would be aligned to the bottom.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Rectangle Height="20" Fill="Red"/>
</Grid>
<StackPanel Grid.Row="1">
<Rectangle Height="20" Fill="Orange"/>
<Rectangle Height="20" Fill="Yellow"/>
<Rectangle Height="20" Fill="Green"/>
</StackPanel>
<Grid Grid.Row="2"> <!-- simulating your custom control -->
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<!-- A bunch of content here
</StackPanel>
<StackPanel Grid.Row="1"
Orientation="Horizontal"
VerticalAlignment="Bottom">
<Button Content="Click Me!"/>
<Button Content="No, Me!"/>
</StackPanel>
</Grid>
</Grid>

Buttons custom content is not rendering at runtime

I have a UserControl hosted in a Windows Forms form. In this UserControl I have a ToolBar where I have various buttons:
<ToolBar>
<Button Content="{StaticResource AllGreenIcon}"/>
<Button Content="{StaticResource AllRedIcon}"/>
<Button Content="{StaticResource RedRectangle}"/>
<Button Content="{StaticResource GreenRectangle}"/>
</ToolBar>
It looks like this in the desinger:
The problem is with the buttons where the icon is made of 4 rectangles. The contents are not rendering for these two buttons at runtime.
It looks like this at runtime:
The code for the AllGreenIcon:
<UserControl.Resources>
<Grid x:Key="AllGreenIcon" Height="16" Width="16" Effect="{StaticResource IconDropShadowEffect}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentControl Content="{StaticResource GreenRectangle}" Margin="0,0,1,1" Grid.Row="0" Grid.Column="0"/>
<ContentControl Content="{StaticResource GreenRectangle}" Margin="1,0,0,1" Grid.Row="0" Grid.Column="1"/>
<ContentControl Content="{StaticResource GreenRectangle}" Margin="0,1,1,0" Grid.Row="1" Grid.Column="0"/>
<ContentControl Content="{StaticResource GreenRectangle}" Margin="1,1,0,0" Grid.Row="1" Grid.Column="1"/>
</Grid>
</UserControl.Resources>
Does anyone have some ideas how could I fix this?
Thanks in advance!

This common issue is due to WPF (logical) requirement of each UIElement to have a single parent. In your case you are adding to the resources an element - GreenRectangleand then you are using this element as the Content for multiple ContentControls in your AllGreenIcon resource. Each time an element is being connected to the visual tree it will change its parent reference, this guaranties that an element is present only once in the visual tree.
All your green buttons for example will use the same instance of GreenRectangle element. Since each time the GreenRectangle is connected to the visual tree its parent is changed only the last item using the GreenRectange resource will actually display the element.
In conclusion avoid declaring and using UIElements in resources. You should use Styles and Controltemplates.
Note: in your solution the AllGreenIcon grid declared in the resources will have the same problem - cannot be used in two different places in UI at the same time. Use a ContentTemplate instead.
Ex:
<Button ContentTemplate="{StaticResource AllGreenIconTemplate}"/>

I've managed to find a sollution by trial and error. Basicly what I did was I've replaced the ContentControls with Rectangles and made a style for the Rectangles.
<LinearGradientBrush x:Key="GreenLinearGradientBrush" EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FF00BD22" Offset="1"/>
<GradientStop Color="#FF218934"/>
</LinearGradientBrush>
<Style x:Key="GreenRectangleStyle" TargetType="{x:Type Rectangle}">
<Setter Property="Width" Value="16"/>
<Setter Property="Height" Value="16"/>
<Setter Property="Fill" Value="{StaticResource GreenLinearGradientBrush}"/>
<Setter Property="Effect" Value="{StaticResource IconDropShadowEffect}"/>
</Style>
<Grid x:Key="AllGreenIcon" Height="16" Width="16" Effect="{StaticResource IconDropShadowEffect}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle Margin="0,0,1,1" Grid.Row="0" Grid.Column="0" Style="{StaticResource GreenRectangleStyle}"/>
<Rectangle Margin="1,0,0,1" Grid.Row="0" Grid.Column="1" Style="{StaticResource GreenRectangleStyle}"/>
<Rectangle Margin="0,1,1,0" Grid.Row="1" Grid.Column="0" Style="{StaticResource GreenRectangleStyle}"/>
<Rectangle Margin="1,1,0,0" Grid.Row="1" Grid.Column="1" Style="{StaticResource GreenRectangleStyle}"/>
</Grid>
Does anyone have a better solution?
edit:
#Novitchi S had a better solution, based on his answer here is the final version:
<Style x:Key="GreenRectangleStyle" TargetType="{x:Type Rectangle}">
<Setter Property="Width" Value="16"/>
<Setter Property="Height" Value="16"/>
<Setter Property="Fill" Value="{StaticResource GreenLinearGradientBrush}"/>
<Setter Property="Effect" Value="{StaticResource IconDropShadowEffect}"/>
</Style>
<DataTemplate x:Key="GreenRectangle">
<Rectangle Style="{StaticResource GreenRectangleStyle}"/>
</DataTemplate>
<DataTemplate x:Key="AllGreenIcon">
<Grid Height="16" Width="16" Effect="{StaticResource IconDropShadowEffect}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentControl ContentTemplate="{StaticResource GreenRectangle}" Margin="0,0,1,1" Grid.Row="0" Grid.Column="0"/>
<ContentControl ContentTemplate="{StaticResource GreenRectangle}" Margin="1,0,0,1" Grid.Row="0" Grid.Column="1"/>
<ContentControl ContentTemplate="{StaticResource GreenRectangle}" Margin="0,1,1,0" Grid.Row="1" Grid.Column="0"/>
<ContentControl ContentTemplate="{StaticResource GreenRectangle}" Margin="1,1,0,0" Grid.Row="1" Grid.Column="1"/>
</Grid>
</DataTemplate>
.
.
.
<ToolBar>
<Button ContentTemplate="{StaticResource AllGreenIcon}"/>
<Button ContentTemplate="{StaticResource AllRedIcon}"/>
<Button ContentTemplate="{StaticResource RedRectangle}"/>
<Button ContentTemplate="{StaticResource GreenRectangle}"/>
</ToolBar>

Is it possible to reuse grid pattern/template in WPF

In my WPF application I'd like to reuse grid template few times.
I defined a data template for grid (named GrdTemplate) and I would like to use this template in several places of my XAML definition.
How one can use grid template?
Here is my XAML code:
<Grid Height="{Binding Converter={StaticResource PercentageConverter}, ElementName=listboxItems, Path=ActualHeight, ConverterParameter=0.48}"
MaxWidth="{Binding Converter={StaticResource PercentageConverter}, ElementName=listboxItems, Path=ActualWidth, ConverterParameter=0.1}">
<Grid.Resources>
<Style TargetType="TextBlock" >
<Setter Property="TextAlignment" Value="Center" />
<Setter Property="Margin" Value="2,2" />
</Style>
<DataTemplate x:Key="GrdTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<Grid.RowDefinitions >
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
Text="{Binding Path=Tr}" />
<TextBlock Grid.Column="1" Grid.Row="0"
Text="{Binding Path=Hr}" />
</Grid>
<Grid Grid.Column="0" Grid.Row="1">
<Grid.RowDefinitions >
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
Text="{Binding Path=TypeK}" />
</Grid>
<Grid Grid.Column="0" Grid.Row="2">
<Grid.RowDefinitions >
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="6*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0"
Text="{Binding Path=Tk}" />
<TextBlock Grid.Row="0" Grid.Column="1"
Text="{Binding Path=Lft}" />
</Grid>
<Grid Grid.Column="0" Grid.Row="3">
<Grid.RowDefinitions >
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
Text="{Binding Path=Crd}" />
</Grid>
</Grid>
</DataTemplate>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="3*" />
<RowDefinition Height="4*" />
<RowDefinition Height="4*" />
</Grid.RowDefinitions>
<Border Grid.Column="0" Grid.Row="1"
Background="#FF576577"
BorderBrush="{DynamicResource GrayBrush7}" BorderThickness="2">
<Viewbox Stretch="Uniform" >
!!! Here I want to use my template with Object1 as Datasource !!!
</Viewbox>
</Border>
<Border Grid.Column="0" Grid.Row="1"
Background="#FF576577"
BorderBrush="{DynamicResource GrayBrush7}" BorderThickness="2">
<Viewbox Stretch="Uniform" >
!!! Here I want to use my template with Object2 as Datasource !!!
</Viewbox>
</Border>
</Grid>

What you should use here is not a DataTemplate but a UserControl. DataTemplates are typically used for controls that have a collection of child controls that you want to take the same appearance.
Then use your custom UserControl like this:
<Viewbox Stretch="Uniform">
<!--Here I want to use my template with Object2 as Datasource-->
<views:MyGrdUserControl DataContext="{Binding Object2}"/>
</Viewbox>
If you do want to use your DataTemplate though you could use a ContentPresenter and set the ContentTemplate to be your GrdTemplate resource
<Viewbox Stretch="Uniform">
<!--Here I want to use my template with Object2 as Datasource-->
<ContentPresenter Content="{Binding Object2}"
ContentTemplate="{StaticResource GrdTemplate}"/>
</Viewbox>

How to make a grid inside a button have 100 percent width in WPF?

I have a button on a window that sizes to the window. I have put a grid inside the button with one row and two columns, and put a path in first column, and a textbox in the second.
My problem is I can't get the grid to stretch with the button.
Here is what is happening:
Here is what I want to happen:
I have the grids HorizontalAlignment="Stretch", yet it is not stretching.
What am I doing wrong here?
Here is the code:
<Window x:Class="GridInButtonIssue.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:GridInButtonIssue"
mc:Ignorable="d"
Title="MainWindow" Height="136.5" Width="269.839">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="btn_SelectMode" Grid.Row="0" Margin="0,35,0,0" >
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Canvas x:Name="svg2" Grid.Column="0" Width="25" Height="25" HorizontalAlignment="Center">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas x:Name="layer1">
<Canvas.RenderTransform>
<TranslateTransform X="-298.50531" Y="-576.33075"/>
</Canvas.RenderTransform>
<Ellipse xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="298.6" Canvas.Top="576.4" Width="19.9" Height="19.9" x:Name="path4144" Fill="#FF951718" StrokeThickness="0.14452878" Stroke="#FFFD0000" StrokeMiterLimit="4" StrokeLineJoin="Miter" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" Opacity="1"/>
</Canvas>
</Canvas>
<TextBlock Grid.Column="1" Text="Test Button" HorizontalAlignment="Left" />
</Grid>
</Button>
</Grid>
</Window>

You have to set the HorizontalContentAlignment to Strech on the Button directly like so:
<Window x:Class="GridInButtonIssue.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:GridInButtonIssue"
mc:Ignorable="d"
Title="MainWindow" Height="136.5" Width="269.839">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="btn_SelectMode" Grid.Row="0" Margin="0,35,0,0" HorizontalContentAlignment="Stretch" >
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Canvas x:Name="svg2" Grid.Column="0" Width="25" Height="25" HorizontalAlignment="Center">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas x:Name="layer1">
<Canvas.RenderTransform>
<TranslateTransform X="-298.50531" Y="-576.33075"/>
</Canvas.RenderTransform>
<Ellipse xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="298.6" Canvas.Top="576.4" Width="19.9" Height="19.9" x:Name="path4144" Fill="#FF951718" StrokeThickness="0.14452878" Stroke="#FFFD0000" StrokeMiterLimit="4" StrokeLineJoin="Miter" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" Opacity="1"/>
</Canvas>
</Canvas>
<TextBlock Grid.Column="1" Text="Test Button" HorizontalAlignment="Left" />
</Grid>
</Button>
</Grid>
</Window>
So it looks like this:

Unable to view scrollbar inside WPF child page that is inside Frame element of a window

In my existing application, I have used navigation.
For that, I have one main window and different pages inside that to be loaded in a frame element.
Here, when the number of controls increase in the page; I want a scroll bar in the page. But currently it appears for the window.Also, in my current code there are 3 columns in SplitGrid - a grid.
I want that first column to be 25% and third column to be 75% width of the available screen area. Is it possible here?
Parent Window :
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" ></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<TextBlock FontSize="24" HorizontalAlignment="Center" Text="Ribbon - (Main Menu + Sub Menu)" FontWeight="Bold"/>
<Button Content="Test Button" Click="Button_Click" Width="100" Height="50" HorizontalContentAlignment="Center" VerticalAlignment="Center" />
</StackPanel>
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto"
Grid.Row="1">
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" ></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Name="SplitGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="350" ></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border BorderBrush="#DEB887" BorderThickness="2" CornerRadius="10" Grid.Column="0" HorizontalAlignment="Stretch">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,0.9" StartPoint="0.5,0">
<GradientStop Color="#306EFF" Offset="0.9" />
<GradientStop Color="#BDEDFF" />
</LinearGradientBrush>
</Border.Background>
<StackPanel Orientation="Vertical">
<Border BorderThickness="2" CornerRadius="8" Margin="5,15,5,10" x:Name="InnerBorder">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,0.9" StartPoint="0.5,0">
<GradientStop Color="#F0FFFF" Offset="0.9" />
<GradientStop Color="#EBF4FA" />
</LinearGradientBrush>
</Border.Background>
<ScrollViewer VerticalScrollBarVisibility="Auto" >
<StackPanel Orientation="Vertical" Margin="0,0,0,10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Frame NavigationUIVisibility="Automatic" Name="frmContent" Source="MainPage.xaml" />
</StackPanel>
</ScrollViewer>
</Border>
</StackPanel>
</Border>
<GridSplitter Grid.Column="1" Name="grdSplitter" Background="#3976FF" HorizontalAlignment="Center" VerticalAlignment="Stretch" ShowsPreview="True" Visibility="Visible" Width="5" />
<StackPanel Background="Blue" Grid.Column="2"></StackPanel>
</Grid>
</Grid>
</ScrollViewer>
</Grid>
MainPage
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<WrapPanel MinWidth="150" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollViewer}}, Path=ActualWidth}" HorizontalAlignment="Stretch">
<Button Width="200" Height="50" Content="Button 1"/>
.....
<Button Width="180" Height="50" Content="Button 20"/>
</WrapPanel>
</ScrollViewer>

In the ScrollViewer change VerticalScrollBarVisibility="Visible"