0

我已经为我的 CheckBox 实现了这种风格：

<Style x:Key="{x:Type CheckBox}" TargetType="CheckBox">
  <Setter Property="SnapsToDevicePixels" Value="true"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="FontFamily" Value="{DynamicResource MetroFontRegular}"/>
  <Setter Property="FocusVisualStyle" Value="{StaticResource CheckBoxFocusVisual}"/>
  <Setter Property="Foreground" Value="#999999"/>
  <Setter Property="Background" Value="#3f3f3f"/>
  <Setter Property="FontSize" Value="12"/>
  <Setter Property="VerticalContentAlignment" Value="Center"/>
  <Setter Property="Template">
   <Setter.Value>
   <ControlTemplate TargetType="CheckBox">
     <BulletDecorator Background="Transparent">
       <BulletDecorator.Bullet>
         <Border x:Name="Border"  
                 Width="13" 
                 Height="13" 
                 CornerRadius="6,6,6,6"
                 Background="#ffffff"
                 BorderBrush="#999999"
                 BorderThickness="1" >
             <Image x:Name="CheckMark" Source="Images/CheckMark.png" Width="15" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center"/>
          </Border>
       </BulletDecorator.Bullet>
       <ContentPresenter Margin="8,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Left" RecognizesAccessKey="True"/>
    </BulletDecorator>
    <ControlTemplate.Triggers>
      <Trigger Property="IsChecked" Value="false">
        <Setter TargetName="CheckMark" Property="Visibility" Value="Collapsed"/>
      </Trigger>
      <Trigger Property="IsMouseOver" Value="true">
        <Setter TargetName="Border" Property="Background" Value="#91814E" />
      </Trigger>
      <Trigger Property="IsEnabled" Value="false">
        <Setter Property="Foreground" Value="#c1c1c1"/>
      </Trigger>
   </ControlTemplate.Triggers>
 </ControlTemplate>
</Setter.Value>
</Setter>
</Style>

所以现在我的复选框看起来像一个圆圈，它的复选标记实际上是一个名为“CheckMark”的图像。所以我对它的外观很满意，但我想要管理的是让我的复选标记比我的复选框大一点。例如这样的：

在此处输入图像描述

我试图更改图像的大小，但是当我更改它时，它只会在复选框内更改。它不会超出它的边界。我该如何管理？

4

2 回答 2

0

基于假设，这应该有效

<Border x:Name="Border"
        Width="13"
        Height="13"
        CornerRadius="6,6,6,6"
        Background="#ffffff"
        BorderBrush="#999999"
        BorderThickness="1">
    <Canvas>
        <Image x:Name="CheckMark"
                Canvas.Bottom="0"
                Width="20"
                Height="20"
                Source="Images/CheckMark.png"/>
    </Canvas>
</Border>

我已经放置了一个画布作为边框的内容，并在其中放置了复选标记，并将检查图像的底部与其底部对齐。由于默认情况下 Canvas 不会剪切其内容，这将导致溢出，并且由于我们设置了更大的尺寸，它会给我们带来所需的效果。

于 2014-08-15T11:43:33.330 回答
0

如果您的Border元素限制了其Image内部声明的大小，您可以简单地移动Image外部Border并增加它的大小：

<Border x:Name="Border"  
            Width="13" 
            Height="13" 
            CornerRadius="6,6,6,6"
            Background="#ffffff"
            BorderBrush="#999999"
            BorderThickness="1" >
</Border>
<Image x:Name="CheckMark" Source="Images/CheckMark.png" Width="30" Height="30" 
    HorizontalAlignment="Center" VerticalAlignment="Center"/>
于 2014-08-15T11:44:47.910 回答