Обрезание до пути в WPF

Я пытаюсь создать пользовательский элемент управления в WPF, который позволяет пользователю выбирать определенные области обуви (пятка, край, подошва и т.д.).

Идея состоит в том, что у вас есть изображение (рисунок) обуви, которую вы можете щелкнуть по отдельным частям и выбрать области.

Я использую набор флажков с шаблонами.

Существует один флажок с контуром, который определяет ребро, а затем набор прямоугольников, которые определяют отдельные области.

Отпечаток обуви

Это хорошо работает, за исключением того, что это выглядит не очень хорошо. Чтобы он выглядел лучше, я хочу скрыть все, что находится внутри оригинального пути для обуви.

Прямоугольники все расположены на отдельной строке сетки, а фоновый башмак охватывает все строки.

Я попытался установить свойство Clip родительской сетки на тот же путь, что и передний край ботинка, но получил некоторые странные результаты:

введите описание изображения здесь

Я уверен, что я нахожусь на правильных строках с отсечением Grid, но я не понимаю, что здесь происходит.

Если кто-нибудь может помочь с этой проблемой или предложить лучший способ выполнить ту же задачу, я был бы благодарен.

<Geometry x:Key="ShoeEdgeGeometry">M26.25,0.5 C40.471332,0.5 52,17.625107 52,38.75 52,51.292905 47.935695,62.425729 41.656635,69.401079 L41.349452,69.733874 42.012107,70.457698 C45.421829,74.364614 47.5,79.554564 47.5,85.25 47.5,97.400265 38.042015,107.25 26.375,107.25 14.707984,107.25 5.2499995,97.400265 5.2499991,85.25 5.2499995,79.554564 7.3281701,74.364614 10.737891,70.457698 L11.276058,69.869853 10.843364,69.401079 C4.5643053,62.425729 0.49999952,51.292905 0.5,38.75 0.49999952,17.625107 12.028667,0.5 26.25,0.5 z</Geometry>



 <Grid Margin="0"
          Clip="{StaticResource ShoeEdgeGeometry}">
        <Grid.RowDefinitions>
            <RowDefinition Height="2*" />
            <RowDefinition Height="4*" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="2*" />
        </Grid.RowDefinitions>
        <!-- The edge check box-->
        <CheckBox x:Name="ShoeEdgeRegion"
                  Grid.Row="0"
                  Grid.RowSpan="5">
            <CheckBox.Style>
                <Style TargetType="CheckBox">
                    <Setter Property="Cursor"
                            Value="Hand" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type CheckBox}">
                                <Grid>
                                    <Path x:Name="MainPath"
                                          Data="{StaticResource ShoeEdgeGeometry}"
                                          Fill="{StaticResource TransparentBrush}"
                                          Stroke="Black"
                                          Stretch="Fill" />
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsChecked"
                                             Value="True">
                                        <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                    </Trigger>
                                    <Trigger Property="IsMouseOver"
                                             Value="True">
                                        <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </CheckBox.Style>
        </CheckBox>
        <!-- The Toe check box-->
        <CheckBox x:Name="ShoeToeRegion"
                  Grid.Row="0">
            <CheckBox.Style>
                <Style TargetType="CheckBox">
                    <Setter Property="Cursor"
                            Value="Hand" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type CheckBox}">
                                <Grid>
                                    <Rectangle x:Name="MainPath"
                                               StrokeThickness="1"
                                               Fill="{StaticResource TransparentBrush}"
                                               Stroke="Black" />
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsChecked"
                                             Value="True">
                                        <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                    </Trigger>
                                    <Trigger Property="IsMouseOver"
                                             Value="True">
                                        <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                    </Trigger>
                                    <Trigger Property="IsChecked"
                                             Value="True">
                                        <Setter TargetName="MainPath"
                                                Property="Fill"
                                                Value="{StaticResource RedBrush}" />
                                    </Trigger>
                                    <Trigger Property="IsMouseOver"
                                             Value="True">
                                        <Setter TargetName="MainPath"
                                                Property="Fill"
                                                Value="{StaticResource RedBrush}" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </CheckBox.Style>
        </CheckBox>
        <!-- The Sole check box-->
        <CheckBox x:Name="ShoeSoleRegion"
                  Grid.Row="1"
                  Margin="0,-1,0,0">
            <CheckBox.Style>
                <Style TargetType="CheckBox">
                    <Setter Property="Cursor"
                            Value="Hand" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type CheckBox}">
                                <Grid>
                                    <Rectangle x:Name="MainPath"
                                               StrokeThickness="1"
                                               Fill="{StaticResource TransparentBrush}"
                                               Stroke="Black" />
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsChecked"
                                             Value="True">
                                        <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                    </Trigger>
                                    <Trigger Property="IsMouseOver"
                                             Value="True">
                                        <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                    </Trigger>
                                    <Trigger Property="IsChecked"
                                             Value="True">
                                        <Setter TargetName="MainPath"
                                                Property="Fill"
                                                Value="{StaticResource RedBrush}" />
                                    </Trigger>
                                    <Trigger Property="IsMouseOver"
                                             Value="True">
                                        <Setter TargetName="MainPath"
                                                Property="Fill"
                                                Value="{StaticResource RedBrush}" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </CheckBox.Style>
        </CheckBox>
        <!-- The Instep check box-->
        <CheckBox x:Name="ShoeInstepRegion"
                  Margin="0,-1,0,0"
                  Grid.Row="2">
            <CheckBox.Style>
                <Style TargetType="CheckBox">
                    <Setter Property="Cursor"
                            Value="Hand" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type CheckBox}">
                                <Grid>
                                    <Rectangle x:Name="MainPath"
                                               StrokeThickness="1"
                                               Fill="{StaticResource TransparentBrush}"
                                               Stroke="Black" />
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsChecked"
                                             Value="True">
                                        <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                    </Trigger>
                                    <Trigger Property="IsMouseOver"
                                             Value="True">
                                        <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                    </Trigger>
                                    <Trigger Property="IsChecked"
                                             Value="True">
                                        <Setter TargetName="MainPath"
                                                Property="Fill"
                                                Value="{StaticResource RedBrush}" />
                                    </Trigger>
                                    <Trigger Property="IsMouseOver"
                                             Value="True">
                                        <Setter TargetName="MainPath"
                                                Property="Fill"
                                                Value="{StaticResource RedBrush}" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </CheckBox.Style>
        </CheckBox>
        <!-- The Lower heel check box-->
        <CheckBox x:Name="ShoeLowerHeelRegion"
                  Grid.Row="3"
                  Margin="0,-1,0,0">
            <CheckBox.Style>
                <Style TargetType="CheckBox">
                    <Setter Property="Cursor"
                            Value="Hand" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type CheckBox}">
                                <Grid>
                                    <Rectangle x:Name="MainPath"
                                               StrokeThickness="1"
                                               Fill="{StaticResource TransparentBrush}"
                                               Stroke="Black" />
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsChecked"
                                             Value="True">
                                        <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                    </Trigger>
                                    <Trigger Property="IsMouseOver"
                                             Value="True">
                                        <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                    </Trigger>
                                    <Trigger Property="IsChecked"
                                             Value="True">
                                        <Setter TargetName="MainPath"
                                                Property="Fill"
                                                Value="{StaticResource RedBrush}" />
                                    </Trigger>
                                    <Trigger Property="IsMouseOver"
                                             Value="True">
                                        <Setter TargetName="MainPath"
                                                Property="Fill"
                                                Value="{StaticResource RedBrush}" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </CheckBox.Style>
        </CheckBox>
        <!-- The heel check box-->
        <CheckBox x:Name="ShoeHeelRegion"
                  Grid.Row="4"
                  Margin="0,-1,0,0">
            <CheckBox.Style>
                <Style TargetType="CheckBox">
                    <Setter Property="Cursor"
                            Value="Hand" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type CheckBox}">
                                <Grid>
                                    <Rectangle x:Name="MainPath"
                                               StrokeThickness="1"
                                               Fill="{StaticResource TransparentBrush}"
                                               Stroke="Black" />
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsChecked"
                                             Value="True">
                                        <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                    </Trigger>
                                    <Trigger Property="IsMouseOver"
                                             Value="True">
                                        <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                    </Trigger>
                                    <Trigger Property="IsChecked"
                                             Value="True">
                                        <Setter TargetName="MainPath"
                                                Property="Fill"
                                                Value="{StaticResource RedBrush}" />
                                    </Trigger>
                                    <Trigger Property="IsMouseOver"
                                             Value="True">
                                        <Setter TargetName="MainPath"
                                                Property="Fill"
                                                Value="{StaticResource RedBrush}" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </CheckBox.Style>
        </CheckBox>
    </Grid>

