Question

我已经为我的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>

所以现在我的复选框看起来像一个圆圈，它的复选标记实际上是一个名为＆＃34; CheckMark＆＃34;的图像。所以我对它的外观很满意，但我想要管理的是使我的复选标记比我的复选框稍微大一些。例如：

enter image description here

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

Answer 1

基于假设，这应该有效

<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默认情况下不会剪切其内容，这会导致溢出，因为我们设置了更大的尺寸，它会给我们带来理想的效果。

Answer 2

如果您的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"/>

更改CheckBox的CheckMark WPF的大小

2 个答案: