如何使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 }, 
     }; 
} 

這顯示瞭如下，我認爲這是你問：