ОТВЕТЫ

Ответ 1

ДИАГНОЗ

Основываясь на коде, который вы предоставили, я воспроизвел описанную вами проблему. Предположим, что сетка имеет размер 100x200. Прежде всего, вот как выглядит сетка и с набором клипов:

Сетка без клипа Сетка с клипом

Очевидно, что результат тот же. Но вот как это выглядит, если мы добавим фон в сетку (красный - фон сетки, а синий - фон "позади" сетки):

Сетка без клипа и с фоном Сетка с клипом и фоном

Теперь мы можем ясно видеть, что здесь произошло - геометрия (примерно размер 50x100) не была автоматически масштабирована до размера сетки, а скорее поддерживался оригинальный размер, больше того, что нам хотелось бы. Вот как это выглядит, если мы изменим размер сетки в соответствии с размером геометрии:

введите описание изображения здесь

ПРЕДВАРИТЕЛЬНЫЕ

Чтобы сделать нашу работу немного легче, я извлек определение геометрической фигуры в ресурс и нормализовал его так, чтобы он имел размер 1x1, что значительно облегчит масштабирование. Итак, вот ресурсы:

<PathFigureCollection x:Key="ShoeEdgeFigures">
    M 0.5048,0
    C 0.7783,0 1,0.164 1,0.361 1,0.478 0.9218,0.582 0.8011,0.647
    L 0.7952,0.65 0.8079,0.657
    C 0.8735,0.693 0.9135,0.742 0.9135,0.795 0.9135,0.908 0.7316,1 0.5072,1
      0.2828,1 0.101,0.908 0.101,0.795 0.101,0.742 0.1409,0.693 0.2065,0.657
    L 0.2168,0.651 0.2085,0.647
    C 0.0878,0.582 0,0.478 0,0.361 0,0.164 0.2313,0 0.5048,0
    Z
