TransitionDemo/DetailView.xaml at master · Arebusf21/TransitionDemo · 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
<Page
    x:Class="TransitionDemo.DetailView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TransitionDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>

        <Flyout x:Key="zoomFlyout">
            <StackPanel>
                <StackPanel.Resources>
                    <Style TargetType="Button">
                        <Setter Property="HorizontalAlignment"
                                Value="Stretch" />
                        <Setter Property="Margin"
                                Value="0,2" />
                    </Style>
                </StackPanel.Resources>
                <Slider x:Name="ZoomSlider"
                        Width="100"
                        Minimum=".1"
                        Maximum="5"
                        Margin="0,5,0,0"
                        StepFrequency="0.1"
                        ValueChanged="ZoomSlider_ValueChanged"
                        Loaded="ZoomSlider_Loaded"/>
                <Button Content="Fit to screen"
                        Click="{x:Bind FitToScreen}" />
                <Button Content="Show actual size"
                        Click="{x:Bind ShowActualSize}" />
            </StackPanel>
        </Flyout>
    </Page.Resources>

    <Grid>
        <RelativePanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto">
            <CommandBar x:Name="DetailViewCommandBar"
                    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                    RelativePanel.AlignLeftWithPanel="True"
                    RelativePanel.AlignRightWithPanel="True"
                    RelativePanel.AlignTopWithPanel="True"
                    OverflowButtonVisibility="Collapsed"
                    DefaultLabelPosition="Right" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <CommandBar.Content>
                    <Button x:Name="BackButton" Click="BackButton_Click"  Style="{StaticResource NavigationBackButtonNormalStyle}" VerticalAlignment="Top" />
                </CommandBar.Content>
                <AppBarButton x:Name="ZoomButton"
                          Icon="Zoom"
                          Label="Zoom"
                          HorizontalAlignment="Right"
                          Flyout="{StaticResource zoomFlyout}" />
            </CommandBar>
            <ScrollViewer x:Name="scrollViewer" Loaded="ScrollViewer_Loaded" ZoomMode="Enabled"
                          RelativePanel.Below="DetailViewCommandBar" RelativePanel.AlignHorizontalCenterWithPanel="True"
                          HorizontalScrollMode="Auto"  HorizontalScrollBarVisibility="Disabled"
                          VerticalScrollMode="Auto" VerticalScrollBarVisibility="Disabled"
                          Width="Auto" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
                <Image x:Name="imageToShow" Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <Image.Source>
                        <BitmapImage x:Name="bitmapImage" UriSource="{x:Bind imageUri}"/>
                    </Image.Source>
                </Image>
            </ScrollViewer>
        </RelativePanel>
    </Grid>
</Page>