unoplatform
/
Uno.Themes
зеркало из
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

fix(Card): Adjust Card control and styles to fix multiple issues (margin, padding, pressed state,...) 

BREAKING CHANGE: Renaming "Cards" for "Card" across the lib and samples
This commit is contained in:
Agnès Zitte 2020-08-04 23:40:50 -04:00
Родитель 2f439a56d1
Коммит 598eb6f52b
8 изменённых файлов: 117 добавлений и 110 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
README.md
Просмотреть файл

@ -5,7 +5,7 @@
This library is designed to help you use the [material design system](https://material.io/design):
- Color system for both Light and Dark theme
- Styles for existing WinUI controls like Buttons, TextBox, etc.
- Custom Controls for Material Components not offered out of the box by WinUI, such as Cards and BottomNavigationBar.
- Custom Controls for Material Components not offered out of the box by WinUI, such as Card and BottomNavigationBar.
Platform support:
- WinUI / UWP

12
src/library/Uno.Material/Controls/Card.Properties.cs
Просмотреть файл

@ -1,6 +1,7 @@
using System;
using System.Collections.Generic;
using System.Text;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
@ -138,5 +139,16 @@ namespace Uno.Material.Controls
public static readonly DependencyProperty ElevationProperty =
DependencyProperty.Register("Elevation", typeof(double), typeof(Card), new PropertyMetadata(0));
#endregion
#region ShadowColor
public Color ShadowColor
{
get { return (Color)GetValue(ShadowColorProperty); }
set { SetValue(ShadowColorProperty, value); }
}
public static readonly DependencyProperty ShadowColorProperty =
DependencyProperty.Register("ShadowColor", typeof(Color), typeof(Card), new PropertyMetadata(Color.FromArgb(64, 0, 0, 0)));
#endregion
}
}

107
src/library/Uno.Material/Styles/Controls/Card.xaml
Просмотреть файл

