2014-03-13 1 views
1

메뉴가 있습니다. 여기 Styling MenuItem이 예상대로 작동하지 않습니다.

이 메뉴 만들기위한 XAML입니다 :

<Menu Grid.Column="0" ItemsSource="{Binding ParentButtons}" > 

    <Menu.ItemsPanel> 
     <ItemsPanelTemplate> 
      <VirtualizingStackPanel Orientation="Vertical"/> 
     </ItemsPanelTemplate> 
    </Menu.ItemsPanel> 

    <Menu.Resources> 
     <Style TargetType="{x:Type MenuItem}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type MenuItem}"> 
         <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"> 
          <Grid VerticalAlignment="Center"> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="Auto"/> 
            <ColumnDefinition Width="Auto"/> 
           </Grid.ColumnDefinitions> 
           <ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/> 
           <Path x:Name="GlyphPanel" Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/> 
           <ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
           <Popup x:Name="PART_Popup" AllowsTransparency="True" Focusable="False" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Right"> 
            <Border x:Name="SubMenuBorder" BorderBrush="#FF999999" BorderThickness="1" Background="#FFF0F0F0" Padding="2"> 
             <ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}"> 
              <Grid RenderOptions.ClearTypeHint="Enabled"> 
               <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0"> 
                <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=SubMenuBorder}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/> 
               </Canvas> 
               <!--<Rectangle Fill="#FFD7D7D7" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/>--> 
               <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/> 
              </Grid> 
             </ScrollViewer> 
            </Border> 
           </Popup> 
          </Grid> 
         </Border> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsSuspendingPopupAnimation" Value="True"> 
           <Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/> 
          </Trigger> 
          <Trigger Property="Icon" Value="{x:Null}"> 
           <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/> 
          </Trigger> 
          <Trigger Property="IsChecked" Value="True"> 
           <Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/> 
           <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/> 
          </Trigger> 
          <Trigger Property="IsHighlighted" Value="True"> 
           <Setter Property="Background" TargetName="templateRoot" Value="#3D26A0DA"/> 
           <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF26A0DA"/> 
          </Trigger> 
          <Trigger Property="IsEnabled" Value="False"> 
           <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/> 
           <Setter Property="Fill" TargetName="GlyphPanel" Value="#FF707070"/> 
          </Trigger> 
          <Trigger Property="CanContentScroll" SourceName="SubMenuScrollViewer" Value="False"> 
           <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/> 
           <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 

       </Setter.Value> 
      </Setter> 
     </Style> 
    </Menu.Resources> 

    <Menu.ItemTemplate> 
     <HierarchicalDataTemplate DataType="{x:Type model:Design_Master_Buttons}" 
         ItemsSource="{Binding Design_Master_Buttons1}"> 
      <StackPanel Orientation="Horizontal"> 
       <Path Data="{Binding ImageData}" 
         Stretch="Uniform" Width="32" Height="32" Margin="5" RenderTransformOrigin="0.5,0.5"> 

        <Path.RenderTransform> 
         <TransformGroup> 
          <TransformGroup.Children> 
           <RotateTransform Angle="0" /> 
           <ScaleTransform ScaleX="1" ScaleY="1" /> 
          </TransformGroup.Children> 
         </TransformGroup> 
        </Path.RenderTransform> 

        <Path.Resources> 
         <Style TargetType="{x:Type Path}"> 
          <Setter Property="Fill" Value="#FFFFFFFF" /> 
          <Style.Triggers> 
           <Trigger Property="MenuItem.IsMouseOver" Value="True"> 
            <Setter Property="Fill" Value="{Binding MouseOverColor}" /> 
           </Trigger> 
          </Style.Triggers> 
         </Style> 
        </Path.Resources> 

       </Path> 
       <TextBlock Text="{Binding Title}" VerticalAlignment="Center"> 
        <TextBlock.Resources> 
         <Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource {x:Type TextBlock}}"> 
          <Setter Property="Margin" Value="10,0,0,0" /> 
          <Style.Triggers> 
           <Trigger Property="Text" Value=""> 
            <Setter Property="Margin" Value="0" /> 
           </Trigger> 
          </Style.Triggers> 
         </Style> 
        </TextBlock.Resources> 
       </TextBlock> 
      </StackPanel> 
     </HierarchicalDataTemplate> 
    </Menu.ItemTemplate> 

</Menu> 

을하지만 한 문제를 가지고있다 : 나는 경로를 마우스 오버하면

(그것은 좋은 일하고있어) :

enter image description here

을 내가 mouseOver MenuItem (예상대로 작동하지 않는 경우) :

enter image description here

+0

두 번째 경우에는 어떤 종류의 동작이 필요합니까? –

+0

두 번째 경우의 동작은 다음과 같아야합니다. MenuItem을 마우스로 가리키면 경로의 배경이 첫 번째 이미지와 같이 변경되어야합니다. – Vishal

답변

3

시험해보기 : 제 경우에는 AncestorType으로 stackpanel이 작동하지 않아 Menuitem을 사용했습니다.

  <StackPanel> 
        <Path x:Name="PathData" Data="M 0 0 L 0 5 L 5 5 Z" Stretch="Uniform" Width="32" Height="32" RenderTransformOrigin="0.5,0.5"> 
         <Path.RenderTransform> 
          <TransformGroup> 
           <TransformGroup.Children> 
            <RotateTransform Angle="0"/> 
            <ScaleTransform ScaleX="1" ScaleY="1" /> 
           </TransformGroup.Children> 
          </TransformGroup> 
         </Path.RenderTransform> 
         <Path.Style> 
          <Style TargetType="{x:Type Path}"> 
           <Setter Property="Fill" Value="Transparent" /> 
           <Style.Triggers> 
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type MenuItem}},Path=IsMouseOver}" Value="True"> 
             <Setter Property="Fill" Value="Green" /> 
            </DataTrigger> 
           </Style.Triggers> 
          </Style> 
         </Path.Style> 
        </Path> 
       </StackPanel> 
+0

예, DataTrigger가 트릭을 수행합니다. 도와 주셔서 다시 한번 감사드립니다. – Vishal

+0

@Vishal 당신을 가장 환영합니다. –

2

경로의 자원에 의해 대체 수정되지 않습니다

 <Path.Resources> 
      <Style TargetType="{x:Type Path}"> 
       <Setter Property="Fill" Value="#FFFFFFFF" /> 
       <Style.Triggers> 
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=StackPanel,AncestorLevel=1}, Path=IsMouseOver}" Value="True" > 
         <Setter Property="Fill" Value="{Binding MouseOverColor}" /> 
        </DataTrigger> 

       </Style.Triggers> 
      </Style> 
     </Path.Resources> 

그리고 StackPanel의에 Background="#01000000"를 추가, IsMouseOver 속성을 감지 할 수있을 것입니다.

이제 작동합니다. 감사합니다.

+0

좋습니다. 그러나 더 완벽한 답은 Heena Patil이 제시합니다. 그래서 나는 이것을 대답으로 받아 들였습니다. 도와 주셔서 감사합니다. – Vishal

+1

우리의 appraoch는 동일하지만 AncestorType과 같은 stackpanel이 제 경우에는 작동하지 않기 때문에 +1합니다. –

관련 문제