2016-03-31 14 views
5

私はIsOverflowOpenプロパティとHasOverflowItemsプロパティを認識していますが、アイテム(button、radiobutton ...)がToolBarOverflowPanelに移動したかどうかを調べる方法を探していますトリガーを使用してスタイルを変更します。WPF ToolBar - アイテムがToolBarOverflowPanelに設定されていることを検出しました

いくつかのUWPツールバースタイル(Windows 10 Mail、Word、Excel ...)を再現できるようにするには、これが必要です。私は正常にスタイルのほとんどを再現し、唯一の欠けているビットは、オーバーフローパネルにあるときに私のアイテムのスタイルを変更できるようにすることです。

私が再現しようとしているもののスクリーンショットでは、特別な識別子と行間のボタンが表示されているか、あふれているかに基づいてスタイルが変わっていることがはっきり分かります。 Windows 10 ToolBar Style Screenshot

答えて

5

xamlでのみ行うことはできません。コードを使用するか、またはいくつかの添付プロパティを作成する必要があります。

まずあなたが2つのプロパティを公開するヘルパークラスを作成する必要があります:あなたはスタイルの変更をトリガするために使用する

  • IsInOverflowPanel読み取り専用のプロパティここで

    はAttachedPropertyとソリューションです。
  • 有効/無効のメカニズムであるTrackParentPanelプロパティ。

    public static class ToolBarHelper 
    { 
        public static readonly DependencyPropertyKey IsInOverflowPanelKey = 
         DependencyProperty.RegisterAttachedReadOnly("IsInOverflowPanel", typeof(bool), typeof(ToolBarHelper), new PropertyMetadata(false)); 
    
        public static readonly DependencyProperty IsInOverflowPanelProperty = IsInOverflowPanelKey.DependencyProperty; 
    
        [AttachedPropertyBrowsableForType(typeof(UIElement))] 
        public static bool GetIsInOverflowPanel(UIElement target) 
        { 
         return (bool)target.GetValue(IsInOverflowPanelProperty); 
        } 
    
        public static readonly DependencyProperty TrackParentPanelProperty = 
         DependencyProperty.RegisterAttached("TrackParentPanel", typeof(bool), typeof(ToolBarHelper), 
                  new PropertyMetadata(false, OnTrackParentPanelPropertyChanged)); 
    
        public static void SetTrackParentPanel(DependencyObject d, bool value) 
        { 
         d.SetValue(TrackParentPanelProperty, value); 
        } 
    
        public static bool GetTrackParentPanel(DependencyObject d) 
        { 
         return (bool)d.GetValue(TrackParentPanelProperty); 
        } 
    
        private static void OnTrackParentPanelPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) 
        { 
         var element = d as UIElement; 
         if (element != null) 
         { 
          bool newValue = (bool)e.NewValue; 
          if (newValue) 
          { 
           element.LayoutUpdated += (s, arg) => OnControlLayoutUpdated(element); 
          } 
         } 
        } 
        private static void OnControlLayoutUpdated(UIElement element) 
        { 
         var isInOverflow = TreeHelper.FindParent<ToolBarOverflowPanel>(element) != null; 
         element.SetValue(IsInOverflowPanelKey, isInOverflow); 
        } 
    } 
    
    public static class TreeHelper 
    { 
        public static T FindParent<T>(this DependencyObject obj) where T : DependencyObject 
        { 
         return obj.GetAncestors().OfType<T>().FirstOrDefault(); 
        } 
    
        public static IEnumerable<DependencyObject> GetAncestors(this DependencyObject element) 
        { 
         do 
         { 
          yield return element; 
          element = VisualTreeHelper.GetParent(element); 
         } while (element != null); 
        } 
    } 
    

    次に、スタイルを変更する必要があるすべての項目について次の操作を行います:ここで

は実装され

<Button x:Name="DeleteButton" Content="Delete" helpers:ToolBarHelper.TrackParentPanel="True"> 
    <Button.Style> 
     <Style BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" TargetType="{x:Type Button}"> 
      <Style.Triggers> 
       <Trigger Property="helpers:ToolBarHelper.IsInOverflowPanel" Value="True"> 
        <!-- The Overflow style setters --> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </Button.Style> 
</Button> 
関連する問題