Question regarding Fluent:DropDownButton and Gallery

Oct 23, 2010 at 3:01 AM

I'm creating a DropDownButton to display a watermark Gallery. I have it pretty much laid out perfect but the user can click the background it it acts like a button. I tried to disable it by setting isHitTestVisible to false but it prevents anything inside the gallery from being selected. How can I prevent the background from being selected yet enable the items in the Gallery to be selected. Here is a sample of my code.

                    <Fluent:DropDownButton Name="buttonWatermark" Header="Watermark" Icon="Images\watermark32.png" LargeIcon="Images\watermark32.png" IsEnabled="True" VerticalAlignment="Top" >
                        <Fluent:Gallery VerticalAlignment="Top" Width="370" Height="Auto" Selectable="False">
                            <StackPanel>
                            <Fluent:GalleryGroupContainer Header="Confidential" MaxItemsInRow="3">
                                <Fluent:GalleryItem Click="confidential1_Click">
                                    <Button>
                                        <StackPanel>
                                            <Image VerticalAlignment="Top" Source="Images\confidential.png" Stretch="None" />
                                            <TextBlock Text="CONFIDENTIAL 1" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                        </StackPanel>
                                    </Button>
                                </Fluent:GalleryItem>
                                <Fluent:GalleryItem Click="confidential1_Click">
                                        <Button>
                                            <StackPanel>
                                                <Image VerticalAlignment="Top" Source="Images\confidential2.png" Stretch="None" />
                                                <TextBlock Text="CONFIDENTIAL 2" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                            </StackPanel>
                                        </Button>                                        
                                    </Fluent:GalleryItem>
                                    <Fluent:GalleryItem Click="confidential1_Click">
                                            <Button>
                                                <StackPanel>
                                                    <Image VerticalAlignment="Top" Source="Images\donotcopy1.png" Stretch="None" />
                                                    <TextBlock Text="DO NOT COPY 1" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                                </StackPanel>
                                            </Button>
                                    </Fluent:GalleryItem>
                                    <Fluent:GalleryItem Click="confidential1_Click">
                                            <Button>
                                                <StackPanel>
                                                    <Image VerticalAlignment="Top" Source="Images\donotcopy2.png" Stretch="None" />
                                                    <TextBlock Text="DO NOT COPY 2" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                                </StackPanel>
                                            </Button>
                                    </Fluent:GalleryItem>                                
                            </Fluent:GalleryGroupContainer>
                            <Fluent:GalleryGroupContainer Header="Disclaimers" MaxItemsInRow="3">
                                <Fluent:GalleryItem Click="confidential1_Click">
                                    <Button>
                                        <StackPanel>
                                            <Image VerticalAlignment="Top" Source="Images\draft1.png" Stretch="None" />
                                            <TextBlock Text="DRAFT 1" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                        </StackPanel>
                                    </Button>
                                </Fluent:GalleryItem>
                                <Fluent:GalleryItem Click="confidential1_Click">
                                    <Button>
                                        <StackPanel>
                                            <Image VerticalAlignment="Top" Source="Images\draft2.png" Stretch="None" />
                                            <TextBlock Text="DRAFT 2" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                        </StackPanel>
                                    </Button>
                                </Fluent:GalleryItem>
                                <Fluent:GalleryItem Click="confidential1_Click">
                                    <Button>
                                        <StackPanel>
                                            <Image VerticalAlignment="Top" Source="Images\sample1.png" Stretch="None" />
                                            <TextBlock Text="SAMPLE 1" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                        </StackPanel>
                                    </Button>
                                </Fluent:GalleryItem>
                                <Fluent:GalleryItem Click="confidential1_Click">
                                    <Button>
                                        <StackPanel>
                                            <Image VerticalAlignment="Top" Source="Images\sample2.png" Stretch="None" />
                                            <TextBlock Text="SAMPLE 2" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                        </StackPanel>
                                    </Button>
                                </Fluent:GalleryItem>
                            </Fluent:GalleryGroupContainer>
                            </StackPanel>
                        </Fluent:Gallery>
                    </Fluent:DropDownButton>

Oct 23, 2010 at 3:34 AM

Also, I'm trying to add a Fluent:Button object to the bottom of the DropDownButton Gallery but it's inside the scrollbars of the Gallery instead of outside below the gallery.

I've tried placing the code after the </Fluent:Gallery> command but is still displays inside the scroll window.

Any help is appreciated.

 

Oct 26, 2010 at 4:45 PM

Found my issue with the first question below is the issue I am having now.

I still can't get the Menu Item to throw my menu outside of the Gallery.

                    <Fluent:DropDownButton Name="buttonWatermark" Header="Watermark" Icon="Images\watermark32.png" LargeIcon="Images\watermark32.png" IsEnabled="True" VerticalAlignment="Top" >
                        <Fluent:Gallery x:Name="WatermarkGallery" SelectedFilter="{Binding ElementName=galleryFilterAll}" MinItemsInRow="1" MaxItemsInRow="3" Orientation="Horizontal" GroupBy="Tag" >
                            <Fluent:Gallery.Filters>
                                <Fluent:GalleryGroupFilter Title="All" Groups="Confidential,Disclaimers,Urgent" x:Name="galleryFilterAll"/>
                                <Fluent:GalleryGroupFilter Title="Confidential" Groups="Confidential"/>
                                <Fluent:GalleryGroupFilter Title="Disclaimers" Groups="Disclaimers"/>
                                <Fluent:GalleryGroupFilter Title="Urgent" Groups="Urgent"/>
                            </Fluent:Gallery.Filters>
                            
                            <!-- Confidential group items -->
                            <Border Tag="Confidential" BorderThickness="4" BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top" Source="Images\confidential.png" Stretch="None" />
                                    <TextBlock Text="CONFIDENTIAL 1" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>
                            <Border Tag="Confidential" BorderThickness="4" BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top" Source="Images\confidential2.png" Stretch="None" />
                                    <TextBlock Text="CONFIDENTIAL 2" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>
                            <Border Tag="Confidential" BorderThickness="4" BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top" Source="Images\donotcopy1.png" Stretch="None" />
                                    <TextBlock Text="DO NOT COPY 1" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>
                            <Border Tag="Confidential" BorderThickness="4" BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top" Source="Images\donotcopy2.png" Stretch="None" />
                                    <TextBlock Text="DO NOT COPY 2" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>
                            
                            <!-- Disclaimers group items -->
                            <Border Tag="Disclaimers" x:Name="Disclaimers" BorderThickness="4" BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top" Source="Images\draft1.png" Stretch="None" />
                                    <TextBlock Text="DRAFT 1" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>
                            <Border Tag="Disclaimers" BorderThickness="4" BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top" Source="Images\draft2.png" Stretch="None" />
                                    <TextBlock Text="DRAFT 2" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>
                            <Border Tag="Disclaimers" BorderThickness="4" BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top" Source="Images\sample1.png" Stretch="None" />
                                    <TextBlock Text="SAMPLE 1" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>
                            <Border Tag="Disclaimers" BorderThickness="4" BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top" Source="Images\sample2.png" Stretch="None" />
                                    <TextBlock Text="SAMPLE 2" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>
                            
                            <!-- Disclaimers group items -->
                            <Border Tag="Urgent" x:Name="Urgent" BorderThickness="4" BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top" Source="Images\asap1.png" Stretch="None" />
                                    <TextBlock Text="ASAP 1" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>
                            <Border Tag="Urgent" BorderThickness="4" BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top" Source="Images\asap2.png" Stretch="None" />
                                    <TextBlock Text="ASAP 2" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>
                            <Border Tag="Urgent" BorderThickness="4" BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top" Source="Images\urgent1.png" Stretch="None" />
                                    <TextBlock Text="URGENT 1" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>
                            <Border Tag="Urgent" BorderThickness="4" BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top" Source="Images\urgent2.png" Stretch="None" />
                                    <TextBlock Text="URGENT 2" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>
                        </Fluent:Gallery>
                        
                        <!-- Menu Items **** NOTICE THIS IS OUTSIDE OF THE GALLERY **** -->
                        <Fluent:MenuItem Name="buttonRemoveWatermark" Header="Remove Watermark" Icon="Images\removeWatermark16.png" Size="Middle" IsEnabled="True" />                        
                    </Fluent:DropDownButton>

 

I still can't get the Menu Item to throw my menu outside of the Gallery.

 

Coordinator
Oct 27, 2010 at 9:25 AM

Thank you, we fixed the wrong behavior.

Daniel

Nov 26, 2010 at 10:59 PM

Version 55677 broke this behavior again. Menu Items are once again displaying inside of Gallery instead of outside.