Question

我有一个自定义的onoff切换按钮样式。如果用户更改切换按钮的高度和宽度，则内部椭圆（请参阅ForegroundEllipse）也会更改。当我将切换按钮的宽度和高度设置为Width = 50和Height = 25时，ForegroundEllipse的宽度和高度为15。我的要求是，当我更改切换按钮的宽度和高度时，ForegroundEllipse的宽度和高度将发生变化。我已经使用转换器通过比率计算来更改前景椭圆。但这对我没有帮助。请任何人帮助我做到这一点，下面将提到我的转换器，但是现在没有样式提及。我已经附加了切换按钮设计的屏幕截图，请参阅，

ToggleButtonStyle

  <Style x:Key="OnOffToggleButton" TargetType="{x:Type ToggleButton}">       

        <Style.Resources>
            <Color x:Key="Color.Additional.LightGrey">#FFFFFF</Color>
            <Color x:Key="Color.Additional.MediumGrey">#61656B</Color>
            <Color x:Key="Color.MedtronicBranding.MedtronicBlue">#FFFFFF</Color>
            <Color x:Key="Color.MedtronicBranding.CobaltBlue">#14BBA0</Color>

            <Style x:Key="ToggleButtonContentTextbox" TargetType="TextBlock">
                <Setter Property="HorizontalAlignment" Value="Stretch" />
                <Setter Property="VerticalAlignment" Value="Stretch" />
            </Style>

            <SolidColorBrush x:Key="ToggleButtonFalseBackground" Color="{StaticResource Color.Additional.LightGrey}" />
            <SolidColorBrush x:Key="ToggleButtonTrueBackground" Color="{Binding ParentTemplate.Background}"/>
            <SolidColorBrush x:Key="ToggleButtonFalseForeground" Color="{StaticResource Color.Additional.MediumGrey}" />
            <SolidColorBrush x:Key="ToggleButtonTrueForeground" Color="{StaticResource Color.MedtronicBranding.MedtronicBlue}" />

            <Style x:Key="OnContentControl" TargetType="ContentControl">
                <Setter Property="HorizontalAlignment" Value="Center" />
                <Setter Property="HorizontalContentAlignment" Value="Center" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <TextBlock
                                    FontSize="8"
                                    Foreground="White"
                                    Style="{StaticResource ToggleButtonContentTextbox}"
                                    Text="ON" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="VerticalContentAlignment" Value="Center" />
            </Style>

            <Style x:Key="OffContentControl" TargetType="ContentControl">
                <Setter Property="HorizontalAlignment" Value="Center" />
                <Setter Property="HorizontalContentAlignment" Value="Center" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <TextBlock
                                    FontSize="8"
                                    Foreground="White"
                                    Style="{StaticResource ToggleButtonContentTextbox}"
                                    Text="OFF" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="VerticalContentAlignment" Value="Center" />
            </Style>

        </Style.Resources>

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Grid x:Name="MainRow">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="{Binding ElementName=TopRow, Path=ActualHeight}" />
                                <ColumnDefinition />
                                <ColumnDefinition Width="{Binding ElementName=TopRow, Path=ActualHeight}" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition x:Name="TopRow" />
                                <RowDefinition />
                            </Grid.RowDefinitions>

                            <Ellipse
                                    x:Name="BackgroundEllipse1"
                                    Grid.RowSpan="2"
                                    Grid.Column="0"
                                    Grid.ColumnSpan="3"
                                    Width="{Binding ElementName=MainRow, Path=ActualHeight}"
                                    Height="{Binding ElementName=MainRow, Path=ActualHeight}"
                                    HorizontalAlignment="Left"
                                    Fill="{Binding Path=Background, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Control}, AncestorLevel=1}}" />
                            <Ellipse
                                    x:Name="BackgroundEllipse2"
                                    Grid.Row="0"
                                    Grid.RowSpan="2"
                                    Grid.Column="0"
                                    Grid.ColumnSpan="3"
                                    Width="{Binding ElementName=MainRow, Path=ActualHeight}"
                                    Height="{Binding ElementName=MainRow, Path=ActualHeight}"
                                    HorizontalAlignment="Right"
                                    Fill="{Binding Path=Background, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Control}, AncestorLevel=1}}"/>
                            <Border
                                    x:Name="BackgroundBorder"
                                    Grid.Row="0"
                                    Grid.RowSpan="2"
                                    Grid.Column="1"
                                    Background="{Binding Path=Background, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Control}, AncestorLevel=1}}" />
                        </Grid>
                        <Grid HorizontalAlignment="Stretch">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition x:Name="AnimationWidth" />
                                <ColumnDefinition Width="{Binding ElementName=MainRow, Path=ActualHeight}" />
                            </Grid.ColumnDefinitions>
                            <Border x:Name="AnimationSizeBorder" Grid.Column="0" />
                            <ContentControl Grid.Column="0" Style="{StaticResource OnContentControl}" />
                        </Grid>
                        <Grid HorizontalAlignment="Stretch">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="{Binding ElementName=MainRow, Path=ActualHeight}" />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>

                            <ContentControl Grid.Column="1" Style="{StaticResource OffContentControl}" />
                        </Grid>
                        <Grid Background="Transparent">
                            <StackPanel
                                    Margin="5,0,0,0"
                                    HorizontalAlignment="Stretch"
                                    Orientation="Horizontal">
                                <Border Width="{Binding ElementName=AnimationSizeBorder, Path=ActualWidth}" />
                                <Ellipse
                                        x:Name="ForegroundEllipse"
                                        HorizontalAlignment="Right"              
                                        Width="15"
                                        Height="15"
                                        Fill="{StaticResource ToggleButtonTrueForeground}"/>
                            </StackPanel>
                        </Grid>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="False">
                            <Setter TargetName="BackgroundBorder" Property="Background" Value="{Binding Path=Background, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Control}, AncestorLevel=1}}" />
                            <Setter TargetName="ForegroundEllipse" Property="Fill" Value="White" />
                            <Setter TargetName="AnimationSizeBorder" Property="Width" Value="0" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

MainWindow.xaml

<Grid>
 <ToggleButton               
                Width="50"
                Height="25"  
                Margin="0,10,0,0"
                IsChecked="False"
                Background="BlueViolet"   
                Style="{StaticResource OnOffToggleButton}"
                HorizontalAlignment="Center"/>
</Grid>

转换器

 public class SumHeightConverter : IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            var firstValue = (object)values[0];
            var secondValue = (object)values[1];
            var value = ((double)15 * (double)firstValue) / (double)25;

            double _Sum = 0;

            if (firstValue != null && secondValue != null)
            {
                _Sum = value;
            }

            return _Sum;
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

    public class SumWidthConverter : IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            double _Sum = 0;

            var firstValue = (object)values[0];
            var secondValue = (object)values[1];
            var value = ((double)15 * (double)firstValue) / (double)50;

            if (firstValue != null && secondValue != null)
            {
                _Sum = value;
            }


            return _Sum;
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

[ After updating Width and Height screenshot ] [2

如何在WPF中同时更改自定义OnOff切换按钮的宽度和高度

0 个答案: