Backstage ビュー

Backstage View is a feature that has been a part of Office applications since the 2007 version. This component replaces the Application Menu, conventionally called the File tab. In the new Ribbon control, the Backstage appears as the main button at the top-left corner, which when clicked opens a full-size backstage window. It contains the functionality previously found in the File menu, such as Open, Save, Save As, New, Print etc.

The C1BackstageView is a separate component and can be added at design-time from the Toolbox. The C1Ribbon control can be integrated with C1BackstageView component through the designer as well as code. The Backstage window contains the left and left bottom panes. The user can add items to both the panes in the window.

Backstage can be configured both by the designer and code. For design-time configuration, refer this topic.

The BackstageView Tab when clicked should open a collection of User Controls at runtime. This can be configured only through the code by creating instances of User Controls and assigning them to the Control property of the BackstageViewTab class. This is depicted in the code below.

Visual Basic
C#

Visual Basic

Public Class BackstageView
    Public Property Owner() As C1BackstageView
        Get
            Return m_Owner
        End Get
        Friend Set
            m_Owner = Value
        End Set
    End Property

    Private m_Owner As C1BackstageView

    Private Sub browseCaption_Click_1(sender As Object, e As EventArgs) Handles browseCaption.Click
        Dim openDialog As OpenFileDialog
        openDialog = New OpenFileDialog()
        openDialog.Title = "Browse .rtf file"
        openDialog.Filter = "Rich Text Files (*.rtf)|*.RTF"

        If openDialog.ShowDialog() = DialogResult.OK Then
            Dim rct As RichTextBox = DirectCast(DirectCast(sender, Control).TopLevelControl.Controls(1), RichTextBox)
            rct.LoadFile(openDialog.FileName)
            Owner.DroppedDown = False
        End If
    End Sub

    Private Sub browseCaption_MouseHover(sender As Object, e As EventArgs) Handles browseCaption.MouseHover
        browseCaption.Font = New Font(browseCaption.Font.Name, browseCaption.Font.SizeInPoints, FontStyle.Underline)
        browseCaption.BackColor = Color.AliceBlue
    End Sub

    Private Sub browseCaption_MouseLeave(sender As Object, e As EventArgs) Handles browseCaption.MouseLeave
        browseCaption.BackColor = Color.CornflowerBlue
        browseCaption.Font = New Font(browseCaption.Font.Name, browseCaption.Font.SizeInPoints, FontStyle.Regular)
    End Sub
End Class

public BackstageOpenView()
{
    InitializeComponent();
}
public C1BackstageView Owner { get; internal set; }

private void browseCaption_Click(object sender, EventArgs e)
{
    OpenFileDialog openDialog;
    openDialog = new OpenFileDialog();
    openDialog.Title = "Browse .rtf file";
    openDialog.Filter = "Rich Text Files (*.rtf)|*.RTF";

    if (openDialog.ShowDialog() == DialogResult.OK)
    {
        RichTextBox rct = (RichTextBox)((Control)sender).TopLevelControl.Controls[1];
        rct.LoadFile(openDialog.FileName);
        Owner.DroppedDown = false;
    }
}
private void browseCaption_MouseHover(object sender, EventArgs e)
{
    browseCaption.Font = new Font(browseCaption.Font.Name, browseCaption.Font.SizeInPoints, FontStyle.Underline);
    browseCaption.BackColor = Color.AliceBlue;

}
private void browseCaption_MouseLeave(object sender, EventArgs e)
{
    browseCaption.BackColor = Color.CornflowerBlue;
    browseCaption.Font = new Font(browseCaption.Font.Name, browseCaption.Font.SizeInPoints, FontStyle.Regular);
}

Configuring Backstage View By Code

The Backstage View can also be configured through code. The user can create an instance of C1BackstageView class. The Ribbon Buttons can be created using the RibbonButton class. Further, the backstage tab can be created using the BackstageViewTab class, which can be bound to the User Control using the Control property. The buttons and tabs can be added to the BackstageView with the LeftPaneItems property of C1BackstageView class. In order to integrate C1BackstageView with the C1Ribbon control, you can use the Owner property of C1BackstageView class.

Visual Basic
C#

Visual Basic

Public Sub New()
    InitializeComponent()
    ApplyBackstageView(Me)
End Sub

Public Sub ApplyBackstageView(form1 As Form1)
    'BackstageViewを作成します
    Dim backstageView As New C1.Win.Ribbon.C1BackstageView()
    backstageView.Text = "File"

    '新しいタブを作成します
    Dim tab = New BackstageViewTab()

    'BackstageViewのユーザーコントロールのインスタンスを作成します
    Dim view As New BackstageView()
    view.Owner = backstageView
    tab.Control = view
    tab.Text = "Open"

    'アイテムをBackStageViewに追加します
    Dim newButton As New RibbonButton("New", Image.FromFile("images\New.png"))
    Dim saveButton As New RibbonButton("Save", Image.FromFile("images\save-file-icon.png"))
    Dim closeButton As New RibbonButton("Close", Image.FromFile("images\close.jpg"))

    'リボンアイテムをBackstageViewに追加します   
    backstageView.LeftPaneItems.Add(newButton)

    'タブをBackstageViewに追加します  
    backstageView.LeftPaneItems.Add(tab)

    backstageView.LeftPaneItems.Add(saveButton)
    backstageView.LeftPaneItems.Add(closeButton)

    'ボタンに対してエベントイベントハンドラーを追加します
    AddHandler newButton.Click, AddressOf NewButton_Click
    AddHandler saveButton.Click, AddressOf SaveButton_Click
    AddHandler closeButton.Click, AddressOf CloseButton_Click

    'BackstageViewをリボンアイテムに設定します
    backstageView.Owner = C1Ribbon1
    Me.Controls.Add(C1Ribbon1)
