Applying Style to Window and Dialogs

In the previous topic, you applied themes to standard Microsoft Ribbon control for WPF. In this topic, you take a step forward by applying theme-like style to the Window classes used as dialogs on a simple click. This enhancement uses the sample you created in the previous topic.

Complete the following steps to achieve styling similar to the theme applied to Find and Replace dialog box.

Add the following code in the ApplyTheme() method to update the style.

C#	Copy Code
root.Style = TryFindResource(new ComponentResourceKey(typeof(Ribbon), "RibbonWindowStyle")) as Style; if (theme != null) { this.Resources.MergedDictionaries.Add(C1Theme.GetCurrentThemeResources(theme)); var adornerLayer = AdornerLayer.GetAdornerLayer(LayoutRoot); if (adornerLayer != null) { // this will aplly theme to everything displayed in adorner, including any C1Window instances C1Theme.ApplyTheme(adornerLayer, theme); } } // add theme resource dictionaries to application resources as shown below, so that they can be accessible for other windows Application.Current.Resources.MergedDictionaries.Clear(); Application.Current.Resources.MergedDictionaries.Add(theme.GetNewResourceDictionary()); Application.Current.Resources.MergedDictionaries.Add(ribbonTheme.GetNewResourceDictionary());

Copy Code

root.Style = TryFindResource(new ComponentResourceKey(typeof(Ribbon), "RibbonWindowStyle")) as Style;
if (theme != null)
{
    this.Resources.MergedDictionaries.Add(C1Theme.GetCurrentThemeResources(theme));
    var adornerLayer = AdornerLayer.GetAdornerLayer(LayoutRoot);
    if (adornerLayer != null)
    {
        // this will aplly theme to everything displayed in adorner, including any C1Window instances
        C1Theme.ApplyTheme(adornerLayer, theme);
    }
}

// add theme resource dictionaries to application resources as shown below, so that they can be accessible for other windows
Application.Current.Resources.MergedDictionaries.Clear();
Application.Current.Resources.MergedDictionaries.Add(theme.GetNewResourceDictionary());
Application.Current.Resources.MergedDictionaries.Add(ribbonTheme.GetNewResourceDictionary());

Add the find_Click() and replace_Click() event handlers in the Event Handlers section of the code.

C#	Copy Code
private void find_Click(object sender, RoutedEventArgs e) { FindReplaceDialog frd = new FindReplaceDialog(); // assign window style frd.Style = TryFindResource(typeof(Window)) as Style; frd.ShowDialog(); } private void replace_Click(object sender, RoutedEventArgs e) { FindReplaceDialog frd = new FindReplaceDialog(1); // assign window style frd.Style = TryFindResource(typeof(Window)) as Style; frd.ShowDialog(); }

Copy Code

private void find_Click(object sender, RoutedEventArgs e)
{
    FindReplaceDialog frd = new FindReplaceDialog();
    // assign window style
    frd.Style = TryFindResource(typeof(Window)) as Style;
    frd.ShowDialog();
}

private void replace_Click(object sender, RoutedEventArgs e)
{
    FindReplaceDialog frd = new FindReplaceDialog(1);
    // assign window style
    frd.Style = TryFindResource(typeof(Window)) as Style;
    frd.ShowDialog();
}

Add a XAML Window to your project i.e. FindReplaceDialog.xaml to initialize Find and Replace dialogs.

Add the following code in the FindReplaceDialog.xaml file.

XAML	Copy Code
<Window x:Class="RibbonThemes.FindReplaceDialog" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Find and Replace" MinHeight="242" MinWidth="480" Width="480" Height="242" WindowStartupLocation="CenterScreen" Topmost="True" xmlns:shell="clr-namespace:System.Windows.Shell;assembly=PresentationFramework" xmlns:ribbon="clr-namespace:System.Windows.Controls.Ribbon;assembly=System.Windows.Controls.Ribbon"> <Grid VerticalAlignment="Stretch"> <TabControl Name="_tab" SelectionChanged="_tab_SelectionChanged" VerticalAlignment="Stretch" > <TabItem Header="Find" /> <TabItem Header="Replace" /> </TabControl> <DockPanel Margin="0,24,0,0"> <Grid DockPanel.Dock="Top" Margin="5,5,5,0" > <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="100"/> <ColumnDefinition /> </Grid.ColumnDefinitions> <Label Content="Find what:" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center"/> <ComboBox IsEditable="True" Grid.Row="0" Grid.Column="1" Margin="5"/> <Label Name="_lbReplace" Content="Replace with:" Grid.Row="1" Grid.Column="0" VerticalAlignment="Center"/> <ComboBox Name="_comboReplace" IsEditable="True" Grid.Row="1" Grid.Column="1" Margin="5"/> </Grid> <StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" Margin="5,0,5,0" HorizontalAlignment="Right" > <Button Name="_btnReplaceAll" Content="Replace All" Width="75" Height="25" Margin="5"/> <Button Name="_btnReplace" Content="Replace" Width="75" Height="25" Margin="5"/> <Button Content="Find All" Width="75" Height="25" Margin="20,5,5,5"/> <Button Content="Find Next" Width="75" Height="25" Margin="5" /> <Button Name="_btnClose" Content="Close" Width="75" Height="25" Margin="20,5,0,5" Click="_btnClose_Click"/> </StackPanel> <Grid Margin="5,5,5,0" > <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Label Content="Within:" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center"/> <ComboBox Width="90" Grid.Row="0" Grid.Column="1" Margin="5"> <ComboBoxItem Content="Sheet" IsSelected="True"/> <ComboBoxItem Content="Workbook"/> </ComboBox> <CheckBox Grid.Row="0" Grid.Column="2" Content="Match case" VerticalAlignment="Center"/> <Label Content="Search:" Grid.Row="1" Grid.Column="0" VerticalAlignment="Center"/> <ComboBox Width="90" Grid.Row="1" Grid.Column="1" Margin="5"> <ComboBoxItem Content="By Rows" IsSelected="True"/> <ComboBoxItem Content="By Columns"/> </ComboBox> <CheckBox Grid.Row="1" Grid.Column="2" Content="Match entire cell contents" VerticalAlignment="Center"/> </Grid> </DockPanel> </Grid> </Window>

XAML

Copy Code

    <Window x:Class="RibbonThemes.FindReplaceDialog"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Find and Replace" MinHeight="242" MinWidth="480" Width="480" Height="242"
        WindowStartupLocation="CenterScreen" Topmost="True" 
        xmlns:shell="clr-namespace:System.Windows.Shell;assembly=PresentationFramework"
        xmlns:ribbon="clr-namespace:System.Windows.Controls.Ribbon;assembly=System.Windows.Controls.Ribbon">
    <Grid VerticalAlignment="Stretch">
        <TabControl Name="_tab" SelectionChanged="_tab_SelectionChanged" VerticalAlignment="Stretch" >
            <TabItem Header="Find" />
            <TabItem Header="Replace" />
        </TabControl>
        <DockPanel Margin="0,24,0,0">
            <Grid DockPanel.Dock="Top" Margin="5,5,5,0" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100"/>
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <Label Content="Find what:" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center"/>
                <ComboBox IsEditable="True" Grid.Row="0" Grid.Column="1" Margin="5"/>

                <Label Name="_lbReplace" Content="Replace with:" Grid.Row="1" Grid.Column="0" VerticalAlignment="Center"/>
                <ComboBox Name="_comboReplace" IsEditable="True" Grid.Row="1" Grid.Column="1" Margin="5"/>
            </Grid>

            <StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" Margin="5,0,5,0" HorizontalAlignment="Right" >
                <Button Name="_btnReplaceAll" Content="Replace All" Width="75" Height="25" Margin="5"/>
                <Button Name="_btnReplace" Content="Replace" Width="75" Height="25" Margin="5"/>
                <Button Content="Find All" Width="75" Height="25" Margin="20,5,5,5"/>
                <Button Content="Find Next" Width="75" Height="25" Margin="5" />
                <Button Name="_btnClose" Content="Close" Width="75" Height="25" Margin="20,5,0,5" Click="_btnClose_Click"/>
            </StackPanel>

            <Grid Margin="5,5,5,0" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <Label Content="Within:" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center"/>
                <ComboBox Width="90" Grid.Row="0" Grid.Column="1" Margin="5">
                    <ComboBoxItem Content="Sheet" IsSelected="True"/>
                    <ComboBoxItem Content="Workbook"/>
                </ComboBox>
                <CheckBox Grid.Row="0" Grid.Column="2" Content="Match case" VerticalAlignment="Center"/>

                <Label Content="Search:" Grid.Row="1" Grid.Column="0" VerticalAlignment="Center"/>
                <ComboBox Width="90" Grid.Row="1" Grid.Column="1" Margin="5">
                    <ComboBoxItem Content="By Rows" IsSelected="True"/>
                    <ComboBoxItem Content="By Columns"/>
                </ComboBox>
                <CheckBox Grid.Row="1" Grid.Column="2" Content="Match entire cell contents" VerticalAlignment="Center"/>
            </Grid>
        </DockPanel>

    </Grid>
</Window>

Now add the interaction logic for FindReplaceDialog.xaml in FindReplaceDialog.xaml.cs as follows.

C#	Copy Code
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Shapes; namespace RibbonThemes { /// <summary> /// Interaction logic for FindReplaceDialog.xaml /// </summary> public partial class FindReplaceDialog : Window { public FindReplaceDialog() { InitializeComponent(); InitializeCommandBindings(); } public FindReplaceDialog(int index) { InitializeComponent(); InitializeCommandBindings(); _tab.SelectedIndex = index; } #region Events handler private void _tab_SelectionChanged(object sender, SelectionChangedEventArgs e) { var tabControl = sender as TabControl; if (tabControl != null) { if (tabControl.SelectedIndex != 0) { _btnReplace.Visibility = Visibility.Visible; _btnReplaceAll.Visibility = Visibility.Visible; _lbReplace.Visibility = Visibility.Visible; _comboReplace.Visibility = Visibility.Visible; } else { _btnReplace.Visibility = Visibility.Hidden; _btnReplaceAll.Visibility = Visibility.Hidden; _lbReplace.Visibility = Visibility.Hidden; _comboReplace.Visibility = Visibility.Hidden; } } } private void _btnClose_Click(object sender, RoutedEventArgs e) { Close(); }

Copy Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace RibbonThemes
{
    /// <summary>
    /// Interaction logic for FindReplaceDialog.xaml
    /// </summary>
    public partial class FindReplaceDialog : Window
    {
        public FindReplaceDialog()
        {
            InitializeComponent();
            InitializeCommandBindings();
        }

        public FindReplaceDialog(int index)
        {
            InitializeComponent();
            InitializeCommandBindings();
            _tab.SelectedIndex = index;
        }

        #region Events handler
        private void _tab_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var tabControl = sender as TabControl;

            if (tabControl != null)
            {
                if (tabControl.SelectedIndex != 0)
                {
                    _btnReplace.Visibility = Visibility.Visible;
                    _btnReplaceAll.Visibility = Visibility.Visible;
                    _lbReplace.Visibility = Visibility.Visible;
                    _comboReplace.Visibility = Visibility.Visible;
                }
                else
                {
                    _btnReplace.Visibility = Visibility.Hidden;
                    _btnReplaceAll.Visibility = Visibility.Hidden;
                    _lbReplace.Visibility = Visibility.Hidden;
                    _comboReplace.Visibility = Visibility.Hidden;
                }
            }
        }

        private void _btnClose_Click(object sender, RoutedEventArgs e)
        {
            Close();
        }

Run the sample and click on Find or Replace options appearing under the File & Select drop-down menu in the ribbon toolbar. You will notice that the Find and Replace dialogs render with styling similar to the theme applied to the main window.