Question

我正在制作Expander样式，我注意到当Expander ToggleButton周围的边框从0变为非零值时 - ＆＃ 34; 0,0,1,1＆＃34;，在这种情况下 - 它稍微调整大小，以缩小边界内：

Expander

不完全破解应用......但是我无法解决这个问题。我怎么能绕过这个呢？当Border折叠时，我需要将ToggleButton的样式中的Expander设为0（因为Expander有自己的边框，使其看起来像扩展时为双倍厚边框并且非零（因为我希望按钮与内容的其余部分分开边框）。

ToggleButton样式：

<Style x:Key="ExpanderRightHeaderStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border x:Name="Bd" Background="{StaticResource MutedColorBrush}" BorderBrush="{StaticResource Expander.Border}" Padding="{TemplateBinding Padding}" CornerRadius="0" Height="22" Width="22">
                    <Grid Background="Transparent" SnapsToDevicePixels="False" Margin="0">
                        <ui:ColorableImage x:Name="img" Margin="0" Padding="2" Background="{StaticResource MutedColorBrush}" Color="Black"  Height="{Binding Path=Height, RelativeSource={RelativeSource AncestorType={x:Type Border}}}" Width="{Binding Path=Width, RelativeSource={RelativeSource AncestorType={x:Type Border}}}" Source="Assets/Images/filter.png" HorizontalAlignment="Center" VerticalAlignment="Center" SnapsToDevicePixels="false"/>
                        <ContentPresenter HorizontalAlignment="Center" Margin="12,0,12,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Top"/>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="true">
                        <Setter Property="BorderThickness" TargetName="Bd" Value="0,0,1,1" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Background" TargetName="Bd" Value="{StaticResource MainColorBrush}"/>
                        <Setter Property="Background" TargetName="img" Value="{StaticResource MainColorBrush}"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter Property="Color" TargetName="img" Value="White"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Expander样式：

<Style TargetType="{x:Type Expander}">
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="Background" Value="#F0F0F0"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="BorderBrush" Value="{StaticResource Expander.Border}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Expander}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" SnapsToDevicePixels="true">
                    <DockPanel>
                        <ToggleButton x:Name="HeaderSite" ContentTemplate="{TemplateBinding HeaderTemplate}" ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" Content="{TemplateBinding Header}" DockPanel.Dock="Top" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FocusVisualStyle="{StaticResource ExpanderHeaderFocusVisual}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="0" MinWidth="0" MinHeight="0" Padding="0" Style="{StaticResource ExpanderDownHeaderStyle}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" VerticalAlignment="Top" Width="Auto" Height="Auto"/>
                        <ContentPresenter x:Name="ExpandSite" DockPanel.Dock="Bottom" Focusable="false" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="5,0,5,10" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </DockPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsExpanded" Value="true">
                        <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>
                        <Setter Property="Height" Value="Auto"/>
                        <Setter Property="Height" TargetName="ExpandSite" Value="Auto"/>
                    </Trigger>
                    <Trigger Property="ExpandDirection" Value="Right">
                        <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Right"/>
                        <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Left"/>
                        <Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource ExpanderRightHeaderStyle}"/>
                    </Trigger>
                    <Trigger Property="ExpandDirection" Value="Up">
                        <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Top"/>
                        <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Bottom"/>
                        <Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource ExpanderUpHeaderStyle}"/>
                    </Trigger>
                    <Trigger Property="ExpandDirection" Value="Left">
                        <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Left"/>
                        <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Right"/>
                        <Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource ExpanderLeftHeaderStyle}"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

可能相关 - ColorableImage控件：

ColorableImage.xaml（x：Name =＆＃34; This＆＃34;）：

<Grid>
    <Image x:Name="originalImage"  Visibility="Hidden"  Stretch="{Binding ElementName=This, Path=Stretch}" Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualHeight}" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualWidth}"/>
    <Image x:Name="displayedImage" Visibility="Visible" Stretch="{Binding ElementName=This, Path=Stretch}" Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualHeight}" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualWidth}" />
</Grid>

ColorableImage.xaml.cs：

public partial class ColorableImage : UserControl
{
    // This is so that SourcePropertyChanged will not execute when ColorPropertyChanged does. ColorPropertyChanged changes Source,
    // so SourcePropertyChanged is called in turn. This will change originalImage to the newly colored Source, which is incorrect.
    // "Wrapping" the statement that changes the binding in ColorPropertyChanged with this boolean and making it a condition in 
    // SourcePropertyChanged makes SourcePropertyChanged executre only when Source is directly changed, whether through C# or XAML.
    private static bool changedByColor = false;

    public ColorableImage()
    {
        InitializeComponent();
    }

    public static readonly DependencyProperty ColorProperty = DependencyProperty.Register("Color", typeof(Color), typeof(ColorableImage), new FrameworkPropertyMetadata(ColorPropertyChanged));
    public Color Color
    {
        get { return (Color)GetValue(ColorProperty); }
        set { SetValue(ColorProperty, value); }
    }

    public static readonly DependencyProperty SourceProperty = DependencyProperty.Register("Source", typeof(ImageSource), typeof(ColorableImage), new FrameworkPropertyMetadata(SourcePropertyChanged));
    public ImageSource Source
    {
        get { return (ImageSource)GetValue(SourceProperty); }
        set { SetValue(SourceProperty, value); }
    }

    public static readonly DependencyProperty StretchProperty = DependencyProperty.Register("Stretch", typeof(Stretch), typeof(ColorableImage), new FrameworkPropertyMetadata(Stretch.Uniform));
    public Stretch Stretch
    {
        get { return (Stretch)GetValue(StretchProperty); }
        set
        {
            SetValue(StretchProperty, value);
            this.originalImage.Stretch = value;
            this.displayedImage.Stretch = value;
        }
    }

    private static void ColorPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        ColorableImage cimg = (ColorableImage)sender;

        Binding binding = new Binding("Source")
        {
            ElementName = "originalImage",
            Converter = new HighlightImageConverter(),
            ConverterParameter = cimg.Color,
            Mode = BindingMode.OneWay
        };

        changedByColor = true;
        cimg.displayedImage.SetBinding(Image.SourceProperty, binding);
        changedByColor = false;
    }

    private static void SourcePropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        if (!changedByColor)
        {
            ColorableImage cimg = (ColorableImage)sender;

            cimg.originalImage.Source = cimg.Source;
            cimg.displayedImage.Source = cimg.Source;
            // Note: #00000000 is the value for the "null color"
            if (cimg.Color != null && !cimg.Color.ToString().Equals("#00000000"))
            {
                // Color the new image (this is necessary if the user sets the source after the color; the color would be lost, otherwise)
                ColorPropertyChanged(sender, e);
            }
        }
    }
}

Answer 1

您可以将BorderBrush设置为透明，而不是将BorderThickness设置为0来避免此问题。

您可能需要添加一个额外的容器...
我不想测试这个问题，因为问题已经很久了@Sheridan wrote他无法使其发挥作用。

在Expander按钮周围设置边框会稍微调整一下

1 个答案: