Вопрос по xaml, wpf, tabcontrol – WPF tabcontrol style

9

У меня есть интерфейс с довольно стандартным внешним видом. Он имеет столбец значков с левой стороны, который при нажатии открывает другой пользовательский элемент управления с правой стороны. В настоящее время я использую отдельные элементы управления для значков выбора и содержимого пользовательского элемента управления. У меня странные проблемы с фокусировкой, которые я устал от попыток смягчить, и мне интересно, смогу ли я стилизовать tabcontrol, чтобы он выглядел как мой пользовательский интерфейс (при условии, что tabcontrol не будет иметь проблем с фокусировкой при навигации по вкладкам).

Вот скриншот основного интерфейса. Стиль в основном о том, как сделать так, чтобы выбор страницы tabcontrols был похож на мой столбец иконок. Кто-нибудь хочет бросить свою шляпу в ринг относительно того, как я мог бы сделать это с помощью tabcontrol? Мой xaml довольно слаб в этот момент.

альтернативный текст http://img413.imageshack.us/img413/8399/directoru.png

Или это может занять у меня почти неделю, чтобы найти время, чтобы добавить пример. Я надеюсь, что это помогает. Bryan Anderson
@CJBS Извините, я давно потерял этот образ и даже приложение, из которого оно было. Впрочем, приятно видеть, что это все еще актуально 7 лет спустя ... BrettRobi
@ CJBS Это был BrentRobi, который сделал оригинальное сообщение и будет иметь изображение. Пример, о котором я говорил, находится в редактировании принятого ответа ниже. Bryan Anderson
@BrettRobi Imageshack изображение больше не активно. Есть ли шанс, что это может быть встроено? CJBS
@BryanAnderson - извини - ты прав. Я набрал '@B' и принял первую запись без проверки. CJBS

Ваш Ответ

2   ответа
1

Как насчет передачи TabControl с помощью DockPanel и привязки DockPanel.Dock TabPanel к исходному свойству TabStripPlacement? .., как показано

xaml
<Style  TargetType="{x:Type TabControl}" >
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <DockPanel KeyboardNavigation.TabNavigation="Local" LastChildFill="True">
                        <TabPanel DockPanel.Dock="{TemplateBinding TabStripPlacement}"
                            Name="HeaderPanel"
                            Grid.Row="0"
                            Panel.ZIndex="1" 
                            Margin="0,0,4,1" 
                            IsItemsHost="True"
                            KeyboardNavigation.TabIndex="1"
                            Background="Transparent" />
                        <Border 
                            Name="Border" 
                            Background="Transparent" 
                            BorderBrush="Black" 
                            BorderThickness="1" 
                            CornerRadius="2" >
                            <ContentPresenter 
                                ContentSource="SelectedContent" />
                        </Border>
                    </DockPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="Black" />
                            <Setter TargetName="Border" Property="BorderBrush" Value="DarkGray" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
18
<TabControl TabStripPlacement="Left">
    ...
</TabControl>

Затем вы помещаете значки в свойство Header вкладок TabItems и UserControls в свойстве Content. Это поможет вам на полпути. Если вы хотите точно такой же внешний вид, вам нужно будет повторно протестировать TabControl и TabItem, скопировав текущий шаблон (используйте Blend илиShowMeTheTemplate скопировать текущий шаблон) и изменить его при необходимости. Но просто изменив эти свойства, вы сможете проверить, избавляет ли TabControl от проблем с фокусировкой.

Изменить: вот пример шаблона, который должен быть довольно близко к вашему скриншоту

<Style TargetType="{x:Type TabItem}">
    <Setter Property="Background" Value="Transparent" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">

                <Border x:Name="PART_Border" Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="LightGray" Margin="2">
                    <ContentPresenter ContentSource="Header" Margin="2" />
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="PART_Border" Property="BorderBrush" Value="Black" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="{x:Type TabControl}">
    <Setter Property="TabStripPlacement" Value="Left" />
    <Setter Property="Margin" Value="2" />
    <Setter Property="Padding" Value="2"    />
    <Setter Property="Background" Value="White" />


    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid ClipToBounds="True" SnapsToDevicePixels="True" KeyboardNavigation.TabNavigation="Local">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Name="ColumnDefinition0" />
                        <ColumnDefinition Width="0" Name="ColumnDefinition1" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" Name="RowDefinition0" />
                        <RowDefinition Height="*" Name="RowDefinition1" />
                    </Grid.RowDefinitions>

                    <Border x:Name="HeaderBorder" 
                            BorderBrush="Black" 
                            BorderThickness="1" 
                            CornerRadius="5" 
                            Background="#FAFAFA"
                            Margin="0,0,0,5">
                        <TabPanel IsItemsHost="True"
                                  Name="HeaderPanel" 
                                  Panel.ZIndex="1" 
                                  KeyboardNavigation.TabIndex="1"
                                  Grid.Column="0" 
                                  Grid.Row="0" 
                         />
                    </Border>

                    <Grid Name="ContentPanel" 
                          KeyboardNavigation.TabIndex="2" 
                          KeyboardNavigation.TabNavigation="Local" 
                          KeyboardNavigation.DirectionalNavigation="Contained" 
                          Grid.Column="0" 
                          Grid.Row="1">
                        <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="5">
                            <ContentPresenter Content="{TemplateBinding SelectedContent}" 
                                              ContentTemplate="{TemplateBinding SelectedContentTemplate}" 
                                              ContentStringFormat="{TemplateBinding SelectedContentStringFormat}" 
                                              ContentSource="SelectedContent" 
                                              Name="PART_SelectedContentHost" 
                                              Margin="2" 
                                              SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" 
                            />
                        </Border>
                    </Grid>
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="TabControl.TabStripPlacement" Value="Bottom">
                        <Setter TargetName="HeaderPanel" Property="Grid.Row" Value="1" />
                        <Setter TargetName="ContentPanel" Property="Grid.Row" Value="0" />
                        <Setter TargetName="RowDefinition0" Property="RowDefinition.Height" Value="*" />
                        <Setter TargetName="RowDefinition1" Property="RowDefinition.Height" Value="Auto" />
                        <Setter TargetName="HeaderBorder" Property="FrameworkElement.Margin" Value="0,5,0,0" />
                    </Trigger>
                    <Trigger Property="TabControl.TabStripPlacement" Value="Left">
                        <Setter TargetName="HeaderPanel" Property="Grid.Row" Value="0" />
                        <Setter TargetName="ContentPanel" Property="Grid.Row" Value="0" />
                        <Setter TargetName="HeaderPanel" Property="Grid.Column" Value="0" />
                        <Setter TargetName="ContentPanel" Property="Grid.Column" Value="1" />
                        <Setter TargetName="ColumnDefinition0" Property="ColumnDefinition.Width" Value="Auto" />
                        <Setter TargetName="ColumnDefinition1" Property="ColumnDefinition.Width" Value="*" />
                        <Setter TargetName="RowDefinition0" Property="RowDefinition.Height" Value="*" />
                        <Setter TargetName="RowDefinition1" Property="RowDefinition.Height" Value="0" />
                        <Setter TargetName="HeaderBorder" Property="FrameworkElement.Margin" Value="0,0,5,0" />
                    </Trigger>
                    <Trigger Property="TabControl.TabStripPlacement" Value="Right">
                        <Setter TargetName="HeaderPanel" Property="Grid.Row" Value="0" />
                        <Setter TargetName="ContentPanel" Property="Grid.Row" Value="0" />
                        <Setter TargetName="HeaderPanel" Property="Grid.Column" Value="1" />
                        <Setter TargetName="ContentPanel" Property="Grid.Column" Value="0" />
                        <Setter TargetName="ColumnDefinition0" Property="ColumnDefinition.Width" Value="*" />
                        <Setter TargetName="ColumnDefinition1" Property="ColumnDefinition.Width" Value="Auto" />
                        <Setter TargetName="RowDefinition0" Property="RowDefinition.Height" Value="*" />
                        <Setter TargetName="RowDefinition1" Property="RowDefinition.Height" Value="0" />
                        <Setter TargetName="HeaderBorder" Property="FrameworkElement.Margin" Value="5,0,0,0" />
                    </Trigger>
                    <Trigger Property="UIElement.IsEnabled" Value="False">
                        <Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

В основном это копия обычного TabControl с добавлением и удалением некоторых границ. Надеюсь, это поможет.

Спасибо за ответ. Это действительно повторение, о котором я ищу совет. Я думаю, что это та часть, которая может помешать этому стать жизнеспособным решением. BrettRobi
Спасибо за пример, Брайан. Я посмотрю на это поближе в ближайшие несколько дней. BrettRobi
Я могу опубликовать пример, когда вернусь домой через несколько часов. Bryan Anderson
Бретт, я полагаю, ты найдешь, что повторная игра не будет такой уж плохой Звучит страшно, но как только ты в нее попадаешь, это довольно весело. Кроме того, наличие старого шаблона, к которому можно вернуться, означает, что вы всегда можете начать все сначала, если худшее станет худшим. Ed Gonzalez

Похожие вопросы