End Sub

Private Sub NewButton_Click(sender As Object, e As System.EventArgs)
    Me.RichTextBox1.Clear()
End Sub

Private Sub SaveButton_Click(sender As Object, e As System.EventArgs)
    Dim saveDialog As New SaveFileDialog()
    saveDialog.Title = "Save rich text file"
    saveDialog.Filter = "Rich Text Files (*.rtf)|*.RTF"
    saveDialog.InitialDirectory = "C:\Users\GPCTAdmin\Desktop"
    If saveDialog.ShowDialog() = DialogResult.OK Then
        RichTextBox1.SaveFile(saveDialog.FileName)
    End If
End Sub

Private Sub CloseButton_Click(sender As Object, e As System.EventArgs)
    Me.Close()
End Sub

'RibbonFontComboBoxのSelectedIndexChangedイベントを実装します
Private Sub RibbonFontComboBox1_SelectedIndexChanged(sender As Object, e As EventArgs) Handles RibbonFontComboBox1.SelectedIndexChanged
    RichTextBox1.Font = New Font(RibbonFontComboBox1.Text, RichTextBox1.Font.Size)
End Sub

'ColorPickerのSelectedColorChangedイベントを実装します
Private Sub RibbonColorPicker1_SelectedColorChanged_1(sender As Object, e As EventArgs) Handles RibbonColorPicker1.SelectedColorChanged
    RichTextBox1.SelectionColor = RibbonColorPicker1.Color
End Sub

public Form1()
{
    InitializeComponent();
    ApplyBackstageView(this);
}

public void ApplyBackstageView(Form1 form1)
{
    
    //BackstageViewを作成します
    C1.Win.Ribbon.C1BackstageView backstageView = new C1.Win.Ribbon.C1BackstageView();
    backstageView.Text = "File";

    //BackstageViewのユーザーコントロールのインスタンスを作成します
    BackstageOpenView openView = new BackstageOpenView();
    openView.Owner = backstageView;            

    //BackStageViewの新しいタブを作成し、ビューにバインドします
    BackstageViewTab openTab = new BackstageViewTab();
    openTab.Control = openView;
    openTab.Text = "Open";            

    //BackStageViewのボタンを作成し、ボタンのイベントハンドラーを定義します
    RibbonButton newButton = new RibbonButton("New", Image.FromFile(@"images\New.png"));
    newButton.Click += NewButton_Click;

    RibbonButton saveButton = new RibbonButton("Save", Image.FromFile(@"images\save-file-icon.png"));
    saveButton.Click += SaveButton_Click;

    RibbonButton closeButton = new RibbonButton("Close", Image.FromFile(@"images\close.jpg"));
    closeButton.Click += CloseButton_Click;         

    //リボンアイテム・タブをBackstageViewに追加します        
    backstageView.LeftPaneItems.Add(newButton);            
    backstageView.LeftPaneItems.Add(openTab);
    backstageView.LeftPaneItems.Add(saveButton);            
    backstageView.LeftPaneItems.Add(closeButton);   

    //BackstageViewをリボンコントロールに設定します
    backstageView.Owner = customRibbon;

    //リボンコントロールをフォームに追加します
    this.Controls.Add(customRibbon);
    
}
private void NewButton_Click(object sender, System.EventArgs e)
{
    this.richTextBox1.Clear();
}

private void SaveButton_Click(object sender, System.EventArgs e)
{
    SaveFileDialog saveDialog = new SaveFileDialog();
    saveDialog.Title = "Save rich text file";
    saveDialog.Filter = "Rich Text Files (*.rtf)|*.RTF";
    saveDialog.InitialDirectory = @"C:\Users\GPCTAdmin\Desktop";
    if (saveDialog.ShowDialog() == DialogResult.OK)
    {
        richTextBox1.SaveFile(saveDialog.FileName);
    }
}

private void CloseButton_Click(object sender, System.EventArgs e)
{
    this.Close();
}

//RibbonFontComboBoxのSelectedIndexChangedイベントを実装します
private void ribbonFontComboBox1_SelectedIndexChanged(object sender, System.EventArgs e)
{
    richTextBox1.Font = new Font(ribbonFontComboBox1.Text, richTextBox1.Font.Size);
}

//ColorPickerのSelectedColorChangedイベントを実装します
private void ribbonColorPicker1_SelectedColorChanged(object sender, System.EventArgs e)
{
    richTextBox1.SelectionColor = ribbonColorPicker1.Color;
}