2

我正在开发一个 WPF 用户控件,该控件本质上是一个经过改进的 Expander 控件。为了让控件在Windows ClassicAero主题上运行时看起来相同,我设法设置了一个几乎模仿Aero上/下箭头的控件模板。

“向下”箭头看起来与它应该的完全一样。但是“向上”箭头被 [似乎是] 2 个像素切掉了,这使它看起来有点圆润,我想解决这个问题:

箭头比较

这是完整的<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>
4

1 回答 1

4

如果您删除Margin,HeightWidth并居中对齐箭头数据,则不会剪切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>
于 2013-06-23T11:29:03.743 回答