Обрезание до пути в 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>
Результат
![Результат]()
Надеюсь, что это сработает для вас.
