WPF Пустой Контент TabControl

Question

Я использую TabControl для размещения рабочих пространств с помощью метода, описанного в Эта удивительная статья Джона Смита. Мне было интересно, есть ли способ добавить контент, например, изображение, в элемент управления вкладками, когда у него нет вкладок. Сортировка по умолчанию или пустое поведение. Я хотел бы иметь логотип приложения или, возможно, несколько полезных стрелок, а-ля Chrome вкладка при первом использовании.

Редактировать : Это может быть немного сложнее. Я попробовал решение Чэда ниже на стандартном tabcontrol в этом показанном. Тем не менее, tabcontrol, который я использую для рабочих пространств, визуализируется с помощью элемента управления содержимым с использованием таблицы данных, и я не мог заставить его решение работать с ним. Решение HB работало с некоторыми изменениями.

<DataTemplate x:Key="WorkspacesTemplate">
    <Grid>
        <Image Name="image1" Stretch="Uniform" Source="/Affinity;component/Images/affinity_logo.png" Margin="20"/>
        <TabControl IsSynchronizedWithCurrentItem="True" ItemsSource="{Binding}" 
                ItemTemplate="{StaticResource ClosableTabItemTemplate}" Margin="4">
            <TabControl.Style>
                <Style TargetType="TabControl">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Items.Count, RelativeSource={RelativeSource Self}}"
                        Value="0">
                            <Setter Property="Visibility" Value="Hidden" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TabControl.Style>
        <TabControl.Template>
            <ControlTemplate TargetType="TabControl">
                <Grid Background="White">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <ScrollViewer HorizontalScrollBarVisibility="Auto"  VerticalScrollBarVisibility="Hidden" >
                        <StackPanel x:Name="HeaderPanel"
                            Orientation="Horizontal"
                            Panel.ZIndex ="1" 
                            KeyboardNavigation.TabIndex="1"
                            Grid.Column="0"
                            Grid.Row="0"
                            Margin="2,2,2,0"
                            IsItemsHost="true"/>
                    </ScrollViewer>
                        <ContentPresenter x:Name="PART_SelectedContentHost" Grid.Row="1" 
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                          Margin="{TemplateBinding Padding}"
                                          ContentSource="SelectedContent"/>
                </Grid>
            </ControlTemplate>
        </TabControl.Template>
    </TabControl>
    </Grid>
</DataTemplate>

Answer 1

Вы можете наложить TabControl на свое изображение и скрыть его, если в нем нет элементов, например,

<Grid>
    <Image />
    <TabControl>
        <TabControl.Style>
            <Style TargetType="TabControl">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Items.Count, RelativeSource={RelativeSource Self}}"
                            Value="0">
                        <Setter Property="Visibility" Value="Hidden" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </TabControl.Style>
    </TabControl>
</Grid>

Или вы можете поменять содержимое ContentControl, также используя триггеры, так как в приведенном выше методе оба элемента управления влияют на макет. например,

<ContentControl>
    <ContentControl.Resources>
        <Image x:Key="Image"/>
        <TabControl x:Key="TabControl" ItemsSource="{Binding Data}" />
    </ContentControl.Resources>
    <ContentControl.Style>
        <Style TargetType="ContentControl">
            <Setter Property="Content" Value="{StaticResource TabControl}" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding Data.Count}"
                        Value="0">
                    <Setter Property="Content" Value="{StaticResource Image}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ContentControl.Style>
</ContentControl>

Обратите внимание, что здесь DataTrigger должен связываться непосредственно с той же коллекцией, которая использовалась в TabControl. Это связано с тем, что при привязке к TabControl.Items.Count эта привязка прекратится в тот момент, когда сработает триггер, поскольку TabControl будет выгружен.

Answer 2

Вы можете добавить фон для вкладки управления.XAML выглядит примерно так:

<TabControl Height="290" HorizontalAlignment="Left" Margin="12,350,0,0" Name="TabControl" VerticalAlignment="Top" Width="481" TabIndex="200">
    <TabControl.Background>
        <ImageBrush ImageSource="/EffectsViewer;component/res/someimage.png" />
    </TabControl.Background>
</TabControl>

Просто убедитесь, что изображение, которое вы используете, находится в ваших ресурсах.Его нетрудно добавить, используя графический интерфейс в визуальной студии.Что касается добавления элементов управления, это может быть немного сложнее.Я думаю, что для этого вам нужно либо спрятать элемент управления за чем-то, пока оно пустое, либо ИЛИ извлечь из него и реализовать его самостоятельно.