UIKitTutorials/MainWindow.xaml at main · Jeyderht/UIKitTutorials · GitHub

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
108
109
110
111
112
113
<Window x:Class="UIKitTutorials.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:UIKitTutorials"
        mc:Ignorable="d" Name="home"
        Title="MainWindow" Height="650" Width="1000"
        WindowStartupLocation="CenterScreen" WindowStyle="None"
        Background="Transparent" AllowsTransparency="True"
        ResizeMode="NoResize" WindowState="Normal">
    <Border CornerRadius="8" Background="{DynamicResource PrimaryBackgroundColor}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <!-- Start: GridColum Left-->
            <Border CornerRadius="8 0 0 8" Background="{DynamicResource SecundaryBackgroundColor}">
                <Grid x:Name="gridMenu" Width="60">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="60"/>
                        <RowDefinition Height="80"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>

                    <!-- Logo -->
                    <StackPanel Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Top">
                        <Path Data="{DynamicResource logo}" Margin="16 0 0 0" Stretch="Fill" Fill="{DynamicResource PrimaryBlueColor}" Width="25" Height="25" HorizontalAlignment="Left"/>
                        <Label Content="Orizon" Foreground="{DynamicResource PrimaryBlueColor}" FontWeight="Bold" FontSize="20" VerticalAlignment="Center" HorizontalContentAlignment="Left" HorizontalAlignment="Left" Margin="14 0 0 0"/>
                    </StackPanel>

                    <!-- Menu -->
                    <ToggleButton x:Name="btnMenu"  HorizontalAlignment="Right" BorderThickness="0" Background="Transparent" VerticalAlignment="Center" Style="{StaticResource MenuIconStyle}" Margin="0 0 15 0">
                        <ToggleButton.Triggers>
                            <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                                <BeginStoryboard>
                                    <Storyboard x:Name="HideStackPanel">
                                        <DoubleAnimation Storyboard.TargetName="gridMenu" Storyboard.TargetProperty="Width" BeginTime="0:0:0" From="200" To="60" Duration="0:0:0.3">
                                        </DoubleAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="ToggleButton.Checked">
                                <BeginStoryboard>
                                    <Storyboard x:Name="ShowStackPanel">
                                        <DoubleAnimation Storyboard.TargetName="gridMenu" Storyboard.TargetProperty="Width" BeginTime="0:0:0" From="60" To="200" Duration="0:0:0.3">
                                        </DoubleAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </ToggleButton.Triggers>
                    </ToggleButton>

                    <StackPanel Grid.Row="3">
                        <RadioButton x:Name="rdHome" IsChecked="True" Content="Home" Style="{DynamicResource MenuRadioButtonStyle}" Tag="{DynamicResource home}" Click="rdHome_Click"/>
                        <RadioButton x:Name="rdSounds" Content="Sounds" Style="{DynamicResource MenuRadioButtonStyle}" Tag="{DynamicResource headphones}" Margin="0 5 0 5" Click="rdSounds_Click"/>
                        <RadioButton x:Name="rdNotes" Content="Notes" Style="{DynamicResource MenuRadioButtonStyle}" Tag="{DynamicResource notes}" Click="rdNotes_Click"/>
                        <RadioButton x:Name="rdPayment" Content="Payment" Style="{DynamicResource MenuRadioButtonStyle}" Tag="{DynamicResource payment}" Margin="0 5 0 5" Click="rdPayment_Click"/>
                    </StackPanel>

                    <StackPanel Grid.Row="3" VerticalAlignment="Bottom" Orientation="Horizontal" Width="200" Margin="0 0 0 20">
                        <Ellipse Width="40" Height="40" Margin="10 0 0 0">
                            <Ellipse.Fill>
                                <ImageBrush ImageSource="Assets/Avatars/avatar-2.jpg"/>
                            </Ellipse.Fill>
                        </Ellipse>
                        <StackPanel Orientation="Vertical" Margin="8 0 0 0">
                            <Label Content="Scarlett Gwen" Foreground="{DynamicResource TextPrimaryColor}" FontSize="14" FontWeight="SemiBold" HorizontalContentAlignment="Center" HorizontalAlignment="Left"/>
                            <Label Content="scarlettgwen@gmail.com" Foreground="{DynamicResource PrimaryGrayColor}" FontSize="11" FontWeight="Regular" HorizontalContentAlignment="Center" HorizontalAlignment="Left" Margin="0 -10 0 0"/>
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </Border>
            <!-- End: GridColum Left-->

            <!-- Start: GridColumn Rigth -->
            <Grid Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="60"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>

                <!-- Start: Button Close | Restore | Minimize -->
                <StackPanel Grid.Row="0" Grid.Column="4" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,5,10,0" Height="30" Orientation="Horizontal" FlowDirection="RightToLeft">
                    <Button x:Name="btnClose" Style="{StaticResource IconButtonsStyle}" Content="{DynamicResource close}" Click="btnClose_Click" Tag="IsCloseButton"/>
                    <Button x:Name="btnRestore" Margin="5,0" Click="btnRestore_Click">
                        <Button.Style>
                            <Style TargetType="{x:Type Button}" BasedOn="{StaticResource IconButtonsStyle}">
                                <Setter Property="Content" Value="{DynamicResource maximize}"/>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding ElementName=home, Path=WindowState}" Value="Maximized">
                                        <Setter Property="Content" Value="{DynamicResource restore}"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Button.Style>
                    </Button>
                    <Button x:Name="btnMinimize" Style="{DynamicResource IconButtonsStyle}" Content="{DynamicResource minimize}" Click="btnMinimize_Click"/>
                </StackPanel>
                <!-- End: Button Close | Restore | Minimize -->

                <Border Grid.Row="1" Margin="10">
                    <Frame x:Name="PagesNavigation" NavigationUIVisibility="Hidden">
                        <!-- Page Content -->
                    </Frame>
                </Border>
            </Grid>
            <!-- Start: GridColumn Rigth -->
        </Grid>
    </Border>
</Window>