Pfad zwingende Kontrollen unter

Question

auf die akzeptierte Antwort Verwandte here

ich eine Reihe von Kontrollkästchen in einem Raster haben, sind diese Kontrollkästchen Stil wie die Teile eines Schuhs zu suchen. (Ferse, Rand, Spann usw.)

Der Benutzer muss in der Lage, den Edge (1 Kontrollkästchen) und jede der anderen „Regionen“ seperat

Mit dem fabelhaften Antwort in der verknüpften Frage zu klicken Ich habe habe etwas, das gut aussieht.

Allerdings kann ich die Kante nicht auswählen. Ich kann jede einzelne Region auswählen, aber diese befinden sich über der Kante, was bedeutet, dass sie ausgewählt sind, bevor das Mausereignis den Kantenpfad erreichen kann.

Ich habe versucht, den Panel.ZIndex des Kantenpfads zu setzen und dies ermöglicht mir, die Kante zu wählen, aber dies hindert mich jetzt daran, die einzelnen Regionen auszuwählen.

ZIndex = 0:

ZIndex = 99:

mir jemand eine Lösung zeigen kann?

<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

Die Lösung mit der Einstellung Panel.ZIndex ist eine gute. Der Schlüssel zum Erfolg ist hier der entscheidende Unterschied zwischen einer Bürste Transparent und einer Bürste null (d.h. überhaupt keine Bürste)

In Bezug auf die visuellen Eigenschaften sind sie gleich - Transparent Pinsel ist ohne Aussehen, so dass wir keinen Unterschied sehen. Aber in Bezug auf die Mauseingabe ist es solide, was bedeutet, dass es an Hit-Tests beteiligt ist, während es, wenn es keinen Pinsel gibt, nichts zu treffen gibt.

Um es in einfache Worte zu setzen - Transparent Bürste ist unsichtbar für das menschliche Auge, aber ist für die Maus sichtbar.

Also, was Sie suchen, ist ein Pfad mit Hit-Test sichtbaren Strich und keine Füllung (im Gegensatz zu transparenten Füllung). Um dies zu erreichen, sollten Sie Ihren Pfad mit IsHitTestVisible="True" und Fill="{x:Null}" ändern. Außerdem müssen Sie den Hintergrund der Border in Ihrer Vorlage auf null festlegen, oder löschen Sie es insgesamt, weil es ohnehin keinen Zweck erfüllen würde.

Hier ist, wie Sie Ihre Rand CheckBox Vorlage aussehen sollte:

<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> 

Sie auch da diese Standardwerte für diese Eigenschaften sind weglassen könnte Einstellung Path.IsHitTestVisible und Path.Fill Eigenschaften.