Style TabControl Баг с SelectedIndex

@Defences · Регистрация: 28.12.2016

Студворк — интернет-сервис помощи студентам

Вот дефолтный стиль, который создает сама студия. Добавил туда только Storyboard1 и TriggerEvent

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
  <Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="Padding" Value="4,4,4,4"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="#8C8E94"/>
            <Setter Property="Background" Value="#F9F9F9"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabControl}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="Storyboard1">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PART_SelectedContentHost">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition x:Name="ColumnDefinition0"/>
                                <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
                                <RowDefinition x:Name="RowDefinition1" Height="*"/>
                            </Grid.RowDefinitions>
                            <TabPanel x:Name="HeaderPanel" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
                            <Border x:Name="ContentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                                <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="TabStripPlacement" Value="Bottom">
                                <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="1"/>
                                <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
                                <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                                <Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
                                <Setter Property="Margin" TargetName="HeaderPanel" Value="2,0,2,2"/>
                            </Trigger>
                            <Trigger Property="TabStripPlacement" Value="Left">
                                <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
                                <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
                                <Setter Property="Grid.Column" TargetName="HeaderPanel" Value="0"/>
                                <Setter Property="Grid.Column" TargetName="ContentPanel" Value="1"/>
                                <Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
                                <Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
                                <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                                <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                                <Setter Property="Margin" TargetName="HeaderPanel" Value="2,2,0,2"/>
                            </Trigger>
                            <Trigger Property="TabStripPlacement" Value="Right">
                                <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
                                <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
                                <Setter Property="Grid.Column" TargetName="HeaderPanel" Value="1"/>
                                <Setter Property="Grid.Column" TargetName="ContentPanel" Value="0"/>
                                <Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>
                                <Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>
                                <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                                <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                                <Setter Property="Margin" TargetName="HeaderPanel" Value="0,2,2,2"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                            <EventTrigger RoutedEvent="TabControl.SelectionChanged">
                                <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Есть TabControl. Запускаем, все классно, есть анимация переключения.

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
      <TabControl Margin="199,96,127,99" Style="{StaticResource TabControlStyle1}">
            <TabItem>
                <TabItem.Header>
                    <TextBlock Text="One" FontSize="10"/>
                </TabItem.Header>
                <Grid >
                    <Rectangle Fill="Red" />
                </Grid>
            </TabItem>
            <TabItem>
                <TabItem.Header>
                    <TextBlock Text="Two" FontSize="10"/>
                </TabItem.Header>
                <Grid >
                    <Rectangle Fill="Green" />
                </Grid>
            </TabItem>
            <TabItem>
                <TabItem.Header>
                    <TextBlock Text="Three" FontSize="10"/>
                </TabItem.Header>
                <Grid >
                    <Rectangle Fill="Blue" />
                </Grid>
            </TabItem>
        </TabControl>

Добавляем SelectedIndex и все, крашится...

XML
1
   <TabControl Margin="199,96,127,99" Style="{StaticResource TabControlStyle1}" SelectedIndex="1">

Добавлено через 23 секунды
Как эту чертовщину поправить? Мб каким-то другим способом сделать триггер на анимацию?

@Defences · 06.08.2019, 03:40 **[ТС]**

Элд Хасп, спасибо за вариант, но он плох, ибо в примере у нас всего лишь прямоугольник с цветом в Item, а если там 100500 контролов с своей анимацией и т.д, держать VM и создавать их там, без возможности корректировать позиции, анимацию и т.д. Бред. Так себе усложнять жизнь чтобы всего лишь иметь возможность выставить индекс... Все это проще делать через дизайнер с Blend

Самый оптимал который я нашел, это сделать производный класс

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
CustomTabControl : TabControl
    {
        public static readonly RoutedEvent SelectionChangedAfterLoadedEvent = EventManager.RegisterRoutedEvent(nameof(SelectionChangedAfterLoaded), RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(CustomTabControl ));
 
        public event RoutedEventHandler SelectionChangedAfterLoaded
        {
            add { AddHandler(SelectionChangedAfterLoadedEvent, value); }
            remove { RemoveHandler(SelectionChangedAfterLoadedEvent, value); }
        }
 
        public CustomTabControl ()
        {
            SelectionChanged += (sender, args) =>
            {
                if (IsLoaded)
                    OnSelectionChangedAfterLoaded();
            };
        }
 
        private void OnSelectionChangedAfterLoaded()
        {
            RaiseEvent(new RoutedEventArgs(SelectionChangedAfterLoadedEvent));
        }
    }

Ну и в стиле просто биндимся.

XML
1
2
3
  <EventTrigger RoutedEvent="SelectionChangedAfterLoaded">
                            <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
                        </EventTrigger>

Добавлено через 4 минуты
Я просто не так понял proa33 и думал что есть возможность как-то сделать так

XML
1
2
3
4
5
6
7
<DataTrigger Binding="{Binding IsLoaded, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" Value="True">
                              <Setter>
                                  <EventTrigger RoutedEvent="TabControl.SelectionChanged">
                                      <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
                                  </EventTrigger>
                                </Setter>
                            </DataTrigger>

Она есть, но базовыми не реализовать, эту нужно делать свой класс триггера, что опять геморрой, проще контрол переопределить с RoutedEvent

@Элд Хасп · 06.08.2019, 09:46

Сообщение от Defences

в примере у нас всего лишь прямоугольник с цветом в Item, а если там 100500 контролов с своей анимацией и т.д, держать VM и создавать их там

Это всё делается через интерфейсы и UserControl.

Вы создаёте сильно различающиеся TebItem с большим количеством элементов. А как вам видеть в конструкторе окна, что вы пишите в XAML? Плюс к этому XAML окна получится огромным и при этом напрямую у главного окна иная функциональность и ему должно быть "по фиг" что там TebItem отображает.

Поэтому одним из способов реализации является создание UC для каждого отличного вида TebItem. Каждый вид TebItem легко посмотреть в конструкторе UC. В самом же основном окне UC или напрямую записываются в TabControl.ItemsSource или делается селектор списка VM через набор DataTemplate.

Добавлено через 2 минуты

Сообщение от Defences

Самый оптимал который я нашел, это сделать производный класс

Сказанное выше не означает, что я считаю ваше решение не правильным.
Если оно для вас оптимально, то, конечно, используйте его.
Платформа WPF гибкая, позволяет создавать различные решения для одной и той же задачи. Это одно из её преимуществ.

@Defences · 06.08.2019, 09:53 **[ТС]**

Элд Хасп, ну это же движ WPF. Функция вкл код проекта. Вы можете переключать страницы в tabcontrol прямо в дизайнере, как и сворачивать или разворачить combobox и т.д. Да даже анимация будет по триггерам работать. VS2017
Минус UC в том, что нужно прокидывать DP в нем, а если он не шаблоный и такое используется только 1 раз, то смысла вообще нету делать двойную работу.

Новые блоги и статьи Все статьи Все блоги /
Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Jin X 06.09.2026 Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .	Программа опроса у.з. расходомера SLS-720F Argus19 02.09.2026 Программа опроса у. з. расходомера SLS-720F Программа опрашивает один раз в минуту три ультразвуковых расходомера SLS-720F через интерфейс RS-485 по протоколу Modbus RTU. Опрашиваются регистры. . .	Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0. Maks 31.08.2026 При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .	Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм anaschu 30.08.2026 Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .
Оттачиваю умение писать js программы. russiannick 30.08.2026 Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .	мат медиц модель 30. презентация проекта anaschu 27.08.2026 хоп хоп хоп хидахоп, а я кладую))	Как у меня протекала болезнь zorxor 27.08.2026 Здравствуйте, друзья! Эта запись блога предназначена именно для вас - для моих дорогих друзей, которые знали меня лично. Чтобы ответить на вопрос - а что же со мной произошло на самом деле? Я учился. . .	Нашел вот забавное видео о измерениях. Лучшее что я видел на эту тему kumehtar 26.08.2026 ILETXiw9bMQ Основная суть и тезисы по измерениям: 0D (Нулевое измерение): точка, не имеющая длины, ширины, высоты или объема. Объект не может перемещаться в 0D. 1D (Первое измерение):. . .

@Defences 215 / 149 / 48 Регистрация: 28.12.2016 Сообщений: 716
	06.08.2019, 09:53 [ТС]
	Элд Хасп, ну это же движ WPF. Функция вкл код проекта. Вы можете переключать страницы в tabcontrol прямо в дизайнере, как и сворачивать или разворачить combobox и т.д. Да даже анимация будет по триггерам работать. VS2017 Минус UC в том, что нужно прокидывать DP в нем, а если он не шаблоный и такое используется только 1 раз, то смысла вообще нету делать двойную работу. 0