</PathFigureCollection>
<PathGeometry x:Key="ShoeEdgeGeometry" Figures="{StaticResource ShoeEdgeFigures}" />

Решение

Чтобы сделать сетку выглядеть так, как мы ожидаем, нам нужно масштабировать геометрию - это можно сделать с помощью свойства Geometry.Transform. Я думаю, что для этой цели полезно определить новую геометрию. Тогда нам нужно только установить ScaleTransform в геометрии с ScaleX и ScaleY равным ширине и высоте сетки соответственно. Это потому, что начальный размер геометрии 1x1. Здесь код:

<Grid Width="100" Height="200" (...)>
    <Grid.Resources>
        <PathGeometry x:Key="StaticClipGeometry" Figures="{StaticResource ShoeEdgeFigures}">
            <PathGeometry.Transform>
                <ScaleTransform ScaleX="100" ScaleY="200" />
            </PathGeometry.Transform>
        </PathGeometry>
    </Grid.Resources>
    <Grid.Clip>
        <StaticResource ResourceKey="StaticClipGeometry" />
    </Grid.Clip>
    (...)
 </Grid>

Это, однако, несколько ограничивает, так как размер сетки должен быть постоянным и известен во время компиляции.

Чтобы геометрия клипа динамически изменялась до размера сетки, нам нужно связать свойство Geometry.Transform, и поскольку мы будем связываться с Grid.ActualWidth и Grid.ActualHeight, нам понадобится простая преобразователь:

public class SizeToScaleConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        return new ScaleTransform
        {
            ScaleX = (double)values[0],
            ScaleY = (double)values[1],
        };
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Затем определим сетку:

<Grid (...)>
    <Grid.Resources>
        <PathGeometry x:Key="DynamicClipGeometry" Figures="{StaticResource ShoeEdgeFigures}">
            <PathGeometry.Transform>
                <MultiBinding>
                    <MultiBinding.Converter>
                        <local:SizeToScaleConverter />
                    </MultiBinding.Converter>
                    <Binding RelativeSource="{RelativeSource AncestorType=Grid}"
                             Path="ActualWidth" />
                    <Binding RelativeSource="{RelativeSource AncestorType=Grid}"
                             Path="ActualHeight" />
                </MultiBinding>
            </PathGeometry.Transform>
        </PathGeometry>
    </Grid.Resources>
    <Grid.Clip>
        <StaticResource ResourceKey="DynamicClipGeometry" />
    </Grid.Clip>
    (...)
 </Grid>

И конечный результат выглядит следующим образом:

Сетка с правильным клипом

Ответ 2

Кажется, что размеры вашего пути совсем не подходят, но в качестве приемлемого обходного пути я предлагаю вам окружить ваш Grid ViewBox.

Полный код

<Window.Resources>
        <Geometry x:Key="ShoeEdgeGeometry" >
            M26.25,0.5 C40.471332,0.5 52,17.625107 52,38.75 52,51.292905 47.935695,62.425729 41.656635,69.401079 L41.349452,69.733874 42.012107,70.457698 C45.421829,74.364614 47.5,79.554564 47.5,85.25 47.5,97.400265 38.042015,107.25 26.375,107.25 14.707984,107.25 5.2499995,97.400265 5.2499991,85.25 5.2499995,79.554564 7.3281701,74.364614 10.737891,70.457698 L11.276058,69.869853 10.843364,69.401079 C4.5643053,62.425729 0.49999952,51.292905 0.5,38.75 0.49999952,17.625107 12.028667,0.5 26.25,0.5 z
        </Geometry>
        <SolidColorBrush x:Key="RedBrush" Color="Red"></SolidColorBrush>
        <SolidColorBrush x:Key="TransparentBrush" Color="Transparent"></SolidColorBrush>
    </Window.Resources>

    <Viewbox Stretch="Fill">
        <Grid Margin="0"  Clip="{StaticResource ShoeEdgeGeometry}" >
            <Grid.RowDefinitions>
                <RowDefinition Height="0.2*" />
                <RowDefinition Height="0.4*" />
                <RowDefinition Height="0.2*" />
                <RowDefinition Height="0.2*" />
                <RowDefinition Height="0.2*" />
            </Grid.RowDefinitions>
            <!-- The edge check box-->
            <CheckBox x:Name="ShoeEdgeRegion" Grid.Row="0" Grid.RowSpan="5">
                <CheckBox.Style>
                    <Style TargetType="CheckBox">
                        <Setter Property="Cursor"
                            Value="Hand" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type CheckBox}">
                                    <Grid>
                                        <Path x:Name="MainPath"
                                          Data="{StaticResource ShoeEdgeGeometry}"
                                          Fill="{StaticResource TransparentBrush}"
                                          Stroke="Black"
                                          Stretch="Fill" />
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsChecked"
                                             Value="True">
                                            <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                        </Trigger>
                                        <Trigger Property="IsMouseOver"
                                             Value="True">
                                            <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </CheckBox.Style>
            </CheckBox>
            <!-- The Toe check box-->
            <CheckBox x:Name="ShoeToeRegion"
                  Grid.Row="0">
                <CheckBox.Style>
                    <Style TargetType="CheckBox">
                        <Setter Property="Cursor"
                            Value="Hand" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type CheckBox}">
                                    <Grid>
                                        <Rectangle x:Name="MainPath"
                                               StrokeThickness="1"
                                               Fill="{StaticResource TransparentBrush}"
                                               Stroke="Black" />
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsChecked"
                                             Value="True">
                                            <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                        </Trigger>
                                        <Trigger Property="IsMouseOver"
                                             Value="True">
                                            <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                        </Trigger>
                                        <Trigger Property="IsChecked"
                                             Value="True">
                                            <Setter TargetName="MainPath"
                                                Property="Fill"
                                                Value="{StaticResource RedBrush}" />
                                        </Trigger>
                                        <Trigger Property="IsMouseOver"
                                             Value="True">
                                            <Setter TargetName="MainPath"
                                                Property="Fill"
                                                Value="{StaticResource RedBrush}" />
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </CheckBox.Style>
            </CheckBox>
            <!-- The Sole check box-->
            <CheckBox x:Name="ShoeSoleRegion"
                  Grid.Row="1"
                  Margin="0,-1,0,0">
                <CheckBox.Style>
                    <Style TargetType="CheckBox">
                        <Setter Property="Cursor"
                            Value="Hand" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type CheckBox}">
                                    <Grid>
                                        <Rectangle x:Name="MainPath"
                                               StrokeThickness="1"
                                               Fill="{StaticResource TransparentBrush}"
                                               Stroke="Black" />
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsChecked"
                                             Value="True">
                                            <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                        </Trigger>
                                        <Trigger Property="IsMouseOver"
                                             Value="True">
                                            <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                        </Trigger>
                                        <Trigger Property="IsChecked"
                                             Value="True">
                                            <Setter TargetName="MainPath"
                                                Property="Fill"
                                                Value="{StaticResource RedBrush}" />
                                        </Trigger>
                                        <Trigger Property="IsMouseOver"
                                             Value="True">
                                            <Setter TargetName="MainPath"
                                                Property="Fill"
                                                Value="{StaticResource RedBrush}" />
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </CheckBox.Style>
            </CheckBox>
            <!-- The Instep check box-->
            <CheckBox x:Name="ShoeInstepRegion"
                  Margin="0,-1,0,0"
                  Grid.Row="2">
                <CheckBox.Style>
                    <Style TargetType="CheckBox">
                        <Setter Property="Cursor"
                            Value="Hand" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type CheckBox}">
                                    <Grid>
                                        <Rectangle x:Name="MainPath"
                                               StrokeThickness="1"
                                               Fill="{StaticResource TransparentBrush}"
                                               Stroke="Black" />
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsChecked"
                                             Value="True">
                                            <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                        </Trigger>
                                        <Trigger Property="IsMouseOver"
                                             Value="True">
                                            <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                        </Trigger>
                                        <Trigger Property="IsChecked"
                                             Value="True">
                                            <Setter TargetName="MainPath"
                                                Property="Fill"
                                                Value="{StaticResource RedBrush}" />
                                        </Trigger>
                                        <Trigger Property="IsMouseOver"
                                             Value="True">
                                            <Setter TargetName="MainPath"
                                                Property="Fill"
                                                Value="{StaticResource RedBrush}" />
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </CheckBox.Style>
            </CheckBox>
            <!-- The Lower heel check box-->
            <CheckBox x:Name="ShoeLowerHeelRegion"
                  Grid.Row="3"
                  Margin="0,-1,0,0">
                <CheckBox.Style>
                    <Style TargetType="CheckBox">
                        <Setter Property="Cursor"
                            Value="Hand" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type CheckBox}">
                                    <Grid>
                                        <Rectangle x:Name="MainPath"
                                               StrokeThickness="1"
                                               Fill="{StaticResource TransparentBrush}"
                                               Stroke="Black" />
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsChecked"
                                             Value="True">
                                            <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                        </Trigger>
                                        <Trigger Property="IsMouseOver"
                                             Value="True">
                                            <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                        </Trigger>
                                        <Trigger Property="IsChecked"
                                             Value="True">
                                            <Setter TargetName="MainPath"
                                                Property="Fill"
                                                Value="{StaticResource RedBrush}" />
                                        </Trigger>
                                        <Trigger Property="IsMouseOver"
                                             Value="True">
                                            <Setter TargetName="MainPath"
                                                Property="Fill"
                                                Value="{StaticResource RedBrush}" />
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </CheckBox.Style>
            </CheckBox>
            <!-- The heel check box-->
            <CheckBox x:Name="ShoeHeelRegion"
                  Grid.Row="4"
                  Margin="0,-1,0,0">
                <CheckBox.Style>
                    <Style TargetType="CheckBox">
                        <Setter Property="Cursor"
                            Value="Hand" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type CheckBox}">
                                    <Grid>
                                        <Rectangle x:Name="MainPath"
                                               StrokeThickness="1"
                                               Fill="{StaticResource TransparentBrush}"
                                               Stroke="Black" />
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsChecked"
                                             Value="True">
                                            <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                        </Trigger>
                                        <Trigger Property="IsMouseOver"
                                             Value="True">
                                            <Setter TargetName="MainPath"
                                                Property="Stroke"
                                                Value="{StaticResource RedBrush}" />
                                        </Trigger>
                                        <Trigger Property="IsChecked"
                                             Value="True">
                                            <Setter TargetName="MainPath"
                                                Property="Fill"
                                                Value="{StaticResource RedBrush}" />
                                        </Trigger>
                                        <Trigger Property="IsMouseOver"
                                             Value="True">
                                            <Setter TargetName="MainPath"
                                                Property="Fill"
                                                Value="{StaticResource RedBrush}" />
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </CheckBox.Style>
            </CheckBox>
        </Grid>
    </Viewbox>

Результат

Результат

Надеюсь, что это сработает для вас.