WinUICommunity

everything can be handy

0%

Styles

We moved all namespaces into a single namespace. No matter which (WinUICommunity) library you use, the namespace is always as follows
For use in the Xaml:
xmlns:wuc="using:WinUICommunity"
For use in the Csharp:
using WinUICommunity;

TextBlock

Name
OobeSubtitleStyle
SecondaryTextStyle 
1
2
<TextBlock Text="Test" Style="{ThemeResource OobeSubtitleStyle}"/>
<TextBlock Text="Test" Style="{ThemeResource SecondaryTextStyle}"/>

WinUICommunity

HyperlinkButton

Name
HyperlinkButtonStyle 
1
<HyperlinkButton Content="Click Here" Style="{ThemeResource HyperlinkButtonStyle}"/>

WinUICommunity

ButtonBase

Name
TextButtonStyle 
1
<Button Content="Click Here" Style="{ThemeResource TextButtonStyle}"/>

WinUICommunity

ListViewItem

Name
ListViewItemSettingStyle 
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
<ListView HorizontalAlignment="Stretch" ItemsSource="{x:Bind ColorFormats, Mode=TwoWay}" SelectionMode="None">
    <ListView.Resources>
        <Style TargetType="ListViewItem" BasedOn="{StaticResource ListViewItemSettingStyle}"/>
    </ListView.Resources>
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="models:ColorFormatModel">
            <Grid MinHeight="68" Padding="0,0,16,0" HorizontalAlignment="Stretch" AutomationProperties.Name="{x:Bind Name}" Background="{ThemeResource  SettingsCardBackground}" BorderBrush="{ThemeResource SettingsCardBorderBrush}" BorderThickness="{ThemeResource SettingsCardBorderThickness}" CornerRadius="{ThemeResource ControlCornerRadius}">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <TextBlock Margin="56,8,0,0" FontSize="16" FontWeight="SemiBold" Text="{x:Bind Name}"/>
                <TextBlock Grid.Row="1" Margin="56,0,0,8" Style="{StaticResource SecondaryTextStyle}" Text="{x:Bind Example}"/>
                <ToggleSwitch Grid.RowSpan="2" Margin="0,0,56,0" HorizontalAlignment="Right" AutomationProperties.HelpText="{x:Bind Name}" IsOn="{x:Bind IsShown, Mode=TwoWay}" OffContent="" OnContent=""/>

                <Button Grid.RowSpan="2" HorizontalAlignment="Right" VerticalAlignment="Center" Background="Transparent" Content="&#xE10C;" FontFamily="{ThemeResource SymbolThemeFontFamily}">
                    <Button.Flyout>
                        <MenuFlyout>
                            <MenuFlyoutItem Icon="Up" IsEnabled="{x:Bind CanMoveUp}" Text="Move up"/>
                            <MenuFlyoutItem IsEnabled="{x:Bind CanMoveDown}" Text="Move down">
                                <MenuFlyoutItem.Icon>
                                    <FontIcon Glyph="&#xE1FD;"/>
                                </MenuFlyoutItem.Icon>
                            </MenuFlyoutItem>
                        </MenuFlyout>
                    </Button.Flyout>
                    <ToolTipService.ToolTip>
                        <TextBlock Text="More options"/>
                    </ToolTipService.ToolTip>
                </Button>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
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
public ObservableCollection<ColorFormatModel> ColorFormats { get; set; } = new ObservableCollection<ColorFormatModel>();

public void InitializeColorFormat()
{
    var hexFormatName = "HEX";
    var rgbFormatName = "RGB";
    var hslFormatName = "HSL";
    var hsvFormatName = "HSV";
    var cmykFormatName = "CMYK";
    var hsbFormatName = "HSB";
    var hsiFormatName = "HSI";
    var hwbFormatName = "HWB";
    var ncolFormatName = "NCol";

    ColorFormats.Add(new ColorFormatModel(hexFormatName, "#EF68FF", true));
    ColorFormats.Add(new ColorFormatModel(rgbFormatName, "rgb(239, 104, 255)", true));
    ColorFormats.Add(new ColorFormatModel(hslFormatName, "hsl(294, 100%, 70%)", true));
    ColorFormats.Add(new ColorFormatModel(hsvFormatName, "hsv(294, 59%, 100%)", true));
    ColorFormats.Add(new ColorFormatModel(cmykFormatName, "cmyk(6%, 59%, 0%, 0%)", true));
    ColorFormats.Add(new ColorFormatModel(hsbFormatName, "hsb(100, 50%, 75%)", true));
    ColorFormats.Add(new ColorFormatModel(hsiFormatName, "hsi(100, 50%, 75%)", true));
    ColorFormats.Add(new ColorFormatModel(hwbFormatName, "hwb(100, 50%, 75%)", true));
    ColorFormats.Add(new ColorFormatModel(ncolFormatName, "R10, 50%, 75%", true));
}

