We Keep Coding

How do I automatically resize the content in a grid so that it fits on al resolutions

I was submitting this piece of XAML code (a simon game) for a class project, and the Windows couldn't resize to a smaller resolution, so I was wondering if you could help me, I've tried to use *s and autos in my Grid.Columns and Rows but it only seeems to resize the content vertically, not horizontally.
I'm quite new to WPF so if anyone can help me I would appreciate it.
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:SimonWPF"
mc:Ignorable="d"
Title="Simon" Height="1080" Width="1920"
SizeToContent="WidthAndHeight">
<StackPanel HorizontalAlignment="Center" Background="White"
>
<!--STYLING-->
<StackPanel.Resources>
<Style TargetType="TextBlock" x:Key="HeadingStyle">
<Setter Property="FontFamily" Value="Nexa Demo"/>
<Setter Property="FontSize" Value="26"/>
<Setter Property="Margin" Value="10,40"/>
</Style>
<Style TargetType="TextBlock" x:Key="SubheadingStyle">
<Setter Property="FontFamily" Value="Nexa Demo"/>
<Setter Property="FontSize" Value="56"/>
<Setter Property="Margin" Value="10,-50,8,8"/>
</Style>
</StackPanel.Resources>
<!--STYLING-->
<TextBlock Style="{StaticResource SubheadingStyle}" Name="SimonStatus"
Text="WATCH"
HorizontalAlignment="Left"
Margin="280,20"/>
<!--HEADING-->
<Grid Width="777" Height="777">
<!--COLUMN DEFINITIONS-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="350*"/>
<ColumnDefinition Width="70*"/>
<ColumnDefinition Width="350*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="350*"/>
<RowDefinition Height="70*"/>
<RowDefinition Height="350*"/>
</Grid.RowDefinitions>
<!--COLUMN DEFINITIONS-->
<!--STYLING-->
<Grid.Resources>
<Style TargetType="Rectangle">
<Setter Property="Fill">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.GradientOrigin>0.5,0.5</RadialGradientBrush.GradientOrigin>
<RadialGradientBrush.Center>0.5,0.5</RadialGradientBrush.Center>
<RadialGradientBrush.RadiusX>0.5</RadialGradientBrush.RadiusX>
<RadialGradientBrush.RadiusY>0.5</RadialGradientBrush.RadiusY>
<RadialGradientBrush.Opacity>0</RadialGradientBrush.Opacity>
<GradientStop>
<GradientStop.Color>White</GradientStop.Color>
<GradientStop.Offset>0</GradientStop.Offset>
</GradientStop>
<GradientStop>
<GradientStop.Color>Blue</GradientStop.Color>
<GradientStop.Offset>1.9</GradientStop.Offset>
</GradientStop>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<!--STYLING-->
<!--GRADIENT SECTION-->
<Rectangle Grid.Column="2" Grid.Row="0"
Fill="Blue"
RadiusX="0,100"
RadiusY="0,55"/>
<Rectangle Grid.Column="2" Grid.Row="0"
Name="BlueBlock"
RadiusX="0,100"
RadiusY="0,55">
<Rectangle.Fill>
<RadialGradientBrush
x:Name="BlueBlockGradient"
GradientOrigin="0.5,0.5"
Center="0.5,0.5"
RadiusX="0.5"
RadiusY="0.5"
Opacity="0">
<GradientStop Color="White" Offset="0"
x:Name="WhiteStop4"/>
<GradientStop Color="Blue" Offset="1.9"
x:Name="BlueStop"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--GRADIENT SECTION-->
<Rectangle Grid.Column="0" Grid.Row="2"
Fill="Orange"
RadiusX="0,100"
RadiusY="0,55"/>
<Rectangle Grid.Column="0" Grid.Row="2"
Name="OrangeBlock"
RadiusX="0,100"
RadiusY="0,55">
<Rectangle.Fill>
<RadialGradientBrush
x:Name="OrangeBlockGradient"
GradientOrigin="0.5,0.5"
Center="0.5,0.5"
RadiusX="0.5"
RadiusY="0.5"
Opacity="0">
<GradientStop Color="White" Offset="0"
x:Name="WhiteStop3"/>
<GradientStop Color="Orange" Offset="1.9"
x:Name="OrangeStop"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--GRADIENT SECTION-->
<Rectangle Grid.Column="2" Grid.Row="2"
Fill="Green"
RadiusX="0,100"
RadiusY="0,55"/>
<Rectangle Grid.Column="2" Grid.Row="2"
Name="GreenBlock"
RadiusX="0,100"
RadiusY="0,55">
<Rectangle.Fill>
<RadialGradientBrush
x:Name="GreenBlockGradient"
GradientOrigin="0.5,0.5"
Center="0.5,0.5"
RadiusX="0.5"
RadiusY="0.5"
Opacity="0">
<GradientStop Color="White" Offset="0"
x:Name="WhiteStop2"/>
<GradientStop Color="Green" Offset="1.9"
x:Name="GreenStop"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--GRADIENT SECTION-->
<Rectangle Grid.Column="0" Grid.Row="0"
Fill="Red"
RadiusX="0,100"
RadiusY="0,55"/>
<Rectangle Grid.Column="0" Grid.Row="0"
Name="RedBlock"
RadiusX="0,100"
RadiusY="0,55">
<Rectangle.Fill>
<RadialGradientBrush
x:Name="RedBlockGradient"
GradientOrigin="0.5,0.5"
Center="0.5,0.5"
RadiusX="0.5"
RadiusY="0.5"
Opacity="0">
<GradientStop Color="White" Offset="0"
x:Name="WhiteStop"/>
<GradientStop Color="Red" Offset="1.9"
x:Name="RedStop"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Grid.Column="1" Grid.Row="1" Fill="LightBlue"
RadiusX="100"
RadiusY="100"
Name="ScoreRectangle"/>
<TextBlock Text="0" Grid.Row="1" Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="50"
FontFamily="Nexa Demo"
Name="Score"
Foreground="White"/>
</Grid>
<Button Content="PLAY" FontFamily="Nexa Demo"
Width="200" Height="90" FontSize="50
" BorderBrush="LightBlue"
Margin="290,30,950,0"
Name="PlayButton"
Background="Transparent"
BorderThickness="9"
/>
</StackPanel>
</Window>

Put your outer StackPanel inside a Viewbox:
<Viewbox>
<StackPanel HorizontalAlignment="Center" Background="White" ...>
... etc ...
</StackPanel>
</Viewbox>

map shape to another button

<Path Data="M0.5,0 L0.5,1 M0,0.5 L1,0.5"
StrokeThickness="4"
Stretch="Fill"
Stroke="Blue" />
This will draw a plus sign on a button if the button is the only thing in window,
but how can one map the path to this button?
<ControlTemplate x:Key="BT_SIGN" TargetType="{x:Type Button}">
<Grid Cursor="None" Margin="0,0,1.333,0">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF1E8CF3" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
</Grid>
</ControlTemplate>
<Button
Grid.Column="3"
HorizontalAlignment="Left"
Height="44.8"
Width="75.2"
Margin="22.32,24.6,0,0"
VerticalAlignment="Top"
Template="{DynamicResource BT_SIGN}">
</Button>

Try this, i.e. add a <ContentPresenter /> to the template and set the Content property to your Path:
<ControlTemplate x:Key="BT_SIGN" TargetType="{x:Type Button}">
<Grid Cursor="None" Margin="0,0,1.333,0">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF1E8CF3" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<ContentPresenter />
</Grid>
</ControlTemplate>
<Button
Grid.Column="3"
HorizontalAlignment="Left"
Height="44.8"
Width="75.2"
Margin="22.32,24.6,0,0"
VerticalAlignment="Top"
Template="{DynamicResource BT_SIGN}">
<Path Data="M0.5,0 L0.5,1 M0,0.5 L1,0.5"
StrokeThickness="4"
Stretch="Fill"
Stroke="Blue" />
</Button>

Just set the Path of that specific button inside the button markup.
<Button
Grid.Column="3"
HorizontalAlignment="Left"
Height="44.8"
Width="75.2"
Margin="22.32,24.6,0,0"
VerticalAlignment="Top"
Template="{DynamicResource BT_SIGN}">
<Path Data="M0.5,0 L0.5,1 M0,0.5 L1,0.5"
StrokeThickness="4"
Stretch="Fill"
Stroke="Blue" />
</Button>

How to get button border and Half of Oval Style in WPF Button?

I have tried to make a button style in wpf. But I have faced to issue.
1) Button Inside Style want to Half of the Oval.
2) Button Border with Gold Color & #872234 Color
My XAML CODE-
<Window x:Class="Kiosk_Testing.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">
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="False">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- the background for the button -->
<Rectangle RadiusX="20" RadiusY="30" Grid.RowSpan="2">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="#872234" Offset="0"/>
<GradientStop Color="#872234" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!-- the "gel" hilight at the top of the button -->
<Rectangle RadiusX="20" RadiusY="30" Margin="5">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="#C53550" Offset="0.1"/>
<GradientStop Color="#C43551" Offset="0.5"/>
<GradientStop Color="#C43551" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!-- place for the content inside the button to be displayed -->
<ContentPresenter Grid.RowSpan="2"
x:Name="PrimaryContent"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="{TemplateBinding Padding}"
Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}"
/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="gold" />
</Style>
</Window.Resources>
<Grid>
<Button BorderThickness="50" HorizontalAlignment="Center" Content="Button" FontSize="26" FontFamily="Times New Roman" VerticalAlignment="Center" Width="163" Height="58" Margin="146,168,194,85">
<Button.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="Gold" Offset="0.1"/>
<GradientStop Color="#C43551" Offset="0.5"/>
<GradientStop Color="Gold" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Button.BorderBrush>
</Button>
</Grid>
</Window>

If using Border instead of Rectangle an option for you, then you can use the below Border XAML to replace your Rectangle XAML:
<Border Margin="5" CornerRadius="14,14,4,4">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="#C53550" Offset="0.1"/>
<GradientStop Color="#C43551" Offset="0.5"/>
<GradientStop Color="#C43551" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
You could tweak the CornerRadius property to get the desired rounded corners.
Complete Style:
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="False">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- the background for the button -->
<Rectangle RadiusX="20" RadiusY="30" Grid.RowSpan="2">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="#872234" Offset="0"/>
<GradientStop Color="#872234" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!-- the "gel" hilight at the top of the button -->
<Border Margin="5" CornerRadius="14,14,4,4">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="#C53550" Offset="0.1"/>
<GradientStop Color="#C43551" Offset="0.5"/>
<GradientStop Color="#C43551" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
<!-- place for the content inside the button to be displayed -->
<ContentPresenter Grid.RowSpan="2"
x:Name="PrimaryContent"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="{TemplateBinding Padding}"
Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}"
/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="gold" />
</Style>
And resulting graphic:
UPDATE
I guess, you wanted your button to have the Golden color border as well. Updated Style with Golden Border:
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderThickness="2" CornerRadius="28" BorderBrush="GoldenRod">
<Border BorderThickness="2" CornerRadius="27">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="Gold" Offset="0"/>
<GradientStop Color="Wheat" Offset="0.6"/>
<GradientStop Color="Gold" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
<Border BorderThickness="2" CornerRadius="26" BorderBrush="Gold">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="False">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- the background for the button -->
<Rectangle RadiusX="20" RadiusY="30" Grid.RowSpan="2">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="#872234" Offset="0"/>
<GradientStop Color="#872234" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!-- the "gel" hilight at the top of the button -->
<Border Margin="5" CornerRadius="14,14,4,4">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="#C53550" Offset="0.1"/>
<GradientStop Color="#C43551" Offset="0.5"/>
<GradientStop Color="#C43551" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
<!-- place for the content inside the button to be displayed -->
<ContentPresenter Grid.RowSpan="2"
x:Name="PrimaryContent"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="{TemplateBinding Padding}"
Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}"
/>
</Grid>
</Border>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="gold" />
</Style>

C# WPF Progress Bar ControlTemplate Update Text

