WPF中点击Upload PDF按钮后，如何基于现有XAML创建相同样式的文件容器

要实现每次上传PDF后生成和现有FileContentHolder外观完全一致的新容器，最合理的做法是把这个重复的UI结构封装成可复用的UserControl，而不是直接复制XAML元素——这样不仅能保证外观一致，还方便后续维护和扩展。下面是具体步骤：

1. 创建独立的PDF项UserControl #

先把你现有FileContentHolder里的UI结构提取出来，做成一个名为PDFItemControl的UserControl：

PDFItemControl.xaml #

<UserControl x:Class="ModernDesign.MVVM.View.PDFItemControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="130" d:DesignWidth="192">
    <StackPanel>
        <Border Width="110" Height="105" HorizontalAlignment="Center" Background="#844eff" CornerRadius="10">
            <Button x:Name="OpenPDF" Width="45" Margin="0,75,0,15" HorizontalAlignment="Center" Background="White" Cursor="Hand">
                <Button.Resources>
                    <Style TargetType="Border">
                        <Setter Property="CornerRadius" Value="5" />
                    </Style>
                </Button.Resources>
                <TextBlock HorizontalAlignment="Center" FontSize="9" Foreground="#3b3939" Text="Open" />
            </Button>
        </Border>
        <TextBlock x:Name="FileNameHolder" Margin="0,5,0,0" HorizontalAlignment="Center" FontFamily="/Fonts/#TiroGurmukhi" FontSize="12" Foreground="White" 
                   Text="{Binding FileName}" />
    </StackPanel>
</UserControl>

PDFItemControl.xaml.cs #

这里用依赖属性来暴露文件名和文件路径，同时内置打开文件的逻辑，让每个容器独立处理自己的操作：

using System.Diagnostics;
using System.Windows;
using System.Windows.Controls;

namespace ModernDesign.MVVM.View
{
    public partial class PDFItemControl : UserControl
    {
        // 定义文件名依赖属性，用于绑定UI
        public static readonly DependencyProperty FileNameProperty =
            DependencyProperty.Register(nameof(FileName), typeof(string), typeof(PDFItemControl), new PropertyMetadata("FileName"));

        // 定义文件路径依赖属性
        public static readonly DependencyProperty FilePathProperty =
            DependencyProperty.Register(nameof(FilePath), typeof(string), typeof(PDFItemControl));

        public string FileName
        {
            get => (string)GetValue(FileNameProperty);
            set => SetValue(FileNameProperty, value);
        }

        public string FilePath
        {
            get => (string)GetValue(FilePathProperty);
            set => SetValue(FilePathProperty, value);
        }

        public PDFItemControl()
        {
            InitializeComponent();
            DataContext = this;
            OpenPDF.Click += OpenPDF_Click;
        }

        private void OpenPDF_Click(object sender, RoutedEventArgs e)
        {
            if (!string.IsNullOrEmpty(FilePath))
            {
                using var process = new Process();
                process.StartInfo = new ProcessStartInfo(FilePath) { UseShellExecute = true };
                process.Start();
            }
        }
    }
}

2. 修改LibraryView的布局 #

把原来的FileContentHolder替换成一个WrapPanel（或者ItemsControl），用来容纳多个PDF项：

修改后的LibraryView.xaml #

<UserControl x:Class="ModernDesign.MVVM.View.LibraryView"
             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:local="clr-namespace:ModernDesign.MVVM.View"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             d:DesignHeight="460"
             d:DesignWidth="800"
             mc:Ignorable="d">
    <StackPanel>
        <TextBlock Margin="0,20,0,0"
                   HorizontalAlignment="Center"
                   FontFamily="/Fonts/#TiroGurmukhi"
                   FontSize="28"
                   Foreground="White"
                   Text="Your PDF Library" />
        <StackPanel Margin="0,10,0,0" HorizontalAlignment="Center" Orientation="Horizontal">
            <Button x:Name="UploadButton"
                    Width="70"
                    Background="White"
                    Click="UploadFileToLibrary"
                    Content="Upload PDF"
                    Cursor="Hand">
                <Button.Resources>
                    <Style TargetType="Border">
                        <Setter Property="CornerRadius" Value="5" />
                    </Style>
                </Button.Resources>
            </Button>
        </StackPanel>
        <!-- 用WrapPanel自动排列多个PDF容器，支持换行 -->
        <WrapPanel x:Name="PDFContainer" Margin="10" HorizontalAlignment="Center" Orientation="Horizontal" />
    </StackPanel>
</UserControl>

3. 修改上传逻辑，动态添加新容器 #

现在在上传文件的方法里，创建PDFItemControl的实例，设置好文件名和路径，然后添加到容器中：

修改后的LibraryView.xaml.cs #

using System.IO;
using System.Windows;
using System.Windows.Controls;

namespace ModernDesign.MVVM.View
{
    public partial class LibraryView : UserControl
    {
        public LibraryView()
        {
            InitializeComponent();
        }

        public void UploadFileToLibrary(object sender, RoutedEventArgs e)
        {
            var openFileDialog = new Microsoft.Win32.OpenFileDialog();
            openFileDialog.Filter = "pdf files (*.pdf)|*.pdf|All files (*.*)|*.*";
            
            if (openFileDialog.ShowDialog() == true)
            {
                string filePath = openFileDialog.FileName;
                string fileName = Path.GetFileNameWithoutExtension(filePath);

                // 创建新的PDF项容器
                var newPDFItem = new PDFItemControl
                {
                    FileName = fileName,
                    FilePath = filePath,
                    Margin = new Thickness(10) // 给每个容器添加间距，避免拥挤
                };

                // 添加到容器中展示
                PDFContainer.Children.Add(newPDFItem);
            }
        }
    }
}

为什么不直接复制XAML元素？ #

如果直接在代码里手动创建Border、Button、TextBlock这些元素，不仅代码冗余，后期要修改外观（比如改颜色、字体）时，需要修改所有创建元素的地方，维护成本很高。而用UserControl的方式，只需要修改一次UserControl的XAML，所有实例都会同步更新，更符合WPF的设计理念。

另外，这种方式还解决了你原来代码里的一个问题：原来的globalFilepath会被新上传的文件覆盖，导致点击任何"Open"按钮都会打开最新的文件。现在每个PDF容器都保存自己的文件路径，点击时只会打开对应的文件。

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