Ghost1372

everything can be handy

Card

It is used to display data in a card. It is a derived class of ContentControl.

1
public class Card : ContentControl

Attributes

Property use
Header Card header content for displaying synchronized text
HeaderTemplate Card header template
HeaderTemplateSelector Card template style selector
HeaderStringFormat Card header template content display format
Footer Card footer content
FooterTemplate Card footer template
FooterTemplateSelector Card footer Style Selector
FooterStringFormat Card footer content display format

Case

Single card use

xamlUse

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<hc:Card MaxWidth="240" BorderThickness="0" Effect="{DynamicResource EffectShadow2}" Margin="8">
    <!--Card Content section-->
    <Border CornerRadius="4,4,0,0" Width="160" Height="160">
        <TextBlock TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" Text="test"/>
    </Border>
    <!--Card Footer part-->
    <hc:Card.Footer>
        <StackPanel Margin="10" Width="160">
            <!--Card First-level content-->
            <TextBlock TextWrapping="NoWrap"  Style="{DynamicResource TextBlockLargeBold}" TextTrimming="CharacterEllipsis" 
                                       Text="Title" 
                                       HorizontalAlignment="Left"/>
            <!--Card Secondary content-->
            <TextBlock TextWrapping="NoWrap" Style="{DynamicResource TextBlockDefault}" TextTrimming="CharacterEllipsis" 
                                       Text="Description" Margin="0,6,0,0"
                                       HorizontalAlignment="Left"/>
        </StackPanel>
    </hc:Card.Footer>
</hc:Card>

effect

Card-SampleCase

As a data template

type of data

1
2
3
4
5
6
public class CardModel
{
    public string Header { get; set; }
    public string Content { get; set; }
    public string Footer { get; set; }
}

View entity

This entity is not designed according to the standard mvvm method, but is only used as a display for ordinary data sources.

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
72
73
74
75
public class CardDemoViewModel
{
    private IList<CardModel> _dataList;
    public CardDemoViewModel()
    {
        DataList = GetCardDataList();
    }
    internal ObservableCollection<CardModel> GetCardDataList()
    {
        return new ObservableCollection<CardModel>
        {
            new CardModel
            {
                Header = "Atomic",
                Content = "1.jpg",
                Footer = "Stive Morgan"
            },
            new CardModel
            {
                Header = "Zinderlong",
                Content = "2.jpg",
                Footer = "Zonderling"
            },
            new CardModel
            {
                Header = "Busy Doin' Nothin'",
                Content = "3.jpg",
                Footer = "Ace Wilder"
            },
            new CardModel
            {
                Header = "Wrong",
                Content = "4.jpg",
                Footer = "Blaxy Girls"
            },
            new CardModel
            {
                Header = "The Lights",
                Content = "5.jpg",
                Footer = "Panda Eyes"
            },
            new CardModel
            {
                Header = "EA7-50-Cent Disco",
                Content = "6.jpg",
                Footer = "еяхат музыка"
            },
            new CardModel
            {
                Header = "Monsters",
                Content = "7.jpg",
                Footer = "Different Heaven"
            },
            new CardModel
            {
                Header = "Gangsta Walk",
                Content = "8.jpg",
                Footer = "Illusionize"
            },
            new CardModel
            {
                Header = "Won't Back Down",
                Content = "9.jpg",
                Footer = "Boehm"
            },
            new CardModel
            {
                Header = "Katchi",
                Content = "10.jpg",
                Footer = "Ofenbach"
            }
        };
    }
    public IList<CardModel> DataList { get => _dataList; set => _dataList = value; }
}

xamlUse

handycontrol namespace and DataContext need to be introduced by themselves

1
2
3
4
xmlns:hc="https://handyorg.github.io/handycontrol"
xmlns:data="CardModel namespace"
xmlns:vm="CardDemoViewModel namespace"
........
1
2
3
4
5
6
7
<!--Used in the parent of listbox-->
   <listbox.Resources>
       <vm:CardDemoViewModel x:Key="Card"></vm:CardDemoViewModel>
   </listbox.Resources>
   <listbox.DataContext>
       <Binding Source="{StaticResource Card}"/>
   </listbox.DataContext>
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
<ListBox Margin="32" BorderThickness="0" Style="{DynamicResource WrapPanelHorizontalListBox}" ItemsSource="{Binding DataList}">
        <ListBox.ItemTemplate>
            <DataTemplate DataType="data:CardModel">
                <hc:Card MaxWidth="240" BorderThickness="0" Effect="{DynamicResource EffectShadow2}" Margin="8" Footer="{Binding Footer}">
                    <!--Card Content section template-->
                    <Border CornerRadius="4,4,0,0" Width="160" Height="160">
                        <TextBlock TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding Content}"/>
                    </Border>
                    <!--Card Footer section template-->
                    <hc:Card.FooterTemplate>
                        <DataTemplate>
                            <StackPanel Margin="10" Width="160">
                                <!--Card First-level content-->
                                <TextBlock TextWrapping="NoWrap"  Style="{DynamicResource TextBlockLargeBold}" TextTrimming="CharacterEllipsis" 
                                           Text="{Binding DataContext.Header,RelativeSource={RelativeSource AncestorType=hc:Card}}" 
                                           HorizontalAlignment="Left"/>
                                <!--Card Secondary content-->
                                <TextBlock TextWrapping="NoWrap" Style="{DynamicResource TextBlockDefault}" TextTrimming="CharacterEllipsis" 
                                           Text="{Binding}" Margin="0,6,0,0"
                                           HorizontalAlignment="Left"/>
                            </StackPanel>
                        </DataTemplate>
                    </hc:Card.FooterTemplate>
                </hc:Card>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

effect

Card-Case01

0%