如何使WPF中没有图像的图像和文本在文本块文本的中心位置

Question

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

请看以下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> 

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

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

Answer 1

您可以使用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引用它：

<Window 
    x:Class="WPF.MainWindow" 
    x:Name="self" 
    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:wpf="clr-namespace:WPF" 
    mc:Ignorable="d" 
    Title="MainWindow" 
    Height="350" 
    Width="525"> 
    <Grid> 
     <Grid.Resources> 
      <wpf:ButtonTemplateSelector x:Key="ButtonTemplateSelector"> 
       <wpf:ButtonTemplateSelector.ImageTemplate> 
        <DataTemplate DataType="wpf:Category"> 
         <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" /> 
              <TextBlock 
               Foreground="White" 
               Text="{Binding CategoryName}" 
               Height="20" 
               HorizontalAlignment="Center" 
               VerticalAlignment="Center" /> 
             </StackPanel> 
            </Border> 
           </ControlTemplate> 
          </Button.Template> 
         </Button> 
        </DataTemplate> 
       </wpf:ButtonTemplateSelector.ImageTemplate> 
       <wpf:ButtonTemplateSelector.NoImageTemplate> 
        <DataTemplate DataType="wpf:Category"> 
         <Button 
          Width="100" 
          Margin="5" 
          HorizontalContentAlignment="Center" 
          VerticalContentAlignment="Center"> 
          <Button.Template> 
           <ControlTemplate> 
            <Border 
             CornerRadius="10" 
             Background="Maroon" 
             Height="70"> 
             <TextBlock 
              Foreground="White" 
              Text="{Binding CategoryName}" 
              Height="20" 
              HorizontalAlignment="Center" 
              VerticalAlignment="Center" /> 
            </Border> 
           </ControlTemplate> 
          </Button.Template> 
         </Button> 
        </DataTemplate> 
       </wpf:ButtonTemplateSelector.NoImageTemplate> 
      </wpf:ButtonTemplateSelector> 
     </Grid.Resources> 
     <ItemsControl 
      DataContext="{Binding ElementName=self}" 
      ItemsSource="{Binding CategoriesList}" 
      ItemTemplateSelector="{StaticResource ButtonTemplateSelector}"> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <WrapPanel/> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
     </ItemsControl> 
    </Grid> 
</Window> 

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

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 }, 
     }; 
} 

这显示了如下，我认为这是你问：