Путь переопределения управления под

Question

, связанное с принятым ответом here

У меня есть набор флажков в сетке, эти флажки стиль выглядеть части обуви. (Пятка, края, супинатор и т.д.)

Пользователь должен иметь возможность щелкнуть Грань (1 флажок), и каждый из других «регионов» отдельно

Используя сказочный ответ на связанный вопрос у меня есть что-то хорошее.

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

Я попытался установить Panel.ZIndex краевого пути, и это позволяет мне выбрать край, однако это теперь мешает мне выбирать отдельные области.

ZIndex = 0:

ZIndex = 99:

Может кто-то момент мне решение?

<Grid Width="100" Height="200"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="2*" /> 
      <RowDefinition Height="4*" /> 
      <RowDefinition Height="2*" /> 
      <RowDefinition Height="2*" /> 
      <RowDefinition Height="2*" /> 
     </Grid.RowDefinitions> 
     <Grid.Resources> 
      <PathGeometry x:Key="DynamicClipGeometry" Figures="{StaticResource ShoeEdgeFigures}"> 
       <PathGeometry.Transform> 
        <MultiBinding> 
         <MultiBinding.Converter> 
          <converters:SizeToScaleConverter /> 
         </MultiBinding.Converter> 
         <Binding Path="ActualWidth" RelativeSource="{RelativeSource AncestorType=Grid}" /> 
         <Binding Path="ActualHeight" RelativeSource="{RelativeSource AncestorType=Grid}" /> 
        </MultiBinding> 
       </PathGeometry.Transform> 
      </PathGeometry> 
     </Grid.Resources> 
     <Grid.Clip> 
      <StaticResource ResourceKey="DynamicClipGeometry" /> 
     </Grid.Clip> 
     <!-- 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}"> 
           <Border Background="Transparent" BorderThickness="0"> 
            <Path x:Name="MainPath" 
              Data="{StaticResource ShoeEdgeGeometry}" 
              Fill="Transparent" 
              IsHitTestVisible="False" 
              Stretch="Fill" 
              Stroke="Black" 
              StrokeThickness="-10" /> 
           </Border> 
           <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" 
               Fill="{StaticResource TransparentBrush}" 
               Stroke="Black" 
               StrokeThickness="1" /> 
           </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" 
               Fill="{StaticResource TransparentBrush}" 
               Stroke="Black" 
               StrokeThickness="1" /> 
           </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" 
        Grid.Row="2" 
        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" 
               Fill="{StaticResource TransparentBrush}" 
               Stroke="Black" 
               StrokeThickness="1" /> 
           </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" 
               Fill="{StaticResource TransparentBrush}" 
               Stroke="Black" 
               StrokeThickness="1" /> 
           </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" 
               Fill="{StaticResource TransparentBrush}" 
               Stroke="Black" 
               StrokeThickness="1" /> 
           </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> 

Answer 1

Решение с настройкой Panel.ZIndex является хорошим.

Ключом к успеху здесь является решающее различие между кистью Transparent и кистью null (т. Е. Никакой кистью вообще).

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

Проще говоря - Transparent Кисть невидима для человеческого глаза, но видна для мыши.

Так что вы за ним - это путь с видимым ударом с ударом и отсутствие заливки (в отличие от прозрачной заливки). Для этого вы должны изменить свой путь с помощью IsHitTestVisible="True" и Fill="{x:Null}". Кроме того, вам необходимо установить фон Border в вашем шаблоне до null или вообще отказаться от него, потому что в любом случае он не будет служить никакой цели.

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

<CheckBox x:Name="ShoeEdgeRegion" Grid.Row="0" Grid.RowSpan="5" Panel.ZIndex="1"> 
    <CheckBox.Style> 
     <Style TargetType="CheckBox"> 
      <Setter Property="Cursor" Value="Hand" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type CheckBox}"> 
         <Path x:Name="MainPath" 
           Data="{StaticResource ShoeEdgeGeometry}" 
           IsHitTestVisible="True" 
           Fill="{x:Null}" 
           Stretch="Fill" 
           Stroke="Black" 
           StrokeThickness="-10" /> 
         <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> 

Можно также пропускаются настройки Path.IsHitTestVisible и Path.Fill свойства, так как те значения по умолчанию для этих свойств.