Xaml 如果WPF中没有可用的图像，如何使文本块文本居中于带有图像和文本的按钮中

我有一个带有图像和文本块的按钮。 按钮是根据数据库中的值动态创建的。 现在，对于一个特定的值，文本是存在的，没有图像，我想水平和垂直地显示按钮中心的文本，但它不起作用

请在下面查找xaml：

<ItemsControl ItemsSource="{Binding CategoriesList}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button Width="100" Margin="5" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
                <Button.Template>
                    <ControlTemplate>
                        <Border CornerRadius="10" Background="Maroon">
                            <StackPanel Orientation="Vertical">
                                <Image Source="{Binding CategoryImagePath}" Height="50"></Image>
                                <TextBlock Text="{Binding CategoryName}" Height="20" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                            </StackPanel>
                        </Border>
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

如果没有可用的图像，我只想显示按钮上的文本，但它应该居中

如果有图像，则我会同时显示图像和文本，但当图像不可用时，文本会显示但不在中间，它会移动到按钮的顶部。

您可以使用DataTemplateSelector根据是否有图像选择不同的模板。这样的选择器可能如下所示：

public sealed class ButtonTemplateSelector : DataTemplateSelector
{
    /// <summary>
    /// Gets or sets the <see cref="DataTemplate"/> to use when we have an image.
    /// The value is set in XAML.
    /// </summary>
    public DataTemplate ImageTemplate { get; set; }

    /// <summary>
    /// Gets or sets the <see cref="DataTemplate"/> to use when we don't have an image.
    /// The value is set in XAML.
    /// </summary>
    public DataTemplate NoImageTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        Category category = item as Category;
        if (category != null)
        {
            return category.CategoryImagePath == null ? NoImageTemplate : ImageTemplate;
        }

        return base.SelectTemplate(item, container);
    }
}

public class Category
{
    public string CategoryImagePath { get; set; }

    public string CategoryName { get; set; }
}

在XAML中创建并初始化ButtonTemplateSelector资源，然后从ItemsControl中引用它：

为完整起见，窗口的隐藏代码为：

public partial class MainWindow
{
    public MainWindow()
    {
        InitializeComponent();
    }

    public IEnumerable<Category> CategoriesList { get; } = new List<Category>
        {
            new Category { CategoryName = "First", CategoryImagePath = "/Assets/Square.bmp" },
            new Category { CategoryName = "Second", CategoryImagePath = null },
        };
}

这显示如下，我想这就是你要问的：

---

还有其他选项-例如，您硬编码了图像高度。如果改为硬编码按钮高度，图像部分可能会塌陷为虚无，留下一个垂直居中的字符串。不过，这取决于你的数据……谢谢你的回答，彼得。你知道我想要什么，但如果你能帮我，我没有什么问题。当然，我会试试看。如果您喜欢这个答案，请考虑接受它。是否需要设置ItEsScript的DATACONTRONT，即使我为用户控件设置了DATACONTRONT，用户控件中有这个项控件标签。2进行所需更改后，文本也不会居中。当我调试xaml时，templateselector代码按预期工作，我是否可以调试xaml；如果它为空，它将沿着层次结构向上移动。我只需要将它设置在某个地方，就可以得到一个运行的样本——将它设置在网格上或窗口上也可以。

public partial class MainWindow
{
    public MainWindow()
    {
        InitializeComponent();
    }

    public IEnumerable<Category> CategoriesList { get; } = new List<Category>
        {
            new Category { CategoryName = "First", CategoryImagePath = "/Assets/Square.bmp" },
            new Category { CategoryName = "Second", CategoryImagePath = null },
        };
}