更改 CheckBox 的 CheckMark WPF 的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25325503/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change the size of CheckBox's CheckMark WPF
提问by Stojdza
I have implemented this style for my CheckBox:
我已经为我的 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>
So now my checkbox looks like a circle and it's checkmark is actually an image named "CheckMark". So I'm pleased with it's look but what i would like to manage is to make my checkmark little bit bigger than my checkbox. For example something like this:
所以现在我的复选框看起来像一个圆圈，它的复选标记实际上是一个名为“CheckMark”的图像。所以我对它的外观很满意，但我想要管理的是让我的复选标记比我的复选框大一点。例如这样的事情：
I tried to change the size of my image but when I change it it only get changed inside of checkbox. It does't get outside of it's border. How can I manage this?
我试图更改图像的大小，但是当我更改它时，它只会在复选框内更改。它不会超出它的边界。我该如何管理？
采纳答案by Sheridan
If your Borderelement is constraining the size of the Imagethat is declared inside it, you can simply move the Imageoutside of the Borderand increase it's size:
如果您的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"/>
回答by pushpraj
based on assumptions this should work
基于假设这应该有效
<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>
I have placed a canvas as the content of the Border and placed the check mark within it and aligned the bottom of check image to its bottom. since a Canvas does not clip its content by default this would result in overflow and since we have set a larger size it would give us the desired effect.
我已经放置了一个画布作为边框的内容，并在其中放置了复选标记并将复选图像的底部与其底部对齐。由于默认情况下 Canvas 不会剪辑其内容，这将导致溢出，并且由于我们设置了更大的尺寸，它将为我们提供所需的效果。
