Skip to content

Commit 6df6fb0

Browse files
committed
Add Card
1 parent d0d35e0 commit 6df6fb0

2 files changed

Lines changed: 142 additions & 0 deletions

File tree

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
using Microsoft.UI.Xaml.Markup;
2+
3+
namespace DevWinUI;
4+
5+
[ContentProperty(Name = nameof(Content))]
6+
public partial class Card : Control
7+
{
8+
public object TitleContent
9+
{
10+
get => (object)GetValue(TitleContentProperty);
11+
set => SetValue(TitleContentProperty, value);
12+
}
13+
14+
public static readonly DependencyProperty TitleContentProperty =
15+
DependencyProperty.Register(nameof(TitleContent), typeof(object), typeof(Card), new PropertyMetadata(defaultValue: null, OnVisualPropertyChanged));
16+
17+
public string Title
18+
{
19+
get => (string)GetValue(TitleProperty);
20+
set => SetValue(TitleProperty, value);
21+
}
22+
public static readonly DependencyProperty TitleProperty =
23+
DependencyProperty.Register(nameof(Title), typeof(string), typeof(Card), new PropertyMetadata(defaultValue: null, OnVisualPropertyChanged));
24+
25+
public object Content
26+
{
27+
get => (object)GetValue(ContentProperty);
28+
set => SetValue(ContentProperty, value);
29+
}
30+
public static readonly DependencyProperty ContentProperty =
31+
DependencyProperty.Register(nameof(Content), typeof(object), typeof(Card), new PropertyMetadata(defaultValue: null));
32+
33+
public Visibility DividerVisibility
34+
{
35+
get => (Visibility)GetValue(DividerVisibilityProperty);
36+
set => SetValue(DividerVisibilityProperty, value);
37+
}
38+
public static readonly DependencyProperty DividerVisibilityProperty =
39+
DependencyProperty.Register(nameof(DividerVisibility), typeof(Visibility), typeof(Card), new PropertyMetadata(defaultValue: null));
40+
41+
private static void OnVisualPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
42+
{
43+
if (d is Card card)
44+
{
45+
card.SetVisualStates();
46+
}
47+
}
48+
49+
protected override void OnApplyTemplate()
50+
{
51+
base.OnApplyTemplate();
52+
SetVisualStates();
53+
}
54+
55+
private void SetVisualStates()
56+
{
57+
if (string.IsNullOrEmpty(Title) && TitleContent == null)
58+
{
59+
VisualStateManager.GoToState(this, "TitleGridCollapsed", true);
60+
DividerVisibility = Visibility.Collapsed;
61+
}
62+
else
63+
{
64+
VisualStateManager.GoToState(this, "TitleGridVisible", true);
65+
DividerVisibility = Visibility.Visible;
66+
}
67+
}
68+
}
Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:local="using:DevWinUI">
5+
6+
<Style BasedOn="{StaticResource DefaultCardStyle}"
7+
TargetType="local:Card" />
8+
9+
<Style x:Key="DefaultCardStyle"
10+
TargetType="local:Card">
11+
<Setter Property="Padding" Value="8" />
12+
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
13+
<Setter Property="VerticalContentAlignment" Value="Stretch" />
14+
<Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
15+
<Setter Property="Background" Value="{ThemeResource CardBackgroundFillColorDefaultBrush}" />
16+
<Setter Property="BorderBrush" Value="{ThemeResource CardStrokeColorDefaultBrush}" />
17+
<Setter Property="BorderThickness" Value="1" />
18+
<Setter Property="Template">
19+
<Setter.Value>
20+
<ControlTemplate TargetType="local:Card">
21+
<Grid VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
22+
Background="{TemplateBinding Background}"
23+
BorderBrush="{TemplateBinding BorderBrush}"
24+
BorderThickness="{TemplateBinding BorderThickness}"
25+
CornerRadius="{TemplateBinding CornerRadius}">
26+
<Grid.RowDefinitions>
27+
<RowDefinition Height="Auto"
28+
MinHeight="44" />
29+
<RowDefinition Height="Auto" />
30+
<RowDefinition Height="*" />
31+
</Grid.RowDefinitions>
32+
<VisualStateManager.VisualStateGroups>
33+
<VisualStateGroup x:Name="TitleGridVisibilityStates">
34+
<VisualState x:Name="TitleGridVisible" />
35+
<VisualState x:Name="TitleGridCollapsed">
36+
<VisualState.Setters>
37+
<Setter Target="TitleGrid.Visibility" Value="Collapsed" />
38+
</VisualState.Setters>
39+
</VisualState>
40+
</VisualStateGroup>
41+
</VisualStateManager.VisualStateGroups>
42+
<Grid x:Name="TitleGrid">
43+
<Grid.ColumnDefinitions>
44+
<ColumnDefinition Width="*" />
45+
<ColumnDefinition Width="Auto" />
46+
</Grid.ColumnDefinitions>
47+
<TextBlock Margin="16,0,0,0"
48+
VerticalAlignment="Center"
49+
FontSize="16"
50+
FontWeight="SemiBold"
51+
Text="{TemplateBinding Title}" />
52+
<ContentPresenter Grid.Column="2"
53+
HorizontalAlignment="Right"
54+
VerticalAlignment="Center"
55+
Content="{TemplateBinding TitleContent}" />
56+
</Grid>
57+
<Rectangle x:Name="Divider"
58+
Grid.Row="1"
59+
Height="1"
60+
HorizontalAlignment="Stretch"
61+
Fill="{ThemeResource DividerStrokeColorDefaultBrush}"
62+
Visibility="{TemplateBinding DividerVisibility}" />
63+
64+
<ContentPresenter Grid.Row="2"
65+
Margin="{TemplateBinding Padding}"
66+
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
67+
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
68+
Content="{TemplateBinding Content}" />
69+
</Grid>
70+
</ControlTemplate>
71+
</Setter.Value>
72+
</Setter>
73+
</Style>
74+
</ResourceDictionary>

0 commit comments

Comments
 (0)