WPF :: Stylizacja wstążkiComboBox inaczej niż wstążkiGaleria

Question

Mam RibbonComboBox, która służy do ustawiania rozmiarów czcionek. Ma RibbonGallery że wymienia różne rozmiary czcionek, wyświetlane w odpowiednim FontSize:

<r:RibbonComboBox DataContext="{x:Static vm:RibbonDataModel.FontSizeComboBoxData}" 
        SelectionBoxWidth="30"> 
    <r:RibbonGallery MaxColumnCount="1" 
        Command="{Binding Command}" 
        CommandParameter="{Binding SelectedItem}"> 
     <r:RibbonGallery.GalleryItemTemplate> 
     <DataTemplate> 
      <Grid> 
       <TextBlock Text="{Binding}" 
          FontSize="{Binding}" /> 
      </Grid> 
     </DataTemplate> 
     </r:RibbonGallery.GalleryItemTemplate> 
    </r:RibbonGallery> 
</r:RibbonComboBox> 

EDIT Oto mój ViewModel:

public static RibbonDataModel 
{ 
    public static GalleryData<object> FontSizeComboBoxData 
    { 
    get 
    { 
     lock (LockObject) 
     { 
      const string key = "Font Size"; 
      if (!DataCollection.ContainsKey(key)) 
      { 
       var value = new GalleryData<object> 
       { 
       Command = HtmlDocumentCommands.ChangeFontSize, 
       Label = "Change Font Size", 
       ToolTipDescription = "Set the font to a specific size.", 
       ToolTipTitle = "Change Font Size", 
       }; 

       var fontSizes = new GalleryCategoryData<object>(); 
       var i = 9.0; 
       while (i <= 30) 
       { 
       fontSizes.GalleryItemDataCollection.Add(i); 
       i += 0.75; 
       } 
       value.CategoryDataCollection.Add(fontSizes); 
       DataCollection[key] = value; 
      } 
      return DataCollection[key] as GalleryData<object>; 
     } 
    } 
    } 
} 

wszystko działa zgodnie z oczekiwaniami, ale po tym, jak wybrać pozycję z galerii pojawia się w RibbonComboBox z tym samym ogromnym (lub maleńkim) FontSize, jakiego używa w galerii.

Jak mogę "zresetować" FontSize wybranego elementu do wartości domyślnej, gdy jest on wyświetlany w RibbonComboBox?

Answer 1

The RibbonComboBox używa ContentPresenter pokazać wybranego elementu w RibbonGallery. Co więcej ContentPresenter przyjmuje ten sam ItemTemplate, który zadeklarowałeś w RibbonGallery. To jest "podstawowa" przyczyna Twojego problemu.

Możesz wybrać dwa rozwiązania, aby rozwiązać problem.

pierwsze rozwiązanie (najszybsza)

można po prostu ustawić właściwość swojego RibbonComboBox na "true" IsEditable. W ten sposób RibbonComboBox zamienia ContentPresenter na TextBox bez użycia ItemTemplate. Wtedy czcionka będzie miała odpowiedni rozmiar.

Drugie rozwiązanie (najlepiej jeden IMHO)

Ponieważ ItemTemplate jest stosowany jednocześnie z obu RibbonComboBox za ContentPresenter i RibbonGallery, jest to punkt, w którym możemy spróbować rozwiązać ten problem. Różnica polega na tym, że kiedy DataTemplate jest umieszczony w RibbonGallery, jego rodzicem jest RibbonGalleryItem. Więc jeśli jego rodzic nie jest RibbonGalleryItem, automatycznie wiesz, że DataTemplate jest umieszczony wewnątrz ContentPresenter. Możesz poradzić sobie z tą sytuacją, pisząc prosty DataTrigger. Zobaczmy wszystkie w kodzie.

pisałem uproszczoną ViewModel:

namespace WpfApplication1 
{ 
    public class FontSizes 
    { 
     private static FontSizes instance = new FontSizes(); 
     private List<double> values = new List<double>(); 

     public FontSizes() 
     { 
      double i = 9.0; 
      while (i <= 30) 
      { 
       values.Add(i); 
       i += 0.75; 
      } 
     } 

     public IList<double> Values 
     { 
      get 
      { 
       return values; 
      } 
     } 

     public static FontSizes Instance 
     { 
      get 
      { 
       return instance; 
      } 
     } 
    } 
} 

to jest to moim zdaniem:

<Window x:Class="WpfApplication1.Window1" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:ribbon="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon" 
     xmlns:vm="clr-namespace:WpfApplication1" 
     Title="Window1" Height="300" Width="300"> 
    <Window.Resources /> 

    <DockPanel> 
     <ribbon:RibbonComboBox Label="Select a font size:" 
        SelectionBoxWidth="62" 
        VerticalAlignment="Center"> 

     <ribbon:RibbonGallery MaxColumnCount="1"> 
       <ribbon:RibbonGalleryCategory DataContext="{x:Static vm:FontSizes.Instance}" ItemsSource="{Binding Path=Values, Mode=OneWay}"> 
        <ribbon:RibbonGalleryCategory.ItemTemplate> 
         <DataTemplate> 
          <Grid> 
           <TextBlock Name="tb" Text="{Binding}" FontSize="{Binding}" /> 
          </Grid> 

          <DataTemplate.Triggers> 
           <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ribbon:RibbonGalleryItem, AncestorLevel=1}}" 
              Value="{x:Null}"> 
            <Setter TargetName="tb" Property="FontSize" Value="12" /> 
           </DataTrigger> 
          </DataTemplate.Triggers> 
         </DataTemplate> 
        </ribbon:RibbonGalleryCategory.ItemTemplate> 
       </ribbon:RibbonGalleryCategory> 
      </ribbon:RibbonGallery> 
     </ribbon:RibbonComboBox> 
    </DockPanel> 
</Window> 

Jak widać DataTrigger jest "element", który sprawia, że ​​"brudną robotę".

Teraz wystarczy, aby zastanowić się, które rozwiązanie najbardziej Ci odpowiada.

Answer 2

Zaleca się korzystanie z biblioteki Fluent.Ribbon zamiast z taśmy Microsoft (ponieważ są one bardzo błędne, niezbyt dobrze konserwowane i obsługują tylko stare style, naprawdę zaufaj mi, że to tylko zaoszczędzi ci dużo problemów).

Wtedy po prostu można użyć tego kodu:

<fluent:ComboBox Header="Font Size" ItemsSource="{Binding FontSizes}"> 
    <fluent:ComboBox.ItemTemplate> 
     <ItemContainerTemplate> 
      <TextBlock FontSize="{Binding }" Text="{Binding }" /> 
     </ItemContainerTemplate> 
    </fluent:ComboBox.ItemTemplate> 
</fluent:ComboBox> 

i uzyskać pożądany rezultat: