Office 2010 Help style backstage content

Jun 3, 2010 at 12:35 PM

Hello,

I am trying to replicate the Backstage Help look of office 2010, specifically the left side menu (as the right side "about" box is easy to do with standard wpf controls).

Looking at the controls available in fluent, the only one that is really close to what is there (a list of big buttons) is MenuPanel. However, there are some problems using MenuPanel:

1. I was only able to put MenuItem controls in menu panel, which cannot be configured to look like the big buttons in office help (which feature a large icon (i think 48x48), a title and a description).

Is there any way to bypass this? (maybe another item type or configure this one to look like those).

2. I found a control named GroupSeparatorMenuItem which works great between tab item headers, but it's name suggests that it should work between MenuItem items too, but it's just a blank space where I inserted it.

Am I using it wrong or there is something else to do in order to obtain the desired result (similar to the one in the tab control header).

Thanks,

Mihai

Jun 8, 2010 at 10:28 AM
Edited Jun 8, 2010 at 11:03 AM

Here's what I'm doing...

 

 

<Fluent:BackstageTabItem Header="Help">
    <Fluent:BackstageTabControl Margin="20,5,20,5">
        <Fluent:GroupSeparatorMenuItem Text="Plan-G Help and Support"/>
        <TabItem IsSelected="True">
            <TabItem.Header>
                <StackPanel Orientation="Horizontal">
                    <Image Source="Images\Help-48.png"  Width="48" Height="48" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,4,0"></Image>
                    <TextBlock >About Plan-G<LineBreak/>                                        
                        <Run Foreground="DimGray" Text="Displays the aboutbox on the right"></Run>
                    </TextBlock>
                </StackPanel>
            </TabItem.Header>
            <!-- Right-side content here -->
            <StackPanel HorizontalAlignment="Left" Margin="20,0">
                <Label FontSize="14" Foreground="DimGray" FontWeight="Bold">About Plan-G</Label>
                <src:ucAbout/>
            </StackPanel>
        </TabItem>
    </Fluent:BackstageTabControl>
</Fluent:BackstageTabItem>

The snippet just shows the first item -- the others are pretty much repetitions.

 

Jun 8, 2010 at 10:31 AM
Edited Jun 8, 2010 at 11:04 AM

Sorry, the pic didn't come out, but if you paste the url into your browser you should see how it looks

(ignore -- I fixed it :-))

 

Jun 8, 2010 at 11:08 AM

Hi, thanks for the solution.

Let me see if i get this right.

So what you are doing here is using a tab control instead of a menu, with the trick that all pages of the tab control show the same thing (the "about box"), but clicking them will do certain actions just like you would click menu items, is this correct?

If this is what you are doing, it seems indeed a nice solution for now, and maybe later on full support for menus and their separators will come.

 

Thanks again,

Mihai

Jun 8, 2010 at 8:23 PM

Almost. Each TabItem has its own display. The simplest example (from the demo) just has

 

    <Fluent:GroupSeparatorMenuItem Text="Test1"/>
            <TabItem Header="1">
                <!-- Content1 -->  
            </TabItem>
            <TabItem Header="2">
                <!-- Content2 -->
            </TabItem>
            <TabItem Header="3">
                <!-- Content3 -->
            </TabItem>
            <Fluent:GroupSeparatorMenuItem Text="Test2"/>
            <TabItem Header="4">
                <!-- Content4 -->
            </TabItem>

 

Each <!-- content--> represents whatever you want to have on the right side for that tab item. The GroupSeparatorMenuItem acts as a section header. In my example, which only showed one TabItem, the content was the about box, represented as a UserControl. Mine also shows the header expanded to hold an image as well as multi-line formatted text.

Aug 16, 2010 at 8:14 AM
Edited Aug 16, 2010 at 8:23 AM

Hello to everybody.

How can I use the GroupSeparatorMenuItem outside the RibbonTabControl. For example if I put GroupSeparatorMenuItem in other places (for example between Menu items):

<Fluent:BackstageTabItem Header="SomeText">
<StackPanel x:Uid="StackPanel_5"">
<!--It is not shown <Fluent:GroupSeparatorMenuItem Text="Title" />-->
         <Controls:CommandLinkItem  CommandText="OtherText" Image="image1.png" Command="{Binding SomeCommand}"  />
         <Controls:CommandLinkItem CommandText="SimpleText" Image="image2.png" Command="{Binding OtherCommand}" />
         <Controls:CommandLinkItem CommandText="PlainText" Image="image3.png" Command="{Binding TheCommand}" />
				
</StackPanel>
</Fluent:BackstageTabItem>

 it is not shown, the only thing I get is empty space.

thank you.

Aug 25, 2010 at 7:24 AM

How did you created the items like "new flight" plane ?

are they also simple Tabitems?

Aug 25, 2010 at 2:09 PM

For Gentlehag: The items like "New Flight Plane" are simple fluent buttons

<Fluent:Button Text="New Flight Plane" Icon="image_source_path"></Fluent:Button>
Sep 4, 2010 at 7:52 PM

Greetings,

I'm just getting started with this widget and like what I see thus far. I have an issue with the tab item technique described here for the backstage. I am using the native tab control in my app.Using the Fluent ribbon necessitated manually styling the tab control. When I use the tab technique for the backstage, I get the BackstageTabItem objects styled like the tabs in the tab control where I naturally want the default styling for them instead, as shown in tim a's example. Thoughts? Ideas? Recommendations?

Thanks

Snippet

    <Window.Resources>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid>
                            <Border Name="Border" 
                                    Background="White"
                                    BorderBrush="DarkGray"
                                    BorderThickness="1,1,1,0"
                                    CornerRadius="3,8,0,0" >
                            <ContentPresenter x:Name="ContentSite"
                                              VerticalAlignment="Center" 
                                              HorizontalAlignment="Center"
                                              ContentSource="Header"
                                              Margin="8,2,8,2"/>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" 
                                     Value="True">
                                <Setter TargetName="Border"
                                        Property="Background" 
                                        Value="White" />
                                <Setter TargetName="Border"
                                        Property="BorderBrush" 
                                        Value="Black" />
                            </Trigger>
                            <Trigger Property="IsSelected" 
                                     Value="False">
                                <Setter TargetName="Border" 
                                        Property="Background" 
                                        Value="LightGray" />
                                <Setter TargetName="Border"
                                        Property="BorderBrush" 
                                        Value="DarkGray" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
Jan 1, 2011 at 12:22 PM

Hi All,

I found this post very helpful, and just wanted to update it with corrections required for the latest Fluent code, as things have changed a little:

<Fluent:Ribbon.Menu>
<Fluent:Backstage Name="_BackStage">
        <Fluent:BackstageTabControl>
	    <Fluent:BackstageTabItem Header="Create">
		<TabControl Style="{StaticResource InnerBackstageTabControlStyle}" Margin="20,5,20,5">
					
                    <Fluent:SeparatorTabItem Header="Create"></Fluent:SeparatorTabItem>
					
                    <TabItem IsSelected="True">
			<TabItem.Header>
				<StackPanel Orientation="Horizontal">
				    <Image Source="Resources\Images\Icons\48x48-HelpIcon.png"  Width="48" Height="48" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,4,0"></Image>
				    <TextBlock >Project / Solution<LineBreak/>                                        
				        <Run Foreground="DimGray" Text="Creates a project or solution for a specific environment."></Run>
				    </TextBlock>
				</StackPanel>
		        </TabItem.Header>
                        
                        <!-- Content Here -->
                        
		        <StackPanel HorizontalAlignment="Left" Margin="20,0">
			    <Label FontSize="14" Foreground="DimGray" FontWeight="Bold">Choose a solution type from the options below:</Label>
		        </StackPanel>
		    </TabItem>
                    
		    <TabItem IsSelected="False">
		        <TabItem.Header>
			    <StackPanel Orientation="Horizontal">
			        <Image Source="Resources\Images\Icons\48x48-SolutionIcon.png"  Width="48" Height="48" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,4,0"></Image>
			        <TextBlock >Add File To Project<LineBreak/>                                        
			        <Run Foreground="DimGray" Text="Add's a file to the current active project."></Run>
			        </TextBlock>
			    </StackPanel>
		        </TabItem.Header>
		    
                        <StackPanel HorizontalAlignment="Left" Margin="20,0">
			    <Label FontSize="14" Foreground="DimGray" FontWeight="Bold">Choose a file type from the options below:</Label>
		        </StackPanel>

		    </TabItem>
	        </TabControl>
	    </Fluent:BackstageTabItem>
            <Fluent:Button Fluent:KeyTip.Keys="N" Header="New File" Click="ButtonNew_Click" Icon="Resources\Images\Icons\16x16-NewIcon.png"/>
	    <Fluent:Button Fluent:KeyTip.Keys="S" Header="Save" Click="ButtonSave_Click" Icon="Resources\Images\Icons\16x16-SaveIcon.png"/>

        </Fluent:BackstageTabControl>
    </Fluent:Backstage>
</Fluent:Ribbon.Menu>

Note the use of native TabControl with the use of InnerBackstageTabControlStyle.

<TabControl Style="{StaticResource InnerBackstageTabControlStyle}" Margin="20,5,20,5">

 

Hope you find this helpful, 

James

Jan 1, 2011 at 9:06 PM

This is my help screen:

and this is the code:

                            <Fluent:BackstageTabItem Name="BackstageHelp" Header="Help" FontSize="13.333" >
                                <Grid>
                                    <TabControl Margin="20,5,20,5" Style="{DynamicResource InnerBackstageTabControlStyle}">
                                        <Fluent:SeparatorTabItem Foreground="#FF5e5e5e" Header="Support" Width="350">
                                            <!-- Right-side content here -->
                                            <StackPanel HorizontalAlignment="Left" Margin="20,6,0,0" Width="Auto">
                                                <Image Source="Images\MHManagericon.png"  Width="128" Height="128" HorizontalAlignment="Left" Margin="0,0,4,0"/>
                                                <TabControl Style="{DynamicResource BackStageTabControlStyle1}" >
                                                    <Fluent:SeparatorTabItem FontSize="12" Header="Product Activated" HorizontalAlignment="Stretch" Width="420"/>
                                                </TabControl>
                                                <TextBlock  Margin="4,5" FontSize="12" Foreground="#FF5e5e5e" FontWeight="Bold" Text="Manufactured Housing Manager 2011"/>
                                                <TextBlock Margin="4,0" FontSize="12" Foreground="#FF5e5e5e" Text="This product contains Manufactured Housing Manager." TextWrapping="Wrap" />
                                                <TabControl Margin="4,30,0,0" Style="{DynamicResource BackStageTabControlStyle1}" >
                                                    <Fluent:SeparatorTabItem FontSize="12" Header="About Manufactured Housing Manager" HorizontalAlignment="Stretch" Width="420"/>
                                                </TabControl>
                                                <TextBlock Margin="4,5" x:Name="txtProductVersion" FontSize="12" Foreground="#FF5e5e5e" Text="This product contains Manufactured Housing Manager." TextWrapping="Wrap" />
                                                <TextBlock Margin="4,0" FontSize="12" Foreground="#FF5e5e5e" Text="© 2011 ATD Software Solutions. All rights reserved." TextWrapping="Wrap" />
                                                <!-- more stuff in here -->

                                            </StackPanel>
                                        </Fluent:SeparatorTabItem>
                                    </TabControl>
                                    <StackPanel Margin="20,40">
                                        <Button Style="{DynamicResource BackStageStyle}" HorizontalAlignment="Left" Width="345" Click="btnHelp_Click">
                                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Width="345">
                                                <Image Source="Images\help.png"  Width="64" Height="64" HorizontalAlignment="Left" />
                                                <TextBlock Margin="20,6,4,6">Manufactured Housing Manager 2011<LineBreak/>
                                                <Run Foreground="#FFa16f89" Text="Get help using ATD Software Solutions."/>
                                                </TextBlock>
                                            </StackPanel>
                                        </Button>
                                        <Button Style="{DynamicResource BackStageStyle}" HorizontalAlignment="Left" Width="345">
                                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Width="345">
                                                <Image Source="Images\started.png"  Width="64" Height="64" HorizontalAlignment="Left" />
                                                <TextBlock Margin="20,6,4,6">Getting Started<LineBreak/>
                                                <Run Foreground="#FFa16f89" Text="See what's new and find resources to help"/>
                                                <LineBreak/>
                                                <Run Foreground="#FFa16f89" Text="you learn the basics quickly."/>
                                                </TextBlock>
                                            </StackPanel>
                                        </Button>
                                        <Button Style="{DynamicResource BackStageStyle}" HorizontalAlignment="Left" Width="345">
                                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Width="345">
                                                <Image Source="Images\contact.png" Width="64" Height="64" HorizontalAlignment="Left" />
                                                <TextBlock Margin="20,6,4,6">Contact Us<LineBreak/>
                                                <Run Foreground="#FFa16f89" Text="Let us know if you need help"/>
                                                <LineBreak/>
                                                <Run Foreground="#FFa16f89" Text="or if we can make MHManager"/>
                                                <LineBreak/>
                                                <Run Foreground="#FFa16f89" Text="better."/>
                                                </TextBlock>
                                            </StackPanel>
                                        </Button>
                                        <TabControl Margin="0,5,20,5" Style="{DynamicResource InnerBackstageTabControlStyle}">
                                            <Fluent:SeparatorTabItem Foreground="#FF5e5e5e" Header="Tools for Working with MHManager" Width="350" />
                                        </TabControl>
                                        <Button Style="{DynamicResource BackStageStyle}" HorizontalAlignment="Left" Width="345" Click="BackstageOptions_Click">
                                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Width="345">
                                                <Image Source="Images\options.png"  Width="64" Height="64" HorizontalAlignment="Left" />
                                                <TextBlock Margin="20,6,4,6">Options<LineBreak/>
                                                <Run Foreground="#FFa16f89" Text="Customize language, display and other"/>
                                                <LineBreak/>
                                                <Run Foreground="#FFa16f89" Text="program settings."/>
                                                </TextBlock>
                                            </StackPanel>
                                        </Button>
                                        <Button Style="{DynamicResource BackStageStyle}" HorizontalAlignment="Left" Width="345">
                                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Width="345">
                                                <Image Source="Images\started.png"  Width="64" Height="64" HorizontalAlignment="Left" />
                                                <TextBlock Margin="20,6,4,6">Getting Started<LineBreak/>
                                                <Run Foreground="#FFa16f89" Text="See what's new and find resources to help"/>
                                                <LineBreak/>
                                                <Run Foreground="#FFa16f89" Text="you learn the basics quickly."/>
                                                </TextBlock>
                                            </StackPanel>
                                        </Button>
                                    </StackPanel>
                                </Grid>
                            </Fluent:BackstageTabItem>
and backstage style for the buttons is in a Styles Sheet:
    <Style x:Key="BackStageStyle" TargetType="{x:Type Button}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
        <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Rectangle x:Name="rectangle1" HorizontalAlignment="Stretch" Stroke="#FFF7D223" Width="Auto" Height="Auto" VerticalAlignment="Stretch" RadiusY="2.5" RadiusX="2.5" StrokeThickness="1.3" Opacity="1" Fill="#CCFFE48A"/>
                        <Rectangle x:Name="rectangle" HorizontalAlignment="Stretch" Margin="4,0,2,0" RadiusY="2.5" RadiusX="2.5" Stroke="Black" StrokeThickness="0" Width="Auto" Height="5" VerticalAlignment="Top" Fill="#44FFFFFF"/>
                        <Rectangle x:Name="rectangle2" HorizontalAlignment="Stretch" Margin="2,0" RadiusY="2.5" RadiusX="2.5" Stroke="Black" StrokeThickness="0" Width="Auto" Height="8.52" VerticalAlignment="Bottom" Fill="#56FFFFFF"/>
                        <ContentPresenter Margin="4,6,4,6" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Fill" TargetName="rectangle" Value="Transparent"/>
                            <Setter Property="Fill" TargetName="rectangle2" Value="Transparent"/>
                            <Setter Property="Stroke" TargetName="rectangle1">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFC2762B" Offset="0"/>
                                        <GradientStop Color="#FFC29E47" Offset="0.991"/>
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="StrokeThickness" TargetName="rectangle1" Value="1.3"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Visibility" TargetName="rectangle" Value="Visible"/>
                            <Setter Property="Visibility" TargetName="rectangle2" Value="Visible"/>
                            <Setter Property="Visibility" TargetName="rectangle1" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="False">
                            <Setter Property="Fill" TargetName="rectangle1">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" Opacity="0" StartPoint="0.5,0">
                                        <GradientStop Color="#FFF7D223" Offset="0"/>
                                        <GradientStop Color="#FFF7D223" Offset="0.991"/>
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Fill" TargetName="rectangle">
                                <Setter.Value>
                                    <SolidColorBrush Color="#44FFFFFF" Opacity="0"/>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Fill" TargetName="rectangle2">
                                <Setter.Value>
                                    <SolidColorBrush Color="#4CFFFFFF" Opacity="0"/>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Stroke" TargetName="rectangle1">
                                <Setter.Value>
                                    <SolidColorBrush Color="#FFF7D223" Opacity="0"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsKeyboardFocused" Value="true"/>
                        <Trigger Property="ToggleButton.IsChecked" Value="true"/>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#ADADAD"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
Hope it helps.
Jan 3, 2011 at 12:22 PM

@AdamDavis: Can you please explain me, how did you manage to create an Office 2010 like Icon? I want mine too ;)

Jan 3, 2011 at 3:39 PM
Edited Jan 3, 2011 at 3:41 PM

Of course. But you need to realize it requires a couple of tools. First I took a screenshot of Microsoft's icon while displaying it in a Windows 7 Explorer, with the icons set to extra large. Then I used photoshop to cut away the background leaving the shape. Using the magic wand tool I selected the area surrounding the icon then inversed the selection. Then I simply stroked the border with like a value of 2 on a new layer. This gave me my basic out line. The rest was just designing the inside using the gradiant tool to give me alot of the smooth professional feel to the icon. It's a lot of patience and practice with photoshop basically. After that I used Stardocks icon maker to create the icon containing all the various resized images of the same image. If you find a smaller image just doesn't quite look right when reduced that program allows you to edit individual icon size images and touch them up or insert a new refined images that looks better at that scale.

Again it's just practice and using the right tools.

Microsoft's Blend allowed me to remove the vertical separator from the Fluent Team's separator style which is what Style="{DynamicResource BackStageTabControlStyle1}" basically is.

 

Jan 3, 2011 at 7:40 PM

I tried it with Photoshop, however i am not tha capable of designing this :P With a friend of mine and Adobe Illustrator we managed to make the following from scratch (scaled down!):

 

Office 2010-like Icon

Original Icon

Jan 3, 2011 at 8:22 PM

Very nice! :)

Nov 5, 2012 at 1:12 AM

Thanks for some awesome example and effort in putting this control together.

Adam, could you please provide the styles for the ButtonFocusVisual, ButtonNormalBackground  and ButtonNormalBorder in your example above.  I am new to WPF and your ribbon control and would appreciate the help.

Thanks in advance.

Nov 5, 2012 at 8:18 PM
allann wrote:

Thanks for some awesome example and effort in putting this control together.

Adam, could you please provide the styles for the ButtonFocusVisual, ButtonNormalBackground  and ButtonNormalBorder in your example above.  I am new to WPF and your ribbon control and would appreciate the help.

Thanks in advance.

 

    <Style x:Key="ButtonFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="2"
                               SnapsToDevicePixels="true"
                               Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
                               StrokeDashArray="1 2"
                               StrokeThickness="1" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

<LinearGradientBrush x:Key="ButtonNormalBackground" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Offset="0" Color="#F3F3F3" />
        <GradientStop Offset="0.5" Color="#EBEBEB" />
        <GradientStop Offset="0.5" Color="#DDDDDD" />
        <GradientStop Offset="1" Color="#CDCDCD" />
    </LinearGradientBrush>
 <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070" />\

There you go.

Nov 6, 2012 at 9:28 PM

Thanks.