@ -6,14 +6,14 @@
xmlns:toolkit="using:Uno.UI.Toolkit">
<!-- Card ToggleButton Variables -->
<StaticResource x:Key="CardsBackgroundColorBrush"
ResourceKey="MaterialSurfaceBrush" />
<StaticResource x:Key="CardBackgroundColorBrush"
ResourceKey="MaterialSurfaceBrush" />
<!-- Other Card Variables -->
<CornerRadius x:Key="CardsBorderRadius">4</CornerRadius>
<Thickness x:Key="CardsStrokeWidth">1</Thickness>
<x:Double x:Key="CardsElevation">6</x:Double>
<Thickness x:Key="CardsElevationMargin">0,0,6,6</Thickness>
<CornerRadius x:Key="CardBorderRadius">4</CornerRadius>
<Thickness x:Key="CardStrokeWidth">1</Thickness>
<x:Double x:Key="CardElevation">6</x:Double>
<Thickness x:Key="CardElevationMargin">6</Thickness>
<Color x:Key="CardElevationShadowColor">#60000000</Color>
<Style x:Key="MaterialOutlinedCardStyle"
@ -24,17 +24,17 @@
<Setter Property="MaxWidth"
Value="344" />
<Setter Property="Margin"
Value="{StaticResource CardsElevationMargin}" />
Value="{StaticResource CardElevationMargin}" />
<Setter Property="Padding"
Value="16,14" />
<Setter Property="Background"
Value="{StaticResource CardsBackgroundColorBrush}" />
Value="{StaticResource CardBackgroundColorBrush}" />
<Setter Property="BorderBrush"
Value="{ThemeResource MaterialOnSurfaceMediumBrush}" />
<Setter Property="BorderThickness"
Value="{StaticResource CardsStrokeWidth}" />
Value="{StaticResource CardStrokeWidth}" />
<Setter Property="CornerRadius"
Value="{StaticResource CardsBorderRadius}" />
Value="{StaticResource CardBorderRadius}" />
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="HorizontalContentAlignment"
@ -171,7 +171,7 @@
Feedback="{StaticResource MaterialOnSurfaceFocusedBrush}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{StaticResource CardsBorderRadius}"
CornerRadius="{StaticResource CardBorderRadius}"
Padding="{TemplateBinding Padding}"
AutomationProperties.AccessibilityView="Raw" />
@ -207,14 +207,12 @@
Value="72" />
<Setter Property="MaxWidth"
Value="344" />
<Setter Property="Margin"
Value="{StaticResource CardsElevationMargin}" />
<Setter Property="Padding"
Value="16,14" />
<Setter Property="Background"
Value="{StaticResource CardsBackgroundColorBrush}" />
Value="{StaticResource CardBackgroundColorBrush}" />
<Setter Property="CornerRadius"
Value="{StaticResource CardsBorderRadius}" />
Value="{StaticResource CardBorderRadius}" />
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="HorizontalContentAlignment"
@ -223,8 +221,12 @@
Value="Stretch" />
<Setter Property="VerticalContentAlignment"
Value="Stretch" />
<Setter Property="Margin"
Value="{StaticResource CardElevationMargin}" />
<Setter Property="Elevation"
Value="{StaticResource CardsElevation}" />
Value="{StaticResource CardElevation}" />
<Setter Property="ShadowColor"
Value="{StaticResource CardElevationShadowColor}" />
<Setter Property="Template">
<Setter.Value>
@ -241,7 +243,7 @@
VerticalAlignment="{TemplateBinding VerticalAlignment}"
CornerRadius="{TemplateBinding CornerRadius}"
Elevation="{TemplateBinding Elevation}"
ShadowColor="{StaticResource CardElevationShadowColor}">
ShadowColor="{TemplateBinding ShadowColor}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
@ -308,7 +310,6 @@
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- Border for PointerOver State-->
@ -356,7 +357,7 @@
<!-- Ripple effect -->
<controls:Ripple Grid.RowSpan="4"
Feedback="{StaticResource MaterialOnSurfaceFocusedBrush}"
CornerRadius="{StaticResource CardsBorderRadius}"
CornerRadius="{StaticResource CardBorderRadius}"
Padding="{TemplateBinding Padding}"
AutomationProperties.AccessibilityView="Raw" />
@ -393,17 +394,17 @@
<Setter Property="MaxWidth"
Value="344" />
<Setter Property="Margin"
Value="{StaticResource CardsElevationMargin}" />
Value="{StaticResource CardElevationMargin}" />
<Setter Property="Padding"
Value="16,14" />
<Setter Property="Background"
Value="{StaticResource CardsBackgroundColorBrush}" />
Value="{StaticResource CardBackgroundColorBrush}" />
<Setter Property="BorderBrush"
Value="{ThemeResource MaterialOnSurfaceMediumBrush}" />
<Setter Property="BorderThickness"
Value="{StaticResource CardsStrokeWidth}" />
Value="{StaticResource CardStrokeWidth}" />
<Setter Property="CornerRadius"
Value="{StaticResource CardsBorderRadius}" />
Value="{StaticResource CardBorderRadius}" />
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="HorizontalContentAlignment"
@ -540,12 +541,12 @@
</StackPanel>
<!-- Ripple effect -->
<controls:Ripple Grid.RowSpan="2"
<controls:Ripple Grid.RowSpan="3"
Grid.ColumnSpan="3"
Feedback="{StaticResource MaterialOnSurfaceFocusedBrush}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{StaticResource CardsBorderRadius}"
CornerRadius="{StaticResource CardBorderRadius}"
Padding="{TemplateBinding Padding}"
AutomationProperties.AccessibilityView="Raw" />
@ -596,17 +597,19 @@
<Setter Property="Padding"
Value="16,14" />
<Setter Property="Background"
Value="{StaticResource CardsBackgroundColorBrush}" />
Value="{StaticResource CardBackgroundColorBrush}" />
<Setter Property="CornerRadius"
Value="{StaticResource CardsBorderRadius}" />
Value="{StaticResource CardBorderRadius}" />
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter Property="Margin"
Value="{StaticResource CardsElevationMargin}" />
Value="{StaticResource CardElevationMargin}" />
<Setter Property="Elevation"
Value="{StaticResource CardsElevation}" />
Value="{StaticResource CardElevation}" />
<Setter Property="ShadowColor"
Value="{StaticResource CardElevationShadowColor}" />
<Setter Property="Template">
<Setter.Value>
@ -624,7 +627,7 @@
VerticalAlignment="{TemplateBinding VerticalAlignment}"
CornerRadius="{TemplateBinding CornerRadius}"
Elevation="{TemplateBinding Elevation}"
ShadowColor="{StaticResource CardElevationShadowColor}">
ShadowColor="{TemplateBinding ShadowColor}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
@ -743,10 +746,10 @@
Visibility="{Binding SubHeaderContent, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource Material_EmptyOrNullToCollapsed}}" />
</StackPanel>
<!-- Ripple effect -->
<controls:Ripple Grid.RowSpan="2"
<controls:Ripple Grid.RowSpan="3"
Grid.ColumnSpan="3"
Feedback="{StaticResource MaterialOnSurfaceFocusedBrush}"
CornerRadius="{StaticResource CardsBorderRadius}"
CornerRadius="{StaticResource CardBorderRadius}"
Padding="{TemplateBinding Padding}"
AutomationProperties.AccessibilityView="Raw" />
@ -797,17 +800,17 @@
<Setter Property="MaxWidth"
Value="344" />
<Setter Property="Margin"
Value="{StaticResource CardsElevationMargin}" />
Value="{StaticResource CardElevationMargin}" />
<Setter Property="Padding"
Value="0" />
<Setter Property="Background"
Value="{StaticResource CardsBackgroundColorBrush}" />
Value="{StaticResource CardBackgroundColorBrush}" />
<Setter Property="BorderBrush"
Value="{ThemeResource MaterialOnSurfaceMediumBrush}" />
<Setter Property="BorderThickness"
Value="{StaticResource CardsStrokeWidth}" />
Value="{StaticResource CardStrokeWidth}" />
<Setter Property="CornerRadius"
Value="{StaticResource CardsBorderRadius}" />
Value="{StaticResource CardBorderRadius}" />
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="HorizontalContentAlignment"
@ -903,14 +906,14 @@
<!-- Border for PointerOver State-->
<Border Grid.RowSpan="3"
Grid.ColumnSpan="2"
Grid.ColumnSpan="3"
x:Name="HoverOverlay"
Background="{StaticResource MaterialOnSurfaceHoverBrush}"
Opacity="0" />
<!-- Border for Focused State-->
<Border Grid.RowSpan="3"
Grid.ColumnSpan="2"
Grid.ColumnSpan="3"
x:Name="FocusedOverlay"
Background="{StaticResource MaterialOnSurfaceFocusedBrush}"
Opacity="0" />
@ -946,11 +949,12 @@
</StackPanel>
<!-- Ripple effect -->
<controls:Ripple Grid.ColumnSpan="3"
<controls:Ripple Grid.RowSpan="3"
Grid.ColumnSpan="3"
Feedback="{StaticResource MaterialOnSurfaceFocusedBrush}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{StaticResource CardsBorderRadius}"
CornerRadius="{StaticResource CardBorderRadius}"
Padding="{TemplateBinding Padding}"
AutomationProperties.AccessibilityView="Raw" />
@ -988,14 +992,12 @@
Value="72" />
<Setter Property="MaxWidth"
Value="344" />
<Setter Property="Margin"
Value="{StaticResource CardsElevationMargin}" />
<Setter Property="Padding"
Value="0" />
<Setter Property="Background"
Value="{StaticResource CardsBackgroundColorBrush}" />
Value="{StaticResource CardBackgroundColorBrush}" />
<Setter Property="CornerRadius"
Value="{StaticResource CardsBorderRadius}" />
Value="{StaticResource CardBorderRadius}" />
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="HorizontalContentAlignment"
@ -1005,9 +1007,11 @@
<Setter Property="VerticalContentAlignment"
Value="Stretch" />
<Setter Property="Margin"
Value="{StaticResource CardsElevationMargin}" />
Value="{StaticResource CardElevationMargin}" />
<Setter Property="Elevation"
Value="{StaticResource CardsElevation}" />
Value="{StaticResource CardElevation}" />
<Setter Property="ShadowColor"
Value="{StaticResource CardElevationShadowColor}" />
<Setter Property="Template">
<Setter.Value>
@ -1025,7 +1029,7 @@
VerticalAlignment="{TemplateBinding VerticalAlignment}"
CornerRadius="{TemplateBinding CornerRadius}"
Elevation="{TemplateBinding Elevation}"
ShadowColor="{StaticResource CardElevationShadowColor}">
ShadowColor="{TemplateBinding ShadowColor}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
@ -1100,14 +1104,14 @@
<!-- Border for PointerOver State-->
<Border Grid.RowSpan="3"
Grid.ColumnSpan="2"
Grid.ColumnSpan="3"
x:Name="HoverOverlay"
Background="{StaticResource MaterialOnSurfaceHoverBrush}"
Opacity="0" />
<!-- Border for Focused State-->
<Border Grid.RowSpan="3"
Grid.ColumnSpan="2"
Grid.ColumnSpan="3"
x:Name="FocusedOverlay"
Background="{StaticResource MaterialOnSurfaceFocusedBrush}"
Opacity="0" />
@ -1143,9 +1147,10 @@
</StackPanel>
<!-- Ripple effect -->
<controls:Ripple Grid.ColumnSpan="3"
<controls:Ripple Grid.RowSpan="3"
Grid.ColumnSpan="3"
Feedback="{StaticResource MaterialOnSurfaceFocusedBrush}"
CornerRadius="{StaticResource CardsBorderRadius}"
CornerRadius="{StaticResource CardBorderRadius}"
Padding="{TemplateBinding Padding}"
AutomationProperties.AccessibilityView="Raw" />

92
src/samples/Uno.Material.Samples/Uno.Material.Samples.Shared/Content/Controls/CardsSamplePage.xaml → src/samples/Uno.Material.Samples/Uno.Material.Samples.Shared/Content/Controls/CardSamplePage.xaml
Просмотреть файл

@ -1,4 +1,4 @@
<Page x:Class="Uno.Material.Samples.Content.Controls.CardsSamplePage"
<Page x:Class="Uno.Material.Samples.Content.Controls.CardSamplePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Uno.Material.Samples.Shared.Content.Controls"
@ -31,6 +31,7 @@
<!-- Sample Header Template -->
<DataTemplate x:Key="HeaderTemplate">
<TextBlock Text="{Binding}"
MaxLines="1"
Margin="16,14,16,0"
Style="{ThemeResource MaterialHeadline6}" />
</DataTemplate>
@ -38,6 +39,7 @@
<!-- Sample SubHeader Template -->
<DataTemplate x:Key="SubHeaderTemplate">
<TextBlock Text="{Binding}"
MaxLines="2"
Margin="16,0,16,14"
Style="{ThemeResource MaterialBody2}" />
</DataTemplate>
@ -99,32 +101,20 @@
</Button>
</DataTemplate>
<!-- Sample Bottom Icons Template -->
<DataTemplate x:Key="BottomIconsTemplate">
<StackPanel Orientation="Horizontal"
VerticalAlignment="Bottom"
HorizontalAlignment="Right">
<Button Content="{Binding}"
Style="{StaticResource IconsSampleButtonStyle}">
<Button.ContentTemplate>
<DataTemplate>
<!-- Material favorite icon -->
<Path Fill="{StaticResource MaterialOnSurfaceBrush}"
Data="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
</DataTemplate>
</Button.ContentTemplate>
</Button>
<Button Content="{Binding}"
Style="{StaticResource IconsSampleButtonStyle}">
<Button.ContentTemplate>
<DataTemplate>
<!-- Material share icon -->
<Path Fill="{StaticResource MaterialOnSurfaceBrush}"
Data="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" />
</DataTemplate>
</Button.ContentTemplate>
</Button>
</StackPanel>
<!-- Sample Bottom Icon Template -->
<DataTemplate x:Key="BottomIconTemplate">
<Button Content="{Binding}"
VerticalAlignment="Bottom"
HorizontalAlignment="Right"
Style="{StaticResource IconsSampleButtonStyle}">
<Button.ContentTemplate>
<DataTemplate>
<!-- Material share icon -->
<Path Fill="{StaticResource MaterialOnSurfaceBrush}"
Data="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" />
</DataTemplate>
</Button.ContentTemplate>
</Button>
</DataTemplate>
<!-- Sample Avatar Image -->
@ -158,7 +148,7 @@
Padding="12">
<!-- Card Outlined -->
<smtx:XamlDisplay UniqueKey="CardsSamplePage_1"
<smtx:XamlDisplay UniqueKey="CardSamplePage_1"
Style="{StaticResource XamlDisplayBelowStyle}">
<controls:Card HeaderContent="Outlined card"
HeaderContentTemplate="{StaticResource HeaderTemplate}"
@ -168,7 +158,7 @@
</smtx:XamlDisplay>
<!-- Outlined disabled Card -->
<smtx:XamlDisplay UniqueKey="CardsSamplePage_2"
<smtx:XamlDisplay UniqueKey="CardSamplePage_2"
Style="{StaticResource XamlDisplayBelowStyle}">
<controls:Card HeaderContent="Outlined disabled Card"
HeaderContentTemplate="{StaticResource HeaderTemplate}"
@ -179,7 +169,7 @@
</smtx:XamlDisplay>
<!-- Card Elevated -->
<smtx:XamlDisplay UniqueKey="CardsSamplePage_3"
<smtx:XamlDisplay UniqueKey="CardSamplePage_3"
Style="{StaticResource XamlDisplayBelowStyle}">
<controls:Card HeaderContent="Elevated card"
HeaderContentTemplate="{StaticResource HeaderTemplate}"
@ -189,7 +179,7 @@
</smtx:XamlDisplay>
<!-- Elevated disabled Card -->
<smtx:XamlDisplay UniqueKey="CardsSamplePage_4"
<smtx:XamlDisplay UniqueKey="CardSamplePage_4"
Style="{StaticResource XamlDisplayBelowStyle}">
<controls:Card HeaderContent="Elevated disabled Card"
HeaderContentTemplate="{StaticResource HeaderTemplate}"
@ -200,7 +190,7 @@
</smtx:XamlDisplay>
<!-- Card Outlined With supporting text -->
<smtx:XamlDisplay UniqueKey="CardsSamplePage_5"
<smtx:XamlDisplay UniqueKey="CardSamplePage_5"
Style="{StaticResource XamlDisplayBelowStyle}">
<controls:Card HeaderContent="Outlined card"
HeaderContentTemplate="{StaticResource HeaderTemplate}"
@ -212,7 +202,7 @@
</smtx:XamlDisplay>
<!-- Card Elevated With supporting text -->
<smtx:XamlDisplay UniqueKey="CardsSamplePage_6"
<smtx:XamlDisplay UniqueKey="CardSamplePage_6"
Style="{StaticResource XamlDisplayBelowStyle}">
<controls:Card HeaderContent="Elevated card"
HeaderContentTemplate="{StaticResource HeaderTemplate}"
@ -224,7 +214,7 @@
</smtx:XamlDisplay>
<!-- Card Outlined with media -->
<smtx:XamlDisplay UniqueKey="CardsSamplePage_9"
<smtx:XamlDisplay UniqueKey="CardSamplePage_9"
Style="{StaticResource XamlDisplayBelowStyle}">
<controls:Card HeaderContent="Outlined card"
HeaderContentTemplate="{StaticResource HeaderTemplate}"
@ -236,7 +226,7 @@
</smtx:XamlDisplay>
<!-- Card Elevated with media -->
<smtx:XamlDisplay UniqueKey="CardsSamplePage_10"
<smtx:XamlDisplay UniqueKey="CardSamplePage_10"
Style="{StaticResource XamlDisplayBelowStyle}">
<controls:Card HeaderContent="Elevated card"
HeaderContentTemplate="{StaticResource HeaderTemplate}"
@ -248,7 +238,7 @@
</smtx:XamlDisplay>
<!-- Card Outlined with media and supporting text -->
<smtx:XamlDisplay UniqueKey="CardsSamplePage_11"
<smtx:XamlDisplay UniqueKey="CardSamplePage_11"
Style="{StaticResource XamlDisplayBelowStyle}">
<controls:Card HeaderContent="Outlined card"
HeaderContentTemplate="{StaticResource HeaderTemplate}"
@ -262,7 +252,7 @@
</smtx:XamlDisplay>
<!-- Card Elevated with media and supporting text -->
<smtx:XamlDisplay UniqueKey="CardsSamplePage_12"
<smtx:XamlDisplay UniqueKey="CardSamplePage_12"
Style="{StaticResource XamlDisplayBelowStyle}">
<controls:Card HeaderContent="Elevated card"
HeaderContentTemplate="{StaticResource HeaderTemplate}"
@ -276,7 +266,7 @@
</smtx:XamlDisplay>
<!-- Card Outlined with media, supporting text and action buttons -->
<smtx:XamlDisplay UniqueKey="CardsSamplePage_13"
<smtx:XamlDisplay UniqueKey="CardSamplePage_13"
Style="{StaticResource XamlDisplayBelowStyle}">
<controls:Card HeaderContent="Outlined card"
HeaderContentTemplate="{StaticResource HeaderTemplate}"
@ -290,7 +280,7 @@
</smtx:XamlDisplay>
<!-- Card Elevated with media, supporting text and action buttons -->
<smtx:XamlDisplay UniqueKey="CardsSamplePage_14"
<smtx:XamlDisplay UniqueKey="CardSamplePage_14"
Style="{StaticResource XamlDisplayBelowStyle}">
<controls:Card HeaderContent="Elevated card"
HeaderContentTemplate="{StaticResource HeaderTemplate}"
@ -304,7 +294,7 @@
</smtx:XamlDisplay>
<!-- Card Outlined with media, supporting text, action buttons and supplemental action buttons -->
<smtx:XamlDisplay UniqueKey="CardsSamplePage_15"
<smtx:XamlDisplay UniqueKey="CardSamplePage_15"
Style="{StaticResource XamlDisplayBelowStyle}">
<controls:Card HeaderContent="Outlined card"
HeaderContentTemplate="{StaticResource HeaderTemplate}"
@ -314,12 +304,12 @@
MediaContentTemplate="{StaticResource SampleImageTemplate}"
SupportingContent="{StaticResource SupportingTextSample}"
SupportingContentTemplate="{StaticResource SupportingWithButtonsTemplate}"
IconsContentTemplate="{StaticResource BottomIconsTemplate}"
IconsContentTemplate="{StaticResource BottomIconTemplate}"
Style="{StaticResource MaterialOutlinedCardStyle}" />
</smtx:XamlDisplay>
<!-- Card Elevated with media, supporting text, action buttons and supplemental action buttons -->
<smtx:XamlDisplay UniqueKey="CardsSamplePage_16"
<smtx:XamlDisplay UniqueKey="CardSamplePage_16"
Style="{StaticResource XamlDisplayBelowStyle}">
<controls:Card HeaderContent="Elevated card"
HeaderContentTemplate="{StaticResource HeaderTemplate}"
@ -329,12 +319,12 @@
MediaContentTemplate="{StaticResource SampleImageTemplate}"
SupportingContent="{StaticResource SupportingTextSample}"
SupportingContentTemplate="{StaticResource SupportingWithButtonsTemplate}"
IconsContentTemplate="{StaticResource BottomIconsTemplate}"
IconsContentTemplate="{StaticResource BottomIconTemplate}"
Style="{StaticResource MaterialElevatedCardStyle}" />
</smtx:XamlDisplay>
<!-- Card Outlined with small media and supporting text -->
<smtx:XamlDisplay UniqueKey="CardsSamplePage_17"
<smtx:XamlDisplay UniqueKey="CardSamplePage_17"
Style="{StaticResource XamlDisplayBelowStyle}">
<controls:Card HeaderContent="Outlined card"
HeaderContentTemplate="{StaticResource HeaderTemplate}"
@ -348,7 +338,7 @@
</smtx:XamlDisplay>
<!-- Card Outlined disabled with small media and supporting text -->
<smtx:XamlDisplay UniqueKey="CardsSamplePage_18"
<smtx:XamlDisplay UniqueKey="CardSamplePage_18"
Style="{StaticResource XamlDisplayBelowStyle}">
<controls:Card HeaderContent="Disabled outlined card"
HeaderContentTemplate="{StaticResource HeaderTemplate}"
@ -363,7 +353,7 @@
</smtx:XamlDisplay>
<!-- Card Elevated with small media and supporting text -->
<smtx:XamlDisplay UniqueKey="CardsSamplePage_19"
<smtx:XamlDisplay UniqueKey="CardSamplePage_19"
Style="{StaticResource XamlDisplayBelowStyle}">
<controls:Card HeaderContent="Elevated card"
HeaderContentTemplate="{StaticResource HeaderTemplate}"
@ -377,7 +367,7 @@
</smtx:XamlDisplay>
<!-- Card Elevated disabled with small media and supporting text -->
<smtx:XamlDisplay UniqueKey="CardsSamplePage_20"
<smtx:XamlDisplay UniqueKey="CardSamplePage_20"
Style="{StaticResource XamlDisplayBelowStyle}">
<controls:Card HeaderContent="Disabled elevated card"
HeaderContentTemplate="{StaticResource HeaderTemplate}"
@ -392,7 +382,7 @@
</smtx:XamlDisplay>
<!-- Card Outlined with Avatar -->
<smtx:XamlDisplay UniqueKey="CardsSamplePage_21"
<smtx:XamlDisplay UniqueKey="CardSamplePage_21"
Style="{StaticResource XamlDisplayBelowStyle}">
<controls:Card HeaderContent="Outlined card"
HeaderContentTemplate="{StaticResource HeaderTemplate}"
@ -409,7 +399,7 @@
</smtx:XamlDisplay>
<!-- Card Outlined disabled with Avatar -->
<smtx:XamlDisplay UniqueKey="CardsSamplePage_22"
<smtx:XamlDisplay UniqueKey="CardSamplePage_22"
Style="{StaticResource XamlDisplayBelowStyle}">
<controls:Card HeaderContent="Disabled outlined card"
HeaderContentTemplate="{StaticResource HeaderTemplate}"
@ -427,7 +417,7 @@
</smtx:XamlDisplay>
<!-- Card Elevated with Avatar -->
<smtx:XamlDisplay UniqueKey="CardsSamplePage_23"
<smtx:XamlDisplay UniqueKey="CardSamplePage_23"
Style="{StaticResource XamlDisplayBelowStyle}">
<controls:Card HeaderContent="Elevated card"
HeaderContentTemplate="{StaticResource HeaderTemplate}"
@ -444,7 +434,7 @@
</smtx:XamlDisplay>
<!-- Card Elevated disabled with Avatar -->
<smtx:XamlDisplay UniqueKey="CardsSamplePage_24"
<smtx:XamlDisplay UniqueKey="CardSamplePage_24"
Style="{StaticResource XamlDisplayBelowStyle}">
<controls:Card HeaderContent="Disabled elevated card"
HeaderContentTemplate="{StaticResource HeaderTemplate}"

4
src/samples/Uno.Material.Samples/Uno.Material.Samples.Shared/Content/Controls/CardsSamplePage.xaml.cs → src/samples/Uno.Material.Samples/Uno.Material.Samples.Shared/Content/Controls/CardSamplePage.xaml.cs
Просмотреть файл

@ -17,9 +17,9 @@ using Windows.UI.Xaml.Navigation;
namespace Uno.Material.Samples.Content.Controls
{
public sealed partial class CardsSamplePage : Page
public sealed partial class CardSamplePage : Page
{
public CardsSamplePage()
public CardSamplePage()
{
this.InitializeComponent();
}

2
src/samples/Uno.Material.Samples/Uno.Material.Samples.Shared/Content/Controls/NavigationViewSamplePage.xaml.cs
Просмотреть файл

@ -102,7 +102,7 @@ private void InitializeNavigationViewItems()
{
AddMenuItem<BottomNavigationBarSamplePage>(content: ""BottomBarNavigation"");
AddMenuItem<ButtonSamplePage>();
AddMenuItem<CardsSamplePage>();
AddMenuItem<CardSamplePage>();
AddMenuItem<CheckBoxSamplePage>();
AddMenuItem<ComboBoxSamplePage>();
AddMenuItem<FabSamplePage>(content: ""FAB"");

2
src/samples/Uno.Material.Samples/Uno.Material.Samples.Shared/SamplesPage.xaml.cs
Просмотреть файл

@ -91,7 +91,7 @@ namespace Uno.Material.Samples
{
AddMenuItem<BottomNavigationBarSamplePage>(content: "BottomBarNavigation", icon: "BottomBarIcon");
AddMenuItem<ButtonSamplePage>(icon: "ButtonIcon");
AddMenuItem<CardsSamplePage>(icon: "CardsIcon");
AddMenuItem<CardSamplePage>(icon: "CardsIcon");
AddMenuItem<CheckBoxSamplePage>(icon: "CheckboxIcon");
AddMenuItem<ComboBoxSamplePage>(icon: "ComboBoxIcon");
AddMenuItem<FabSamplePage>(content: "FAB", icon: "FabIcon");

6
src/samples/Uno.Material.Samples/Uno.Material.Samples.Shared/Uno.Material.Samples.Shared.projitems
Просмотреть файл

@ -24,8 +24,8 @@
<Compile Include="$(MSBuildThisFileDirectory)Content\Controls\ButtonSamplePage.xaml.cs">
<DependentUpon>ButtonSamplePage.xaml</DependentUpon>
</Compile>
<Compile Include="$(MSBuildThisFileDirectory)Content\Controls\CardsSamplePage.xaml.cs">
<DependentUpon>CardsSamplePage.xaml</DependentUpon>
<Compile Include="$(MSBuildThisFileDirectory)Content\Controls\CardSamplePage.xaml.cs">
<DependentUpon>CardSamplePage.xaml</DependentUpon>
</Compile>
<Compile Include="$(MSBuildThisFileDirectory)Content\Controls\CheckBoxSamplePage.xaml.cs">
<DependentUpon>CheckBoxSamplePage.xaml</DependentUpon>
@ -82,7 +82,7 @@
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="$(MSBuildThisFileDirectory)Content\Controls\CardsSamplePage.xaml">
<Page Include="$(MSBuildThisFileDirectory)Content\Controls\CardSamplePage.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>