Пользовательский заголовок TabItem с текстом и изображением - не уверен, как поступить - PullRequest
Новая
       38

Пользовательский заголовок TabItem с текстом и изображением - не уверен, как поступить

3 голосов
/ 28 марта 2012

В моем XAML есть TabControl, который является просто пустым элементом управления, поскольку TabItems генерируются динамически во время выполнения.

Моя проблема в том, что я хочу иметь заголовок вкладки и изображение (изображение «настройки») в заголовке, но я не знаю, как это сделать. Как я уже сказал, я генерирую TabItems на лету, так как и где будет шаблон для этого вписываться и где я бы его положил и т. Д.? Будет ли шаблон заголовка TabItem применяться к элементам управления TabItem, создаваемым динамически? (Я предполагаю / надеюсь на это!)

Я гуглил и искал здесь, но, похоже, никто не делает то, что я делаю ... просто интересно, может ли кто-нибудь дать мне какое-то руководство. 

<Grid Name="MainGrid" Background="#333333" ShowGridLines="False" >
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" ToolTip="Settings">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" Text="RoboNews" Foreground="SkyBlue" FontSize="32" Padding="5"/>
        <Button Name="btnSettings" Background="Transparent" Grid.Column="1" BorderBrush="#333333" BorderThickness="0" HorizontalAlignment="Right" 
                Click="btnSettings_Click" ToolTip="Click for menu">
            <!--<Image Source="Images/Settings48x48.png"/>-->
            <Image Source="/Images/MenuOpen.png" Width="36" />
        </Button>

    </Grid>

    <TabControl Name="tabCategories" Grid.Row="1" Background="Black" SelectionChanged="tabCategories_SelectionChanged">  

    </TabControl>
</Grid>

1 Ответ

2 голосов
/ 28 марта 2012

Вы можете создать UserControl для вашего заголовка 

<UserControl DataContext="{Binding RelativeSource={RelativeSource Self}}" x:Class="TabControlHeader.TabItemHeader"
             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" Width="Auto" Height="Auto">
    <Grid >
        <StackPanel>
            <Image Source="{Binding ImageSource}"></Image>
            <TextBlock Text="{Binding Text}"></TextBlock>
        </StackPanel>
    </Grid>
</UserControl>

С идеальными DP, определенными в его ViewModel, но на данный момент в коде: 

public string ImageSource
{
    get { return (string)GetValue(ImageSourceProperty); }
    set { SetValue(ImageSourceProperty, value); }
}

// Using a DependencyProperty as the backing store for ImageSource.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty ImageSourceProperty =
    DependencyProperty.Register("ImageSource", typeof(string), typeof(TabItemHeader));



public string Text
{
    get { return (string)GetValue(TextProperty); }
    set { SetValue(TextProperty, value); }
}

// Using a DependencyProperty as the backing store for Text.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty TextProperty =
    DependencyProperty.Register("Text", typeof(string), typeof(TabItemHeader));

Затем при создании вашего TabItem вам нужно установить его HeaderTemplate: 

TabItem tabItem = new TabItem();
tabItem.Height = 100;
tabItem.Width = 50;
var header = new FrameworkElementFactory(typeof(TabItemHeader));
header.SetValue(TabItemHeader.TextProperty, "This is Text");
header.SetValue(TabItemHeader.ImageSourceProperty, "This is Image uri");
header.SetValue(TabItemHeader.HeightProperty, (double)50);
header.SetValue(TabItemHeader.WidthProperty, (double)50);


tabItem.HeaderTemplate = new DataTemplate { VisualTree = header };            
tabCategories.Items.Add(tabItem);
...