Question

我想创建包含文字和图片的标签项

我发现了this问题，但由于Controls:MetroImage已过时，因此不再相关。

MetroDemo.exe提供了如何使用TabControl的示例，但没有演示如何做我正在尝试做的事情。

有人有建议吗？

Answer 1

MahApps只是扩展或重新设置现有的WPF控件。有些人没有意识到的是，你想做的一切都是可能的，没有做任何特别的事情。

TabItem.Header属性为object，并使用ContentPresenter进行样式设置。这意味着你可以自由地做这样的事情：

 <TabItem>
     <TabItem.Header>
         <Grid>
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="Auto"/>
                 <ColumnDefinition/>
             </Grid.ColumnDefinitions>
             <Image Height="20" Width="20" Source="Resources/myimg.png"/>
             <TextBlock Grid.Column="1">Hello World!</TextBlock>
         </Grid>
     </TabItem.Header>
 </TabItem>

在MahApps预发行版（1.3.0+）中引入了一个新的ModernUIPackIcon和变体，它极大地简化了使用当前MahApps.Resources包中的预打包图标。如果您只想使用其中一个，则可以替换Image元素。

Answer 2

也许我来晚了，但这就是我的做法，并且效果很好。

<TabItem  HorizontalAlignment="Center" VerticalAlignment="Bottom" FontFamily="Calibri" FontSize="8">
            <TabItem.HeaderTemplate>
                <ItemContainerTemplate>
                    <StackPanel Orientation="Vertical">
                        <icons:PackIconModern Width="16" Height="16" Kind="ColumnThree" HorizontalAlignment="Center"/>
                        <TextBlock FontSize="12">Columns</TextBlock>
                    </StackPanel>
                </ItemContainerTemplate>
            </TabItem.HeaderTemplate>
        </TabItem>

输出为-

Answer 3

由于接受的答案“重置”了主题，我找到了一个保留样式的解决方案。这是通过使用 ContentPresenter 和 Headertemplate 来完成的。

（DockPanel 可以切换到网格。）

<TabItem >
    <TabItem.HeaderTemplate>
        <DataTemplate>
            <DockPanel>
                <iconPacks:PackIconMaterial Kind="Bell" DockPanel.Dock="Left" VerticalAlignment="Center"/> <!-- or any other image -->
                <ContentPresenter Content="Content or Binding or... Hello World!"/>
            </DockPanel>
        </DataTemplate>                    
    </TabItem.HeaderTemplate>
    <!-- normal Tab content-->              
</TabItem>

如何将图像添加到mahapps tabcontrol

3 个答案: