Home > database >  How can i make my Custom Made ToggleButton smaller?
How can i make my Custom Made ToggleButton smaller?

Time:11-03

So i have made in Blend an Custom Toggle Button with animations. But when I place this Button and try to make it smaller it went from this:

Picture 1

to this:

Picture 2

How Can I prevent this?

Im Quiet new to this Blend Stuff, but how can I do this to make it smaller and looks the same like Picture 1 but with a different Size?

Thats my CheckBox Style:

 <Style x:Key="FocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <SolidColorBrush x:Key="OptionMark.Static.Background" Color="#FFFFFFFF"/>
    <SolidColorBrush x:Key="OptionMark.Static.Border" Color="#FF707070"/>
    <Style x:Key="OptionMarkFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="14,0,0,0" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <SolidColorBrush x:Key="OptionMark.MouseOver.Background" Color="#FFF3F9FF"/>
    <SolidColorBrush x:Key="OptionMark.MouseOver.Border" Color="#FF5593FF"/>
    <SolidColorBrush x:Key="OptionMark.MouseOver.Glyph" Color="#FF212121"/>
    <SolidColorBrush x:Key="OptionMark.Disabled.Background" Color="#FFE6E6E6"/>
    <SolidColorBrush x:Key="OptionMark.Disabled.Border" Color="#FFBCBCBC"/>
    <SolidColorBrush x:Key="OptionMark.Disabled.Glyph" Color="#FF707070"/>
    <SolidColorBrush x:Key="OptionMark.Pressed.Background" Color="#FFD9ECFF"/>
    <SolidColorBrush x:Key="OptionMark.Pressed.Border" Color="#FF3C77DD"/>
    <SolidColorBrush x:Key="OptionMark.Pressed.Glyph" Color="#FF212121"/>
    <SolidColorBrush x:Key="OptionMark.Static.Glyph" Color="#FF212121"/>
    <Style x:Key="CheckBoxStyle1" TargetType="{x:Type CheckBox}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
        <Setter Property="Background" Value="{StaticResource OptionMark.Static.Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource OptionMark.Static.Border}"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type CheckBox}">
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="Storyboard1" AutoReverse="False">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="checkBoxBorder">
                                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1.771"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.975"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="checkBoxBorder">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="18.333"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="28.25"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="Storyboard2">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="checkBoxBorder">
                                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.975"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="checkBoxBorder">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-52.749"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="Storyboard3" AutoReverse="False">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="checkBoxBorder">
                                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.704"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.968"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="checkBoxBorder">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-2.75"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-0.75"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </ControlTemplate.Resources>
                    <Border x:Name="Border"  BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="12" BorderThickness="0" Margin="0,0,-3,0"  Background="#FF878787" Width="53">
                        <Grid x:Name="templateRoot" Background="{x:Null}" SnapsToDevicePixels="True" Margin="-0.729,-0.854,0,0" RenderTransformOrigin="0.61,0.521">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <DockPanel>


                                <Border x:Name="checkBoxBorder" CornerRadius="25" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Background="White" DockPanel.Dock="Bottom" HorizontalAlignment="Left" Margin="4,4.571,0,4.697"  Height="16" Width="17" Grid.ColumnSpan="2" RenderTransformOrigin="0.5,0.5">
                                    <Border.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform/>
                                            <SkewTransform/>
                                            <RotateTransform/>
                                            <TranslateTransform/>
                                        </TransformGroup>
                                    </Border.RenderTransform>
                                    <Grid x:Name="markGrid" >
                                        <Path x:Name="optionMark" Fill="{StaticResource OptionMark.Static.Glyph}" Margin="1" Opacity="0" Stretch="None"/>
                                        <Rectangle x:Name="indeterminateMark" Fill="#FF0C0C0C" Margin="{Binding Path=Margin, ElementName=Border}" Opacity="0" Stroke="{x:Null}"/>
                                    </Grid>
                                </Border>
                            </DockPanel>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="HasContent" Value="true">
                            <Setter Property="FocusVisualStyle" Value="{StaticResource OptionMarkFocusVisual}"/>
                            <Setter Property="Padding" Value="4,-1,0,0"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.MouseOver.Background}"/>
                            <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.MouseOver.Border}"/>
                            <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.MouseOver.Glyph}"/>
                            <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.MouseOver.Glyph}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Disabled.Background}"/>
                            <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Disabled.Border}"/>
                            <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.Disabled.Glyph}"/>
                            <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.Disabled.Glyph}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Pressed.Background}"/>
                            <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Pressed.Border}"/>
                            <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.Pressed.Glyph}"/>
                            <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.Pressed.Glyph}"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="true">
                            <Trigger.ExitActions>
                                <BeginStoryboard x:Name="Storyboard2_BeginStoryboard" Storyboard="{StaticResource Storyboard3}"/>
                            </Trigger.ExitActions>
                            <Trigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
                            </Trigger.EnterActions>
                            <Setter Property="Opacity" TargetName="optionMark" Value="1"/>
                            <Setter Property="Opacity" TargetName="indeterminateMark" Value="0"/>
                            <Setter Property="Background" TargetName="Border" Value="#43B581"/>
                            <!--<Setter Property="Margin" TargetName="checkBoxBorder" Value="0"/>-->
                        </Trigger>
                        <Trigger Property="IsChecked" Value="{x:Null}">
                            <Setter Property="Opacity" TargetName="optionMark" Value="0"/>
                            <Setter Property="Opacity" TargetName="indeterminateMark" Value="1"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

and here my CheckBox, where I Open that Style:

<CheckBox x:Name="toogleButton"
                          IsChecked="{Binding toggleButton, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
                          Content="CheckBox" 
                          HorizontalAlignment="Center"
                          Style="{DynamicResource CheckBoxStyle1}"  
                          Width="30" Margin="371,222,399,213"
                          
                          />

CodePudding user response:

This happens because you are hardcoding the width and height values. Instead you will have to bind value of width and height and use a converter to add the gap.

<Border x:Name="checkBoxBorder" CornerRadius="55" BorderBrush="{TemplateBinding BorderBrush}" 
BorderThickness="0" Background="White" HorizontalAlignment="Center" 
   Grid.ColumnSpan="2" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" 
Height="{Binding ActualHeight, ElementName=templateRoot,Converter={StaticResource MinusFiveConverter}}" 
Width="{Binding ActualHeight, ElementName=templateRoot, Converter={StaticResource MinusFourConverter}}">

Converters are quite easy to implement. For your case, you will need two different values to make an ellipse.

public class MinusFiveConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return ((double)value) - 5;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotSupportedException("Cannot convert back");
    }
}

Add the converter to the resources

<Window.Resources>
    <local:MinusFiveConverter x:Key="MinusFiveConverter"/>

This is a screenshot of the element with different heights. I messed up the alignment.

enter image description here

If you are creating elements for different sizes, try to avoid using margins and fixed value sizes.

  • Related