CommunityToolkit-Windows/components/Segmented/samples/SegmentedBasicSample.xaml at 00de4bcae5d5e04edac927bfd01a9bb6bfdb189e · Avid29/CommunityToolkit-Windows · 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
<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="SegmentedExperiment.Samples.SegmentedBasicSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:SegmentedExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:ui="using:CommunityToolkit.WinUI"
      mc:Ignorable="d">

    <StackPanel x:Name="Panel"
                Spacing="8">
        <TextBlock Style="{StaticResource BodyStrongTextBlockStyle}"
                   Text="Icon + content" />
        <controls:Segmented HorizontalAlignment="{x:Bind local:SegmentedBasicSample.ConvertStringToHorizontalAlignment(Alignment), Mode=OneWay}"
                            Orientation="{x:Bind local:SegmentedBasicSample.ConvertStringToOrientation(OrientationMode), Mode=OneWay}"
                            SelectedIndex="0"
                            SelectionMode="{x:Bind local:SegmentedBasicSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}">
            <controls:SegmentedItem Content="Item 1"
                                    Icon="{ui:FontIcon Glyph=&#xEA3A;}" />
            <controls:SegmentedItem Content="Item 2"
                                    Icon="{ui:FontIcon Glyph=&#xEA3A;}" />
            <controls:SegmentedItem Content="Item 3 with a long label"
                                    Icon="{ui:FontIcon Glyph=&#xEA3A;}" />
            <controls:SegmentedItem Content="Item 4"
                                    Icon="{ui:FontIcon Glyph=&#xEA3A;}" />
        </controls:Segmented>

        <TextBlock Margin="0,24,0,0"
                   Style="{StaticResource BodyStrongTextBlockStyle}"
                   Text="Icon only" />
        <controls:Segmented HorizontalAlignment="{x:Bind local:SegmentedBasicSample.ConvertStringToHorizontalAlignment(Alignment), Mode=OneWay}"
                            Orientation="{x:Bind local:SegmentedBasicSample.ConvertStringToOrientation(OrientationMode), Mode=OneWay}"
                            SelectedIndex="2"
                            SelectionMode="{x:Bind local:SegmentedBasicSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}">
            <controls:SegmentedItem Icon="{ui:FontIcon Glyph=&#xE8BF;}"
                                    ToolTipService.ToolTip="Day view" />
            <controls:SegmentedItem Icon="{ui:FontIcon Glyph=&#xE8C0;}"
                                    ToolTipService.ToolTip="Week view" />
            <controls:SegmentedItem Icon="{ui:FontIcon Glyph=&#xE787;}"
                                    ToolTipService.ToolTip="Month view" />
        </controls:Segmented>
    </StackPanel>
</Page>