xaml引用包含其子元素的元素

Question

我有幾頁包含相同的邊框及其子元素。 每頁都有

<Border Grid.Column="1" Style="{StaticResource InstructionBox}" x:name="staticBorder">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="5*"/>
            <ColumnDefinition Width="5*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition Height="20"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Button Style="{StaticResource OnlyContentStyle}" Grid.Row="0" Grid.Column="0"
                Click="Instruction_Click">
            <Border >
                <TextBlock Style="{StaticResource InstructionStyle}">
                </TextBlock>
            </Border>
        </Button>

        <Button Style="{StaticResource OnlyContentStyle}" Grid.Row="0" Grid.Column="1"
                Click="Logs_Click">
            <Border >
                <TextBlock Style="{StaticResource LogStyle}">
                </TextBlock>
            </Border>
        </Button>
        <Border Grid.Row="2" Grid.ColumnSpan="2" x:Name="InstructionBorder">
            <StackPanel x:Name="PanelInstructions" Style="{StaticResource InstructionTextStyle}">
            </StackPanel>
        </Border>
    </Grid>
</Border>

有沒有辦法在我所有頁面上都引用此邊框？

謝謝

Answer 1

不，沒有直接的方法。 XAML僅允許元素存在於可視樹上的單個位置。 為此，您需要將邊框轉換為用戶控件。 有幾種方法可以做到這一點。 在下面的示例中，我使用了依賴項屬性來為后面的用戶控件代碼中的第一個按鈕提供可變內容。 對於click事件，建議將按鈕Command綁定到ICommand實現，但是您需要為此執行MVVM。 此示例改為添加RoutedEventHandler。

public static readonly DependencyProperty InstructionButtonContentProperty = DependencyProperty.Register(
    "InstructionButtonContent", typeof(FrameworkElement), typeof(InstructionBoxControl), new PropertyMetadata(default(FrameworkElement)));

public FrameworkElement InstructionButtonContent
{
    get { return (FrameworkElement) GetValue(InstructionButtonContentProperty); }
    set { SetValue(InstructionButtonContentProperty, value); }
}

public event RoutedEventHandler InstructionButtonClicked;

public InstructionBoxControl()
{
    InitializeComponent();
}

private void InstructionButtonClick(object sender, RoutedEventArgs e)
{
    InstructionButtonClicked?.Invoke(sender, e);
}

大多數情況下，您可以將邊框粘貼到用戶控件的XAML中。 然后，您需要將動態部件綁定到用戶控件的DependencyProperties。 您還可以在上面的代碼中連接按鈕的click事件，調用RoutedEventHandler。

<Border >
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="5*" />
            <ColumnDefinition Width="5*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="20" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Button Grid.Row="0"
                Grid.Column="0"
                Click="InstructionButtonClick">
            <Border>
                <ContentPresenter Content="{Binding Path=InstructionButtonContent, RelativeSource={RelativeSource AncestorType={x:Type local:InstructionBoxControl}}}"/>
            </Border>
        </Button>

然后，您可以在任何頁面上使用新的UserControl代替邊框，如下所示：

<local:InstructionBoxControl InstructionButtonClicked="InstructionBoxControl_OnInstructionButtonClicked">
    <local:InstructionBoxControl.InstructionButtonContent>
        <TextBlock>Instructions</TextBlock>
    </local:InstructionBoxControl.InstructionButtonContent>
</local:InstructionBoxControl>

另一個按鈕和satckpanel應該類似地工作。