RibbonGallery and 3 lines

Ribbon for WPF Forum

Posted 10 years ago by Arthur Damen
Version: 9.2.0510
Avatar
Hi,
I want to use the Ribbongallery to show 3 lines of text.
However it shows only 2 items with large margins????

What am I doing wrong here??

                            <ribbon:RibbonGallery   MinWidth ="250" IsPreviewEnabled="False" LargeVariantColumnCount="1" MediumVariantColumnCount="1" VerticalAlignment="Top" VariantSize="Medium" VariantBehavior="NoAutoSize">
                                <ribbon:RibbonGallery.ItemsSource >
                                  <x:Array Type="{x:Type TextBlock}" >
                                    <TextBlock>Line 1</TextBlock>
                                    <TextBlock>Line 2</TextBlock>
                                    <TextBlock>Line 3</TextBlock>
                                  </x:Array>
                                </ribbon:RibbonGallery.ItemsSource>
                                <ribbon:RibbonGallery.ItemTemplate>
                                    <DataTemplate>
                                        <ribbon:GalleryItem>
                                         <Border Height="18" Grid.Column="0" BorderBrush="DarkGray" BorderThickness="1" Margin="0"  >
                                            <TextBlock FontSize="11" Text="{Binding Path=Text}" ></TextBlock>
                                         </Border>
                                        </ribbon:GalleryItem>
                                    </DataTemplate>
                                </ribbon:RibbonGallery.ItemTemplate>
                                <ribbon:RibbonGallery.PopupContent>
                                    <StackPanel>
                                       <ribbon:PopupGallery InitialColumnCount="1"
                                          ItemTemplate="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ribbon:RibbonGallery}}, Path=ItemTemplate}"                                          ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ribbon:RibbonGallery}}, Path=ItemsSource}" VariantSize="Large">
                                       </ribbon:PopupGallery>
                                    </StackPanel>
                                </ribbon:RibbonGallery.PopupContent>
                            </ribbon:RibbonGallery>

Comments (2)

Posted 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
Hi Arthur,

Several notes...
1) Do not ever set any Width, MinWidth, etc. properties on ribbon controls as it will prevent their variants from working correctly.
2) Do not set a VariantSize on a gallery explicity. The parent Group needs to be able to set the VariantSize as the Group changes variants.
3) Do not set VerticalAlignment on the gallery.
4) Your ItemsSource should not be an array of TextBlocks which then have a TextBlock in the ItemTemplate. Instead, do a string array in your ItemsSource like below.
5) Never put a GalleryItem in a gallery ItemTemplate. GalleryItems are created behind the scenes to wrap your item templates. This is the same way all ItemsControls work like ListBox makes ListBoxItems, etc.
6) The GalleryItem that RibbonGallery generates to contain your item template does add a pixel or two of padding. So you could either decrease your Border height a tad or set its Margin="-1" like I did below to get 3 rows to fit.

Here is working sample code:
<ribbon:RibbonGallery IsPreviewEnabled="False" LargeVariantColumnCount="1" MediumVariantColumnCount="1" VariantBehavior="NoAutoSize">
    <ribbon:RibbonGallery.ItemsSource >
        <x:Array Type="{x:Type sys:String}" >
            <sys:String>Line 1</sys:String>
            <sys:String>Line 2</sys:String>
            <sys:String>Line 3</sys:String>
        </x:Array>
    </ribbon:RibbonGallery.ItemsSource>
    <ribbon:RibbonGallery.ItemTemplate>
        <DataTemplate>
            <Border Height="18" Grid.Column="0" BorderBrush="DarkGray" BorderThickness="1" Margin="-1"  >
                <TextBlock FontSize="11" Text="{Binding}" ></TextBlock>
            </Border>
        </DataTemplate>
    </ribbon:RibbonGallery.ItemTemplate>
    <ribbon:RibbonGallery.PopupContent>
        <StackPanel>
            <ribbon:PopupGallery InitialColumnCount="1"
                      ItemTemplate="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ribbon:RibbonGallery}}, Path=ItemTemplate}"                                          ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ribbon:RibbonGallery}}, Path=ItemsSource}" VariantSize="Large">
            </ribbon:PopupGallery>
        </StackPanel>
    </ribbon:RibbonGallery.PopupContent>
</ribbon:RibbonGallery>


Actipro Software Support

Posted 10 years ago by Arthur Damen
Avatar
My example shows a textblock, but the finally item must contain a stackpanel with different items inside.

The width of my control is locked at a minimum size, the ribbon is not capable of changing the size of it beneith this value.

I will investigate this.

Thanks.
The latest build of this product (v2019.1 build 0681) was released 1 month ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.