I've create a control template for a progress bar that includes a textblock where I want to put the update the text based on the % of a file downloaded.
I've no problem getting the % etc. I just want to know how from the c# code do I target the textblock.
Here is my controltemplate
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid>
<Rectangle Stroke="#FF000000" RenderTransformOrigin="0.5,0.5" x:Name="PART_Track" RadiusX="5" RadiusY="50">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="Gray" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Stroke="#FF000000" RenderTransformOrigin="0.5,0.5" x:Name="PART_Indicator" HorizontalAlignment="Left" RadiusX="5" RadiusY="50">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF023501" Offset="1.0"/>
<GradientStop Color="#FFB6F9B4" Offset="0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Viewbox>
<TextBlock TextAlignment="Center" Background="Transparent" FontFamily="Times" Foreground="Black" x:Name="ProgressText" Margin="2,2,2,2">Test
</TextBlock>
</Viewbox>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Looks like on my screen it's not showing all that code for some reason, anyway, I'm trying to target that TextBlock x:Name "ProgressText"

Did you try to bind the text to the combobox value? Kind of
<TextBlock TextAlignment="Center" Foreground="Black" x:Name="ProgressText"
Margin="2,2,2,2"
Text={TemplateBinding Value,
Converter={StaticResource DoubleToPercent}}/>
You'll need to specify a converter, of course, but as proof of concept you can try witout it.
Edit:
You'll have to employ a multibinding, since your percent value depends on Minimum and Maximum as well:
<TextBlock TextAlignment="Center" Foreground="Black" x:Name="ProgressText"
Margin="2,2,2,2">
<TextBlock.Text>
<MultiBinding Converter="{StaticResource DoubleToPercent}">
<TemplateBinding Path="Value" />
<TemplateBinding Path="Minimum" />
<TemplateBinding Path="Maximum" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
Disclaimer: I didn't try this code.

WPF Linear Fill

I have found some example code that creates a gradient fill in a WPF rectangle control:
<Rectangle Height="{Binding ElementName=txtName}" Width="{Binding ElementName=txtName}">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="Silver" Offset="0.0" />
<GradientStop Color="Black" Offset="0.5" />
<GradientStop Color="white" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
I have some written some code that displays a collection of ListBox's that contain details from MyObject:
<UserControl.Resources>
<DataTemplate x:Key="CustomerTemplate">
<Border BorderThickness="2" BorderBrush="Silver" CornerRadius="5" Padding="1" Height="50">
<Grid x:Name="thisGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" >
<Image Source="C:\MyImage.jpg" Height="50" Width="100" ></Image>
</StackPanel>
<Border Grid.Column="1" Margin="0" Padding="0">
<StackPanel Orientation="Vertical">
<TextBlock Name="txtName" Text="{Binding Name}" Background="Silver" Foreground="Black" FontSize="16" FontWeight="Bold" Height="25"/>
</StackPanel>
</Border>
</Grid>
</Border>
</DataTemplate>
</UserControl.Resources>
<ListBox ItemsSource="{Binding}" ItemTemplate="{StaticResource CustomerTemplate}"
Name="grdList" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" >
</ListBox>
I would like to apply the same stlye of fill that i get with the first example, in each of my ListBox's. I can't quite figure out how to do this. Can anyone help?
Thanks

Have you looked at setting the background fill of the item containers using the ItemContainerStyle property of ListBox?

Since you can change ControlTemplate of your ListBox like in the example here http://msdn.microsoft.com/en-us/library/ms754242(VS.85).aspx, you can write something like this
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<Style x:Key="{x:Type ListBox}" TargetType="ListBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border
Name="Border"
BorderThickness="1"
CornerRadius="20" Style="{DynamicResource DynamicGridBrush}">
<ScrollViewer Margin="0" Focusable="false">
<StackPanel Margin="2" IsItemsHost="True" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="Border" x:Key="DynamicGridBrush">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="LightBlue" />
<GradientStop Offset="0.65" Color="LightGreen" />
<GradientStop Offset="1" Color="White" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style></Page.Resources>
<Grid>
<ListBox>
<TextBlock>aaa</TextBlock>
<TextBlock>bbb</TextBlock>
<TextBlock>ccc</TextBlock>
</ListBox>
</Grid>
</Page>
If I understood your question and you would like to apply gradient background to your whole listbox.