public class ColorFormatModel : Observable
{
    private string _name;
    private string _example;
    private bool _isShown;
    private bool _canMoveUp = true;
    private bool _canMoveDown = true;

    public ColorFormatModel(string name, string example, bool isShown)
    {
        Name = name;
        Example = example;
        IsShown = isShown;
    }

    public string Name
    {
        get { return _name; }
        set { Set(ref _name, value); }
    }

    public string Example
    {
        get { return _example; }
        set { Set(ref _example, value); }
    }

    public bool IsShown
    {
        get { return _isShown; }
        set { Set(ref _isShown, value); }
    }

    public bool CanMoveUp
    {
        get { return _canMoveUp; }
        set { Set(ref _canMoveUp, value); }
    }

    public bool CanMoveDown
    {
        get { return _canMoveDown; }
        set { Set(ref _canMoveDown, value); }
    }
}

WinUICommunity

Border

Name
BorderPanel
InfoBorderPanelStyle
WarningBorderPanelStyle
ErrorBorderPanelStyle
SuccessBorderPanelStyle 
1
2
3
4
<Border Style="{ThemeResource BorderPanel}">

</Border>

WinUICommunity

Grid

Name
GridPanel
GridCardPanel 
1
2
3
<Grid Style="{ThemeResource GridPanel}">

</Grid>
1
2
3
<Grid Style="{ThemeResource GridCardPanel}">

</Grid>

WinUICommunity

StackPanel

Name
StackPanelStyle

WinUICommunity

TabViewItem

Name
TabViewItemRounded 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<Grid>
    <Grid.Resources>
        <Style TargetType="TabViewItem" BasedOn="{StaticResource TabViewItemRounded}"/>
    </Grid.Resources>
    
    <TabView>
        <TabViewItem Header="Settings">
            <TabViewItem.IconSource>
                <SymbolIconSource Symbol="Setting"/>
            </TabViewItem.IconSource>
            
        </TabViewItem>
        <TabViewItem Header="History">
            <TabViewItem.IconSource>
                <SymbolIconSource Symbol="PostUpdate"/>
            </TabViewItem.IconSource>
        </TabViewItem>
        <TabViewItem Header="Download">
            <TabViewItem.IconSource>
                <SymbolIconSource Symbol="Download"/>
            </TabViewItem.IconSource>
        </TabViewItem>
    </TabView>
</Grid>

or

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<TabView>
    <TabViewItem Header="Settings" Style="{ThemeResource TabViewItemRounded}">
        <TabViewItem.IconSource>
            <SymbolIconSource Symbol="Setting"/>
        </TabViewItem.IconSource>
        
    </TabViewItem>
    <TabViewItem Header="History" Style="{ThemeResource TabViewItemRounded}">
        <TabViewItem.IconSource>
            <SymbolIconSource Symbol="PostUpdate"/>
        </TabViewItem.IconSource>
    </TabViewItem>
    <TabViewItem Header="Download" Style="{ThemeResource TabViewItemRounded}">
        <TabViewItem.IconSource>
            <SymbolIconSource Symbol="Download"/>
        </TabViewItem.IconSource>
    </TabViewItem>
</TabView>

WinUICommunity

InfoBar with Blue Color for Informational Severity

just add this:

1
<ResourceDictionary Source="ms-appx:///WinUICommunity.Components/Themes/InfoBarInformationalColor.xaml" />

WinUICommunity

NavigationViewItem Style

just add this:

1
<ResourceDictionary Source="ms-appx:///WinUICommunity.Components/Themes/NavigationViewItemStyle.xaml" />

WinUICommunity

AppTitleBarMenuFlyoutItemStyle