c#wpfxaml
WPF adapt Childrens Control Width and Height to parent control
I have a group of radio buttons that i use to select different viewmodes. The Radiobutts have an additional geometry property so they can contain a path. What i want to change is its resize behaviour.
if i resize the window vertically, they resize the way i want them to.
but if i resize the window horizontally, the stackpanel in which the buttons are inside of, will just exceed the window size instead of resizing its children. does anyone see where i messed this up?
Trying to figure it out for way to long now....
here my xaml:
<Grid Grid.Row="2" Name="GrdRbs">
<Grid>
<Grid.Resources>
<Style TargetType="ctrl:RadioButtonWithIcon">
<Setter Property="Margin" Value="5,0"/>
<Setter Property="Foreground" Value="{StaticResource stdForeGround}"/>
<Setter Property="Background" Value="{StaticResource stdBackGround}"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ctrl:RadioButtonWithIcon">
<Border BorderBrush="{StaticResource stdBorder}" Background="{TemplateBinding Background}" BorderThickness="2" CornerRadius="5" MaxWidth="100" MaxHeight="80">
<Grid VerticalAlignment="Top" HorizontalAlignment="Left">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<ContentPresenter Margin="0,0,0,2" HorizontalAlignment="Center" Grid.Row="1" ContentSource="{TemplateBinding Content}"/>
<Path StrokeEndLineCap="Square" Fill="{StaticResource stdDisabled}" Stretch="Uniform" Margin="5" StrokeThickness="3" Stroke="{TemplateBinding Foreground}" Data="{TemplateBinding IconPath}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource stdMouseOver}"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="{StaticResource stdBlue}"/>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<StackPanel Orientation="Horizontal" Width="{Binding ActualWidth, ElementName=GrdRbs}" HorizontalAlignment="Left" Background="Transparent" VerticalAlignment="Top" Name="stlViewModeSelection">
<ctrl:RadioButtonWithIcon GroupName="View" Content="Default" x:Name="rbViewDefault" IsChecked="True" IconPath="M 0,0 1920,0 1920,1080 0,1080 0,0 M 640,0 640,1080 M 1280,0 1280,1080 M 0,360 1920,360 M 0,720 1920,720"/>
<ctrl:RadioButtonWithIcon GroupName="View" Content="Split Horizontal" x:Name="rbViewSplitHorizontal" IconPath="M 0,0 1920,0 1920,1080 0,1080 0,0 M 0,540 1920,540"/>
<ctrl:RadioButtonWithIcon GroupName="View" Content="Split Vertical" x:Name="rbViewSplitVertical" IconPath="M 0,0 1920,0 1920,1080 0,1080 0,0 M 960,0 960,1080 "/>
<ctrl:RadioButtonWithIcon GroupName="View" Content="Trible Up" x:Name="rbViewTribleUp" IconPath="M 0,0 1920,0 1920,1080 0,1080 0,0 M 960,540 960,1080 M 0,540 1920,540"/>
<ctrl:RadioButtonWithIcon GroupName="View" Content="Trible Down" x:Name="rbViewTribleDown" IconPath="M 0,0 1920,0 1920,1080 0,1080 0,0 M 960,0 960,540 M 0,540 1920,540"/>
<ctrl:RadioButtonWithIcon GroupName="View" Content="Trible Left" x:Name="rbViewTribleLeft" IconPath="M 0,0 1920,0 1920,1080 0,1080 0,0 M 960,0 960,1080 M 960,540 1920,540"/>
<ctrl:RadioButtonWithIcon GroupName="View" Content="Trible Right" x:Name="rbViewTribleRight" IconPath="M 0,0 1920,0 1920,1080 0,1080 0,0 M 960,0 960,1080 M 0,540 960,540"/>
<ctrl:RadioButtonWithIcon GroupName="View" Content="Quad" x:Name="rbViewQuad" IconPath="M 0,0 1920,0 1920,1080 0,1080 0,0 M 960,0 960,1080 M 0,560 1920,560"/>
<ctrl:RadioButtonWithIcon GroupName="View" Content="HMode" x:Name="rbViewHMode" IconPath="M 0,0 1920,0 1920,1080 0,1080 0,0 M 640,0 640,1080 M 1280,0 1280,1080 M 640,540 1280,540"/>
<ctrl:RadioButtonWithIcon GroupName="View" Content="Single" x:Name="rbViewSingle" IconPath="M 0,0 1920,0 1920,1080 0,1080 0,0"/>
</StackPanel>
</Grid>
</Grid>
In case anybody wants to built this here is the RadiobuttonWithIcon class:
class RadioButtonWithIcon : RadioButton
{
public Geometry IconPath
{
get { return (Geometry)this.GetValue(IconPathProperty); }
set { this.SetValue(IconPathProperty, value); }
}
// Using a DependencyProperty as the backing store for IconPath. This enables animation, styling, binding, etc...
public static readonly DependencyProperty IconPathProperty =
DependencyProperty.Register(nameof(IconPath), typeof(Geometry), typeof(RadioButtonWithIcon), new PropertyMetadata(default(Geometry)));
}
Solution
I Resolved this by replacing the stackpanel with a uniform grid
<UniformGrid Rows="1" HorizontalAlignment="Left">
<ctrl:RadioButtonWithIcon ViewMode="Default" GroupName="View" Content="Default" x:Name="rbViewDefault" IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.Default}}"/>
<ctrl:RadioButtonWithIcon ViewMode="Single" GroupName="View" Content="Single" x:Name="rbViewSingle" IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.Single}}"/>
<ctrl:RadioButtonWithIcon ViewMode="SplitHorizontal" GroupName="View" Content="Split Horizontal" x:Name="rbViewSplitHorizontal" IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.SplitHorizontal}}"/>
<ctrl:RadioButtonWithIcon ViewMode="SplitVertical" GroupName="View" Content="Split Vertical" x:Name="rbViewSplitVertical" IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.SplitVertical}}"/>
<ctrl:RadioButtonWithIcon ViewMode="TribleTop" GroupName="View" Content="Triple Up" x:Name="rbViewTribleUp" IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.TribleTop}}"/>
<ctrl:RadioButtonWithIcon ViewMode="TribleBottom" GroupName="View" Content="Triple Down" x:Name="rbViewTribleDown" IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.TribleBottom}}"/>
<ctrl:RadioButtonWithIcon ViewMode="TribleLeft" GroupName="View" Content="Triple Left" x:Name="rbViewTribleLeft" IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.TribleLeft}}"/>
<ctrl:RadioButtonWithIcon ViewMode="TribleRight" GroupName="View" Content="Triple Right" x:Name="rbViewTribleRight" IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.TribleRight}}"/>
<ctrl:RadioButtonWithIcon ViewMode="HMode" GroupName="View" Content="HMode" x:Name="rbViewHMode" IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.HMode}}"/>
<ctrl:RadioButtonWithIcon ViewMode="Quad" GroupName="View" Content="Quad" x:Name="rbViewQuad" IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.Quad}}"/>
<ctrl:RadioButtonWithIcon ViewMode="Six" GroupName="View" Content="Six" x:Name="rbViewSix" IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.Six}}"/>
<ctrl:RadioButtonWithIcon ViewMode="Custom" GroupName="View" Content="Custom" x:Name="rbViewCustom" IsChecked="{Binding SelectedViewMode, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static view:ViewModes.Custom}}"/>
</UniformGrid>
Result:
