Question

我正在研究WPF用户控件，它本质上是一个拉皮条的Expander控件。为了使控件看起来相同，无论它是在 Windows Classic 还是 Aero 主题上运行，我都设法设置了一个几乎模仿 Aero 上/下箭头。

“向下”箭头看起来应该完全正确。但是“向上”箭头得到[似乎是] 2个像素被切断，这使它看起来有点圆，我想修复：

Arrows comparison

以下是完整的<Path>标记：

<Path x:Name="arrow" 
        Margin="0,5,0,0" 
        Stroke="SteelBlue" 
        Data="M 0 5 L 5 0 L 10 5" 
        StrokeThickness="2" 
        Height="10" Width="10" />

我想知道要改变什么以取回我的两个像素 - 我尝试调整边距和高度但没有运气。我确定这只是一个小小的调整，但是无法确定究竟是什么以及在哪里。任何人吗？

此外，我需要弄清楚为什么顶部边框看起来很弯曲......但这超出了这个问题的范围！

编辑 - 这里有足够的标记来重现风格;将样式NormalExpander应用于Expander控件，您应该看到我正在看到的内容......

    <Style x:Key="ExpanderDownHeaderStyle" TargetType="{x:Type ToggleButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border Padding="{TemplateBinding Padding}">
                        <Grid SnapsToDevicePixels="False" Height="25">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="40"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Ellipse x:Name="circle" HorizontalAlignment="Center" Height="19" Stroke="SteelBlue" VerticalAlignment="Center" Width="19"/>
                            <Path x:Name="arrow" Margin="0,5,0,0" Stroke="SteelBlue" Data="M 0 5 L 5 0 L 10 5" StrokeThickness="2" Height="10" Width="10" />
                            <!-- down arrow: M 0 0 L 5 5 L 10 0 -->
                            <ContentPresenter Grid.Column="1" HorizontalAlignment="Left" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Center"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>

                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Stroke" TargetName="circle" Value="#FF3C7FB1"/>
                            <Setter Property="Stroke" TargetName="arrow" Value="#222"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Stroke" TargetName="circle" Value="#FF526C7B"/>
                            <Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/>
                            <Setter Property="Stroke" TargetName="arrow" Value="DarkBlue"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Data" TargetName="arrow" Value="M 0 5 L 5 0 L 10 5" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="NormalExpander" TargetType="Expander">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Expander}">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="3" 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}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" MinWidth="0" MinHeight="0" Padding="{TemplateBinding Padding}" Style="{StaticResource ExpanderDownHeaderStyle}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            <ContentPresenter x:Name="ExpandSite" DockPanel.Dock="Bottom" Focusable="false" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </DockPanel>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsExpanded" Value="true">
                            <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>
                        </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="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 1

如果您移除Margin，Height和Width并集中对齐箭头数据，则不会剪切Path数据。您需要稍微向右移动箭头，使其位于Ellipse的中心。

<Grid SnapsToDevicePixels="False" Height="25">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="40"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Ellipse x:Name="circle" HorizontalAlignment="Center" Height="19" Stroke="SteelBlue" VerticalAlignment="Center" Width="19"/>
    <Path x:Name="arrow" HorizontalAlignment="Center" VerticalAlignment="Center" Stroke="SteelBlue" Data="M 0.5 5 L 5.5 0 L 10.5 5" StrokeThickness="2" />
    <!-- down arrow: M 0.5 0 L 5.5 5 L 10.5 0 -->
    <ContentPresenter Grid.Column="1" HorizontalAlignment="Left" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Center"/>
</Grid>

WPF路径/“向上”箭头被斩断2px

1 个答案: