Боковое меню и оформление

@ivleb · Регистрация: 12.12.2013

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

Всем доброго времени суток.
На днях решил попробовать повозиться с WPF и захотелось попробовать сделать боковое меню и оформить чек боксы как на мобилках (виде тумблера).. Покопался в инете так и не нашел как.. Может подскажите ребят, а то надоело голову ломать =(

Вот примерно то что я имею в виду

@kenny69 · 17.09.2015, 18:26

Плохо искали

https://sampathdr.wordpress.co... check-box/

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

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
 <Style x:Key="CheckBoxStyle1" TargetType="{x:Type CheckBox}">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="#FF2A343F"/>
            <Setter Property="Content" Value="Off"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type CheckBox}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="OnChecking">
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="slider" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="26"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="OnUnchecking">
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="slider" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                                <ThicknessAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="slider" Storyboard.TargetProperty="(FrameworkElement.Margin)">
                                    <SplineThicknessKeyFrame KeyTime="00:00:00.3000000" Value="1,1,1,1"/>
                                </ThicknessAnimationUsingKeyFrames>
                            </Storyboard>
                        </ControlTemplate.Resources>
 
                        <DockPanel x:Name="dockPanel" >
                            <ContentPresenter Margin="0,0,5,0" HorizontalAlignment="Right" VerticalAlignment="Center" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" ContentTemplate="{TemplateBinding ContentTemplate}" RecognizesAccessKey="True" />
                                <Grid Width="44" Height="16">
                                    <Border Margin="0" BorderThickness="2" BorderBrush="#FF615E5E">
                                        <Grid Width="40" Background="#FF2A343F" >
                                            <Border Margin="2" x:Name="baseRectangle" BorderThickness="0" Background="#FF615E5E">
                                            </Border>
                                        </Grid>
                                    </Border>
                                    <Border x:Name="slider" HorizontalAlignment="Left" Margin="0" Width="16" BorderThickness="0" BorderBrush="#FF1E252D" RenderTransformOrigin="0.5,0.5" >
                                        <Border.RenderTransform>
                                            <TransformGroup>
                                                <ScaleTransform ScaleX="1" ScaleY="1"/>
                                                    <SkewTransform AngleX="0" AngleY="0"/>
                                                        <RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
                                            </TransformGroup>
                                        </Border.RenderTransform>
                                        <Border.Background>
                                            <SolidColorBrush >White</SolidColorBrush>
                                        </Border.Background>
                                    </Border>
                                </Grid>
                        </DockPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Trigger.ExitActions>
                                    <BeginStoryboard Storyboard="{StaticResource OnUnchecking}" x:Name="OnUnchecking_BeginStoryboard"/>
                                </Trigger.ExitActions>
                                <Trigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource OnChecking}" x:Name="OnChecking_BeginStoryboard"/>
                                </Trigger.EnterActions>
                                <Setter Property="Content" Value="On"/>
                                <Setter Property="Background" TargetName="baseRectangle" Value="#FF148583"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

XML
1
 <CheckBox  Style="{StaticResource CheckBoxStyle1}"/>

@ivleb · 17.09.2015, 21:43 **[ТС]**

kenny69, а боковое меню тогда не подскажите как?
И если можно пример чтоб более понятно было

Добавлено через 30 минут
Попробовал использовать данный код в итоге выдает ошибку

Code
1
Ошибка    1   Атрибут Key можно использовать только с тегом, содержащимся в свойстве типа IDictionary.   C:\Users\Anzhelika\Desktop\WpfApplication17\WpfApplication17\MainWindow.xaml    7   12  WpfApplication17

Добавлено через 7 минут
Разобрался.. Нужно было добавить теги

XML
1
<Window.Resources></Window.Resources>

И вставить между ними
.. Вопрос насчет меню остается тем же

@kenny69 · 17.09.2015, 22:08

Попробуйте воспользоваться готовыми или переделать под себя
https://github.com/beto-rodriguez/MaterialMenu

Добавлено через 4 минуты
Можно на основе Menu

XML
1
2
3
4
5
6
7
8
9
10
11
<DockPanel>
 
<Menu DockPanel.Dock="Left">
    <Menu.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </Menu.ItemsPanel>
 
</Menu>
</DockPanel>

@ivleb · 21.09.2015, 14:15 **[ТС]**

А именно?Просто пример с гитхаба не работает

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .

@ivleb 1 / 1 / 1 Регистрация: 12.12.2013 Сообщений: 95

	Боковое меню и оформление 17.09.2015, 16:18. Показов 9643. Ответов 4 Метки нет (Все метки) Всем доброго времени суток. На днях решил попробовать повозиться с WPF и захотелось попробовать сделать боковое меню и оформить чек боксы как на мобилках (виде тумблера).. Покопался в инете так и не нашел как.. Может подскажите ребят, а то надоело голову ломать =( Вот примерно то что я имею в виду 0

@ivleb 1 / 1 / 1 Регистрация: 12.12.2013 Сообщений: 95
	21.09.2015, 14:15 [ТС]
	А именно?Просто пример с гитхаба не работает 0

Боковое меню и оформление

Решение