Color Binding only works on Home Tab.

Dec 30, 2010 at 2:12 AM

When I try to put the color binding code inside any other tab besides Home the binding doesn't work.

        <Fluent:DropDownButton x:Name="buttonTextHighlightColor" HorizontalAlignment="Left" SizeDefinition="Small">
          <Fluent:DropDownButton.Icon>
            <Grid>
              <Image Source="Images\TextHighlightColor.png" Width="16" Height="16"/>
              <Rectangle VerticalAlignment ="Bottom" Height="4" Width="16" HorizontalAlignment="Center">
                <Rectangle.Fill>
                  <SolidColorBrush Color="{Binding SelectedColor, ElementName=highlightColorGallery}"/>
                </Rectangle.Fill>
              </Rectangle>
            </Grid>
          </Fluent:DropDownButton.Icon>
          <Fluent:ColorGallery Mode="HighlightColors" x:Name="highlightColorGallery" SelectedColor="Yellow" IsAutomaticColorButtonVisible="False"/>
        </Fluent:DropDownButton>

Try it yourself paste the code into any other Fluent Tab you have setup and it simply won't bind to it.

:( 

Jan 18, 2011 at 4:15 PM

Is anyone else able to replicate this? Is there a way to fix this?

I'm really wanting to put this in a different Ribbon Tab but right now I have to leave it in the Home Tab since it won't work in any other.

Jan 18, 2011 at 11:10 PM

Works for me.  I moved the same definition from the Home tab to the Insert tab, first ribbon group box, and when changing the color in the gallery the icon's rectangle fill color updates correctly.

I'm using source code revision 55865.

Jan 19, 2011 at 1:17 AM

I'm using revision 56392

Jan 19, 2011 at 3:24 AM
Edited Jan 19, 2011 at 4:28 AM

Your certain that the color of the line being drawn under the icon is the color bound to the Color Control?

This is what the screen looks like when the controls are placed in the first tab spot:

This is the exact same code just moved to be in the second tab spot:

notice in the first image how the binding data draws the line under the icon the correct color, but when the exact same code is simply moved to be in the second tab spot the binding no longer works for the icons within the formatting boxes. I am using the layout used in the Fluent sample program to display those icons. The icon that is binding properly in the second tab isn't drawn using the sample code provided by what is in the fluent app. Why am I binding there but not in the others?

Here is the complete Xml I'm using to create the Template Formatting groupbox:

                    <Fluent:RibbonGroupBox x:Name="TemplateFormatting" Header="Template Formatting" Icon="Images/FontColor.png">
                        <Fluent:RibbonToolBar>

                            <!--ToolBar Layout Definitions-->

                            <Fluent:RibbonToolBar.LayoutDefinitions>
                                <Fluent:RibbonToolBarLayoutDefinition Size="Large">
                                    <Fluent:RibbonToolBarRow>
                                        <Fluent:RibbonToolBarControlDefinition Target="comboBoxTemplateFontName" Width="105"/>
                                        <Fluent:RibbonToolBarControlDefinition Target="comboBoxTemplateFontSize" Width="90"/>
                                    </Fluent:RibbonToolBarRow>
                                    <Fluent:RibbonToolBarRow>
                                        <Fluent:RibbonToolBarControlGroupDefinition>
                                            <Fluent:RibbonToolBarControlDefinition Target="buttonTemplateHighlightColor"/>
                                            <Fluent:RibbonToolBarControlDefinition Target="buttonTemplateFontColor"/>
                                        </Fluent:RibbonToolBarControlGroupDefinition>
                                        <Fluent:RibbonToolBarControlGroupDefinition>
                                            <Fluent:RibbonToolBarControlDefinition Target="buttonTemplateGrowFont"/>
                                            <Fluent:RibbonToolBarControlDefinition Target="buttonTemplateShrinkFont"/>
                                        </Fluent:RibbonToolBarControlGroupDefinition>
                                        <Fluent:RibbonToolBarControlGroupDefinition>
                                            <Fluent:RibbonToolBarControlDefinition Target="buttonTemplateClearFormatting"/>                                        
                                        </Fluent:RibbonToolBarControlGroupDefinition>
                                    </Fluent:RibbonToolBarRow>
                                </Fluent:RibbonToolBarLayoutDefinition>
                                <Fluent:RibbonToolBarLayoutDefinition Size="Middle">
                                    <Fluent:RibbonToolBarRow>
                                        <Fluent:RibbonToolBarControlGroupDefinition>
                                            <Fluent:RibbonToolBarControlDefinition Target="buttonTemplateHighlightColor"/>
                                            <Fluent:RibbonToolBarControlDefinition Target="buttonTemplateFontColor"/>
                                        </Fluent:RibbonToolBarControlGroupDefinition>
                                        <Fluent:RibbonToolBarControlGroupDefinition>
                                            <Fluent:RibbonToolBarControlDefinition Target="buttonTemplateGrowFont"/>
                                            <Fluent:RibbonToolBarControlDefinition Target="buttonTemplateShrinkFont"/>
                                        </Fluent:RibbonToolBarControlGroupDefinition>
                                        <Fluent:RibbonToolBarControlGroupDefinition>
                                            <Fluent:RibbonToolBarControlDefinition Target="buttonTemplateClearFormatting"/>
                                        </Fluent:RibbonToolBarControlGroupDefinition>
                                    </Fluent:RibbonToolBarRow>
                                </Fluent:RibbonToolBarLayoutDefinition>
                            </Fluent:RibbonToolBar.LayoutDefinitions>

                            <!--ToolBar Controls-->

                        <Fluent:ComboBox x:Name="comboBoxTemplateFontName" MinWidth="40" Height="22" BorderBrush="Gainsboro" Foreground="#FF222222" IsTextSearchEnabled="True" ResizeMode="Vertical" ItemsSource="{Binding Source={StaticResource templateFonts}}" SizeDefinition="Small" SelectionChanged="comboBoxTemplateFontName_SelectionChanged">                            
                            <Fluent:ComboBox.ToolTip>
                                    <Fluent:ScreenTip
                                             Title="Font Name"
                                             Text="Change the Font Face."/>
                                </Fluent:ComboBox.ToolTip>
                            <ComboBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <VirtualizingStackPanel />
                                </ItemsPanelTemplate>
                            </ComboBox.ItemsPanel>
                            <ComboBox.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding}" FontFamily="{Binding}" FontSize="15" Height="20"/>
                                </DataTemplate>
                            </ComboBox.ItemTemplate>
                        </Fluent:ComboBox>
                            <Fluent:ComboBox x:Name="comboBoxTemplateFontSize" Width="105" HorizontalAlignment="Left" Height="22" BorderBrush="Gainsboro" Foreground="#FF222222" DisplayMemberPath="Text" IsEditable="False" SizeDefinition="Small" ResizeMode="Vertical" Fluent:KeyTip.Keys="FS" SelectedIndex="0" SelectionChanged="comboBoxTemplateFontSize_SelectionChanged">
                                <Fluent:ComboBox.ToolTip>
                                    <Fluent:ScreenTip
                                             Title="Font Size"
                                             Text="Change the Font Size."/>
                                </Fluent:ComboBox.ToolTip>
                                <TextBlock Text="(Default size)"/>
                                <TextBlock Text="x-small   (10)"/>
                                <TextBlock Text="small     (12)"/>
                                <TextBlock Text="medium    (14)"/>
                                <TextBlock Text="large     (18)"/>
                                <TextBlock Text="x-large   (24)"/>
                                <TextBlock Text="xx-large  (36)"/>
                            </Fluent:ComboBox>
                            <Fluent:DropDownButton x:Name="buttonTemplateHighlightColor" HorizontalAlignment="Left" SizeDefinition="Small">
                                <Fluent:DropDownButton.ToolTip>
                                    <Fluent:ScreenTip
                                             Title="Highlight Color"
                                             Text="Change the Highlight Color."/>
                                </Fluent:DropDownButton.ToolTip>
                                <Fluent:DropDownButton.Icon>
                                    <Grid>
                                        <Image Source="Images\TextHighlightColor.png" Width="16" Height="16"/>
                                        <Rectangle VerticalAlignment ="Bottom" Height="4" Width="16" HorizontalAlignment="Center">
                                            <Rectangle.Fill>
                                                <SolidColorBrush Color="{Binding SelectedColor, ElementName=templateHighlightColorGallery}"/>
                                            </Rectangle.Fill>
                                        </Rectangle>
                                    </Grid>
                                </Fluent:DropDownButton.Icon>
                                   <Fluent:ColorGallery Mode="HighlightColors" x:Name="templateHighlightColorGallery" SelectedColor="#FF366092" IsNoColorButtonVisible="False" SelectedColorChanged="templateHighlightColorGallery_SelectedColorChanged"/>
                            </Fluent:DropDownButton>
                            <Fluent:DropDownButton x:Name="buttonTemplateFontColor" HorizontalAlignment="Left" SizeDefinition="Small" MaxDropDownHeight="500">
                                <Fluent:DropDownButton.Icon>
                                    <Grid>
                                        <Image Source="Images\templateFontColor.png" Width="16" Height="16" SnapsToDevicePixels="True"/>
                                        <Rectangle VerticalAlignment ="Bottom" Height="4" Width="16" HorizontalAlignment="Center">
                                            <Rectangle.Fill>
                                                <SolidColorBrush Color="{Binding SelectedColor, ElementName=templateFontColorGallery}"/>
                                            </Rectangle.Fill>
                                        </Rectangle>
                                    </Grid>
                                </Fluent:DropDownButton.Icon>
                                <Fluent:DropDownButton.ToolTip>
                                    <Fluent:ScreenTip
                                             Title="Font Color"
                                             Text="Change the Text Color."                                             
                                             HelpTopic="http:\\atdsoftwaresolutions.com"/>
                                </Fluent:DropDownButton.ToolTip>
                                <Fluent:ColorGallery SelectedColor="White" Mode="ThemeColors" StandardColorGridRows="10" Columns="10" x:Name="templateFontColorGallery" IsNoColorButtonVisible="False" SelectedColorChanged="templateFontColorGallery_SelectedColorChanged" />
                            </Fluent:DropDownButton>
                            <Fluent:Button x:Name="buttonTemplateGrowFont" Icon="Images\GrowFont.png"  HorizontalAlignment="Left" SizeDefinition="Small" Click="buttonTemplateGrowFont_Click" >
                            <Fluent:Button.ToolTip>
                                <Fluent:ScreenTip
                                             Title="Grow Font (Ctrl+>)"
                                             Text="Increase the Font Size."/>
                            </Fluent:Button.ToolTip>
                        </Fluent:Button>
                            <Fluent:Button x:Name="buttonTemplateShrinkFont" Icon="Images\ShrinkFont.png"  HorizontalAlignment="Left" SizeDefinition="Small" Click="buttonTemplateShrinkFont_Click" >
                            <Fluent:Button.ToolTip>
                                <Fluent:ScreenTip
                                             Title="Shrink Font (Ctrl+&lt;)"
                                             Text="Decrease the Font Size."/>
                            </Fluent:Button.ToolTip>
                        </Fluent:Button>
                            <Fluent:Button x:Name="buttonTemplateClearFormatting" Icon="Images\ClearFormatting.png" HorizontalAlignment="Left" SizeDefinition="Small" Click="buttonTemplateClearFormatting_Click">
                            <Fluent:Button.ToolTip>
                                <Fluent:ScreenTip
                                             Title="Clear Formatting"
                                             Text="Clear all the formatting from the&#xa;selection, leaving only the plain&#xa;text."                                             
                                             HelpTopic="http:\\atdsoftwaresolutions.com"/>
                            </Fluent:Button.ToolTip>
                        </Fluent:Button>
                        </Fluent:RibbonToolBar>
                    </Fluent:RibbonGroupBox>
The only difference I can see is the layoutDefinitions
Jan 20, 2011 at 12:09 AM

I tried something else for you Adam - in the FluentTest project, I moved the entire "Font" RibbonGroupBox from the first tab to the second tab - and this indeed has caused the color binding to stop working.

What I did before my earlier post was only move the DropDownButton from the original group box from the first tab to another group box in the second tab.  I did not copy over any layout definitions or anything else.  Something about the layout definitions or the other code is definitely causing the color binding to stop working.

Coordinator
Jan 20, 2011 at 6:19 AM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.