Привязка Popup к Slider

@SergeyA · Регистрация: 03.07.2011

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

Есть шаблон слайдера, нужно при наведении мыши на Track.Thumb что бы вылазил popup и отображал процент

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<Style x:Key="SliderButtonStyle" TargetType="{x:Type RepeatButton}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Focusable" Value="false"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border Background="Transparent" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
 
        <Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="Height" Value="18"/>
            <Setter Property="Width" Value="18"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Ellipse Name="Ellipse">
                            <Ellipse.Fill>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Color="#FF2323" Offset="0.0"/>
                                            <GradientStop Color="#D70000" Offset="1.0"/>
                                        </GradientStopCollection>
                                    </GradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Ellipse.Fill>
                            <Ellipse.Effect>
                                <DropShadowEffect BlurRadius="5" ShadowDepth="0"/>
                            </Ellipse.Effect>
                        </Ellipse>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
 
        <Style TargetType="{x:Type Slider}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Style.Triggers>
                <Trigger Property="Orientation" Value="Horizontal">
                    <Setter Property="MinWidth" Value="104" />
                    <Setter Property="MinHeight" Value="21" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Slider}">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto" MinHeight="{TemplateBinding Slider.MinHeight}"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <TickBar Name="TopTick" SnapsToDevicePixels="True" Placement="Top"  Height="8" Visibility="Collapsed" />
                                    <Border Name="TrackBackground" Margin="0" CornerRadius="4" Height="8" Grid.Row="1" Background="#FF252525">
                                        <Border.Effect>
                                            <DropShadowEffect BlurRadius="7" ShadowDepth="0" />
                                        </Border.Effect>
                                    </Border>
                                    <Track Grid.Row="1" Name="PART_Track">
                                        <Track.DecreaseRepeatButton>
                                            <RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.DecreaseLarge" />
                                        </Track.DecreaseRepeatButton>
                                        <Track.Thumb>
                                            <Thumb Style="{StaticResource SliderThumbStyle}" />
                                        </Track.Thumb>
                                        <Track.IncreaseRepeatButton>
                                            <RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.IncreaseLarge" />
                                        </Track.IncreaseRepeatButton>
                                    </Track>
                                    <TickBar Name="BottomTick" SnapsToDevicePixels="True" Grid.Row="2" Placement="Bottom" Height="8" Visibility="Collapsed" />
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="TickPlacement" Value="TopLeft">
                                        <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
                                    </Trigger>
                                    <Trigger Property="TickPlacement" Value="BottomRight">
                                        <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
                                    </Trigger>
                                    <Trigger Property="TickPlacement" Value="Both">
                                        <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
                                        <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>    
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

Как это можно сделать?

Добавлено через 38 минут
Вроде сделал, но Popup не перемещается вместе с Thumb, и как забиндить в него процентовку?

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
 <Style x:Key="SliderButtonStyle" TargetType="{x:Type RepeatButton}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Focusable" Value="false"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border Background="Transparent" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
 
        <Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="Height" Value="18"/>
            <Setter Property="Width" Value="18"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Grid>
                        <Ellipse Name="Ellipse">
                            <Ellipse.Fill>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Color="#FF2323" Offset="0.0"/>
                                            <GradientStop Color="#D70000" Offset="1.0"/>
                                        </GradientStopCollection>
                                    </GradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Ellipse.Fill>
                            <Ellipse.Effect>
                                <DropShadowEffect BlurRadius="5" ShadowDepth="0"/>
                            </Ellipse.Effect>
                        </Ellipse>
                            
                        </Grid>
                    </ControlTemplate>
                    
                </Setter.Value>
            </Setter>
        </Style>
 
        <Style TargetType="{x:Type Slider}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Style.Triggers>
                <Trigger Property="Orientation" Value="Horizontal">
                    <Setter Property="MinWidth" Value="104" />
                    <Setter Property="MinHeight" Value="21" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Slider}">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto" MinHeight="{TemplateBinding Slider.MinHeight}"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <TickBar Name="TopTick" SnapsToDevicePixels="True" Placement="Top"  Height="8" Visibility="Collapsed" />
                                    <Border Name="TrackBackground" Margin="0" CornerRadius="4" Height="8" Grid.Row="1" Background="#FF202020">
                                        <Border.Effect>
                                            <DropShadowEffect BlurRadius="7" ShadowDepth="0" />
                                        </Border.Effect>
                                    </Border>
                                    <Track Grid.Row="1" Name="PART_Track">
                                        <Track.DecreaseRepeatButton>
                                            <RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.DecreaseLarge" />
                                        </Track.DecreaseRepeatButton>
                                        <Track.Thumb>
                                            <Thumb Name="Thumb" Style="{StaticResource SliderThumbStyle}" />
                                        </Track.Thumb>
                                        <Track.IncreaseRepeatButton>
                                            <RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.IncreaseLarge" />
                                        </Track.IncreaseRepeatButton>
                                    </Track>
                                    <TickBar Name="BottomTick" SnapsToDevicePixels="True" Grid.Row="2" Placement="Bottom" Height="8" Visibility="Collapsed" />
                                    <Popup x:Name="tooltip" Width="30" Height="30" PopupAnimation="Fade" Placement="Top" PlacementTarget="{Binding ElementName=Thumb}" VerticalOffset="-5" HorizontalOffset="-7"  >
                                        <Border Background="Black" CornerRadius="3" BorderThickness="2" BorderBrush="Beige">
                                            <TextBlock Text=" " FontSize="12" Foreground="White" Margin="5" />
                                        </Border>
                                    </Popup>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger SourceName="Thumb"  Property="IsMouseOver" Value="true">
                                        <Setter TargetName="tooltip" Property="IsOpen" Value="true" />
                                    </Trigger>
                                    <Trigger Property="TickPlacement" Value="TopLeft">
                                        <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
                                    </Trigger>
                                    <Trigger Property="TickPlacement" Value="BottomRight">
                                        <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
                                    </Trigger>
                                    <Trigger Property="TickPlacement" Value="Both">
                                        <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
                                        <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>    
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

Добавлено через 36 минут
Текст тоже забиндил, осталось сделать перемещение popup относительно Thumb

Новые блоги и статьи Все статьи Все блоги /
[golang] Угол между стрелками часов alhaos 12.05.2026 По заданным значениям часа и минуты необходимо определить значение меньшего угла между стрелками аналогового циферблата часов. import "math" func angleClock(hour int, minutes int) float64 { . . .	Debian 13: Установка Lazarus QT5 ВитГо 09.05.2026 Эта инструкция моя компиляция инструкций volvo https:/ / www. cyberforum. ru/ blogs/ 203668/ 10753. html и его же старой инструкции по установке Lazarus с gtk2. . .	Нейросеть на алгоритме "эстафета хвоста" как перспектива. Hrethgir 06.05.2026 На десерт, когда запущу сервер. Статья тут https:/ / habr. com/ ru/ articles/ 1030914/ . Автор я сам, нейросеть только помогает в вопросах которые мне не известны - не знаю людей которые знали-бы. . .	Асинхронный приём данных из COM-порта Argus19 01.05.2026 Асинхронный приём данных из COM-порта Купил на aliexpress термопринтер QR701. Он оказался странным. Поключил к Arduino Nano. Был очень удивлён. Наотрез отказывается печатать русские буквы. Чтобы. . .
попытка написать игровой сервер на C++ pyirrlicht 29.04.2026 попытка написать игровой сервер на плюсах с открытым бесконечным миром. возможно получится прикрутить интерпретатор питон для кастомизации игровой логики. что есть на текущий момент:. . .	Контроль уникальности выбранного документа-основания при изменении реквизита Maks 28.04.2026 Алгоритм из решения ниже разработан на примере нетипового документа "ЗаявкаНаРемонтСпецтехники", разработанного в КА2. Задача: уведомлять пользователя, если указанная заявка (документ-основание). . .	Благородство как наказание Maks 24.04.2026 У хорошего человека отношения с женщинами всегда складываются трудно. А я человек хороший. Заявляю без тени смущения, потому что гордиться тут нечем. От хорошего человека ждут соответствующего. . .	Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .