Search code examples
c#wpfwpf-controlswpftoolkit

How to put my controls within wizard pages?


I am using WPF Toolkit from xceed because I want to create a wizard in my WPF application. This seemed like a good option. Their sample wizard works but I'm unsure how I add my own controls to a wizard page. The documentation is quite limited and only really shows how to change the presentation of the wizard, rather than the behaviour.

When I move control definitions within the .xaml file to be inside the wizard, it says that Wizard should only contain WizardPages. Is it something I need to do in the code behind instead? You might have guessed that this is my first go with WPF.

Code below. I want the border & stackpanel at the bottom to only show up in one of the wizard pages. Currently they just sit on top of the wizard

<Window xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:myApp"
    xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit" 
    x:Class="myApp.MainWindow"
    mc:Ignorable="d"
    Title="MainWindow" Height="800" Width="1000" MinWidth="5">
<Window.BorderBrush>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="LightGray" Offset="0"/>
        <GradientStop Color="White" Offset="1"/>
    </LinearGradientBrush>
</Window.BorderBrush>
<Grid Margin="10">

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="767*"/>
        <ColumnDefinition Width="199*"/>
        <ColumnDefinition Width="6*"/>
    </Grid.ColumnDefinitions>
    <xctk:Wizard FinishButtonClosesWindow="True">
        <xctk:WizardPage x:Name="IntroPage" 
                               Title="Welcome to my Wizard"
                               Description="This Wizard will walk you though how to do something." />
        <xctk:WizardPage x:Name="Page1" PageType="Interior"
                               Title="Page 1"
                               Description="This is the first page in the process."
                               NextPage="{Binding ElementName=Page2}"
                               PreviousPage="{Binding ElementName=IntroPage}"/>

        <xctk:WizardPage x:Name="Page2" PageType="Interior"
                               Title="Page 2"
                               Description="This is the second page in the process"/>
        <xctk:WizardPage x:Name="LastPage" PageType="Interior"
                               Title="Last Page"
                               Description="This is the last page in the process"
                               CanFinish="True"/>
    </xctk:Wizard> 
    <Border Background="GhostWhite" BorderBrush="Silver" BorderThickness="1" CornerRadius="3,3,3,3" Grid.Column="1">
        <StackPanel Margin="10">
            <Button Content="Button 1"/>                
            <Button Content="Button 2"/>
            <TextBox Controls:TextBoxHelper.Watermark="This is a textbox" />
            <Controls:ToggleSwitch Header="Click me" />
        </StackPanel>
    </Border>  
</Grid>   


Solution

  • You could put the Border element inside the <xctk:WizardPage> element, e.g.:

    <xctk:WizardPage x:Name="LastPage" PageType="Interior"
                    Title="Last Page"
                    Description="This is the last page in the process"
                    CanFinish="True">
    
        <Border Background="GhostWhite" BorderBrush="Silver" BorderThickness="1" CornerRadius="3,3,3,3" Grid.Column="1">
            <StackPanel Margin="10">
                <Button Content="Button 1"/>
                <Button Content="Button 2"/>
                <TextBox />
            </StackPanel>
        </Border>
    
    </xctk:WizardPage>