1

我使用 Blend 复制样式,进行了我需要的大部分更改,但我确实坚持如何完全删除舍入并删除周围的空白。带箭头的按钮应为 18,整个下拉菜单应为 18 高。现在,当按钮未居中时,周围有填充和白色。另外,这个四舍五入对吗?

在此处输入图像描述

这是我的风格:

<Style x:Key="ComboBoxReadonlyToggleButton" TargetType="{x:Type ToggleButton}">
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Focusable" Value="false"/>
            <Setter Property="ClickMode" Value="Press"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Microsoft_Windows_Themes:ButtonChrome Height="18"
                            x:Name="Chrome" RoundCorners="False" 
                            BorderBrush="{TemplateBinding BorderBrush}" 
                            Background="{TemplateBinding Background}" 
                            RenderMouseOver="{TemplateBinding IsMouseOver}" 
                            RenderPressed="{TemplateBinding IsPressed}" SnapsToDevicePixels="true">
                            <Border
                                BorderBrush="#a6a6a6" BorderThickness="1"
                                HorizontalAlignment="Right" Width="18" Height="18">
                                <Border.Background>                                    
                                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                        <GradientStop Color="#899ba5" />
                                        <GradientStop Color="#4f6473" Offset="1" />
                                    </LinearGradientBrush>                                    
                                </Border.Background>
                                <Grid>
                                    <Path x:Name="Arrow" Fill="#dcdcdc" HorizontalAlignment="Center" VerticalAlignment="Center">
                                        <Path.Data>
                                            <Geometry>M 0 0 L 3.5 4 L 7 0 Z</Geometry>
                                        </Path.Data>
                                    </Path>
                                </Grid>
                            </Border>                            
                        </Microsoft_Windows_Themes:ButtonChrome>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>        
        <Style x:Key="ComboBoxStyle" TargetType="{x:Type ComboBox}">
            <Setter Property="Height" Value="18" />
            <Setter Property="Foreground" Value="#1a3e55"/>
            <Setter Property="Background" Value="#f7f7f7"/>
            <Setter Property="BorderBrush" Value="#a6a6a6"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>

            <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
            <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
            <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBox}">
                        <Grid x:Name="MainGrid" 
                            SnapsToDevicePixels="true">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
                            </Grid.ColumnDefinitions>
                            <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
                                <Microsoft_Windows_Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=MainGrid}">
                                    <Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
                                        <ScrollViewer x:Name="DropDownScrollViewer">
                                            <Grid RenderOptions.ClearTypeHint="Enabled">
                                                <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
                                                    <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}"/>
                                                </Canvas>
                                                <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                            </Grid>
                                        </ScrollViewer>
                                    </Border>
                                </Microsoft_Windows_Themes:SystemDropShadowChrome>
                            </Popup>
                            <ToggleButton 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                Background="{TemplateBinding Background}" 
                                Grid.ColumnSpan="2" 
                                IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" 
                                Style="{StaticResource ComboBoxReadonlyToggleButton}"/>
                            <ContentPresenter 
                                ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" 
                                ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" 
                                Content="{TemplateBinding SelectionBoxItem}" 
                                ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" 
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                IsHitTestVisible="false" 
                                Margin="{TemplateBinding Padding}" 
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>           
        </Style>    
4

1 回答 1

2

好吧,这次我终于搞定了。

所有这些都在您的 ButtonChrome 样式模板中。我使用了这个答案https://stackoverflow.com/a/4554309/1449777来了解如何更改这种风格。从此处提供的链接下载类文件: http ://www.mediafire.com/?wnra4qj4qt07wn6

首先,让我们摆脱圆角。

将切换按钮的样式更新为按钮 chrome 类的本地副本并设置 RoundedCorners="false"。

<local:MyButtonChrome RoundCorners="False" ... >

为了修复圆角,我修改了 buttonchrome 类以正确实现 RoundedCorners="false"。在 DrawBorder 函数中,我将绘制边框(第 128 行)的逻辑更改为:

if (this.RoundCorners)
{
    Rect rectangle = new Rect(bounds.Left + 0.5, bounds.Top + 0.5, bounds.Width - 1.0, bounds.Height - 1.0);
    if (base.IsEnabled && (pen != null))
    {
        dc.DrawRoundedRectangle(null, pen, rectangle, 2.75, 2.75);
    }
    if (borderOverlayPen != null)
    {
        dc.DrawRoundedRectangle(null, borderOverlayPen, rectangle, 2.75, 2.75);
    }
}
else
{
    Rect rectangle = new Rect(bounds.Left + 0.5, bounds.Top + 0.5, bounds.Width - 1.0, bounds.Height - 1.0);
    if (base.IsEnabled && (pen != null))
    {
        dc.DrawRectangle(null, pen, rectangle);
    }
    if (borderOverlayPen != null)
    {
        dc.DrawRectangle(null, borderOverlayPen, rectangle);
    }
}

我将 InnerBorder 函数(第 180 行)更改为:

private void DrawInnerBorder(DrawingContext dc, ref Rect bounds)
{
    if (DisableInnerBorder == false && ((base.IsEnabled || this.RoundCorners) && ((bounds.Width >= 4.0) && (bounds.Height >= 4.0))))
    {
        Pen innerBorderPen = this.InnerBorderPen;
        if (innerBorderPen != null)
        {
            if (this.RoundCorners)
            {
                dc.DrawRoundedRectangle(null, innerBorderPen, new Rect(bounds.Left + 1.5, bounds.Top + 1.5, bounds.Width - 3.0, bounds.Height - 3.0), 1.75, 1.75);
            }
            else
            {
                dc.DrawRoundedRectangle(null, innerBorderPen, new Rect(bounds.Left + 1.5, bounds.Top + 1.5, bounds.Width - 3.0, bounds.Height - 3.0), 0, 0);
            }
        }
    }
}

现在让我们处理那个填充。

这个需要一段时间才能发现,但我在函数 ArrangeOverride(第 40 行)中找到了它。只需删除以下函数,它将不再覆盖放置。

protected override Size ArrangeOverride(Size finalSize)

结果:

只是为了证明它确实有效......

在此处输入图像描述

于 2012-06-29T20:56:24.787 回答