如何将我的控件放在向导页面中？

Question

我正在使用WPF Toolkit from xceed，因为我想在我的 WPF 应用程序中创建一个向导。这似乎是一个不错的选择。他们的示例向导有效，但我不确定如何将自己的控件添加到向导页面。 The documentation 非常有限，只真正展示了如何更改向导的呈现方式，而不是行为。

当我将 .xaml 文件中的控件定义移动到向导中时，它会显示 Wizard should only contain WizardPages。我需要在后面的代码中做些什么吗？您可能已经猜到这是我第一次使用 WPF。

代码如下。我希望底部的边框和堆栈面板仅显示在其中一个向导页面中。目前他们只是坐在向导的顶部

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

Answer 1

您可以将Border 元素放在<xctk:WizardPage> 元素中，例如：

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