Xamarin技术求助：导航栏顶部按钮实现及UI组件复用方案

嘿，我来帮你搞定这两个XAML的需求，这俩场景在WPF/UWP开发里挺常见的，咱们一个个来拆解：

首先得捋清楚页面的布局结构，核心思路是用布局容器（比如Grid）把页面分成不同区域，把红色按钮区放在导航栏的上方。这里给你一个通用的实现示例，假设你用的是常见的NavigationView作为导航栏：

<Grid>
    <!-- 定义两行：第一行是红色按钮区，第二行是导航栏+内容区 -->
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/> <!-- 高度自适应按钮大小 -->
        <RowDefinition Height="*"/> <!-- 剩余空间全给下面的导航栏 -->
    </Grid.RowDefinitions>

    <!-- 红色区域的按钮组 -->
    <StackPanel Grid.Row="0" 
                Background="Red" 
                Orientation="Horizontal" 
                Padding="15 8" 
                HorizontalAlignment="Right">
        <Button Content="新增" Margin="0 0 12 0" Style="{StaticResource AccentButtonStyle}"/>
        <Button Content="设置" Style="{StaticResource DefaultButtonStyle}"/>
    </StackPanel>

    <!-- 你的导航栏 -->
    <NavigationView Grid.Row="1" x:Name="MainNav">
        <!-- 导航栏的菜单、内容区域等 -->
    </NavigationView>
</Grid>

如果你的导航栏是AppBar或者其他控件，逻辑也是一样的：先划分出导航栏上方的独立区域，再在里面放置按钮。你可以根据实际需求调整按钮的样式、布局方向（横向/纵向）或者对齐方式。

对于结构重复的(1,2,3)部分，最优雅的方式是封装成自定义UserControl，把重复的UI结构写一次，然后通过依赖属性暴露可修改的标题（或者其他需要动态调整的属性），这样就能在XAML里重复引用，还能灵活修改标题。

步骤1：创建自定义UserControl #

1. 在项目里新增一个UserControl（比如命名为RepeatedSection.xaml）
2. 在UserControl的XAML里编写你的重复结构，这里用一个带标题的卡片示例：

<UserControl x:Class="YourProjectName.RepeatedSection"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- 重复的结构：带标题的容器 -->
    <Border BorderBrush="#E0E0E0" BorderThickness="1" CornerRadius="6" Padding="12" Width="280" Margin="8">
        <StackPanel>
            <!-- 绑定自定义的标题属性 -->
            <TextBlock Text="{Binding SectionTitle, RelativeSource={RelativeSource AncestorType=UserControl}}"
                       FontSize="16" FontWeight="SemiBold" Margin="0 0 0 10"/>
            <!-- 这里是你重复结构里的其他内容，比如输入框、列表、按钮等 -->
            <TextBox PlaceholderText="请输入内容"/>
            <Button Content="确认" Margin="0 10 0 0" HorizontalAlignment="Right"/>
        </StackPanel>
    </Border>
</UserControl>

3. 打开UserControl的后台代码（RepeatedSection.xaml.cs），添加依赖属性来接收外部传入的标题：

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace YourProjectName
{
    public sealed partial class RepeatedSection : UserControl
    {
        public RepeatedSection()
        {
            this.InitializeComponent();
        }

        // 定义SectionTitle依赖属性，允许外部绑定或直接设置
        public string SectionTitle
        {
            get { return (string)GetValue(SectionTitleProperty); }
            set { SetValue(SectionTitleProperty, value); }
        }

        public static readonly DependencyProperty SectionTitleProperty =
            DependencyProperty.Register("SectionTitle", typeof(string), typeof(RepeatedSection), new PropertyMetadata("默认标题"));
    }
}

步骤2：在主页面里引用这个UserControl #

现在你只需要在主页面的XAML里引入命名空间，然后重复引用这个控件，通过SectionTitle设置不同的标题即可：

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:YourProjectName"> <!-- 引入自定义控件的命名空间 -->

    <StackPanel Orientation="Horizontal" Padding="20">
        <!-- 引用控件，设置标题为"部分1" -->
        <local:RepeatedSection SectionTitle="部分1"/>
        <!-- 引用控件，设置标题为"部分2" -->
        <local:RepeatedSection SectionTitle="部分2"/>
        <!-- 引用控件，设置标题为"部分3" -->
        <local:RepeatedSection SectionTitle="部分3"/>
    </StackPanel>
</Page>

这样一来，你只需要维护一次重复结构的代码，后续如果要修改样式或者逻辑，只改UserControl就行，所有引用的地方都会同步更新，完美避免重复代码。

如果你的重复结构是动态生成的（比如从数据源读取标题），还可以结合ItemsControl和DataTemplate来实现，但UserControl的方式对于固定次数的复用更直观，非常适合你的场景。

内容的提问来源于stack exchange，提问作者Aya Amer