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>
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>