当前位置：首页 > news >正文

3.1.2 materialDesign:Card 的使用介绍

news 来源：原创 2025/4/23 16:29:00

        Card 是 Material Design 中一个重要的布局容器，用于将相关内容组织在一个有阴影、圆角的表面中，非常适合展示独立的内容块（如文章、产品、设置面板等）。
        基本特性：
        圆角设计：默认带有圆角
        内边距：内置合理的内边距
内容灵活：可以包含任何其他控件

1. 简单使用

<materialDesign:Card Margin="16" Width="300"><StackPanel><!-- 卡片图片 --><Image Source="/Assets/Squarrel.jpg" Stretch="UniformToFill"Height="150"/><!-- 卡片内容 --><StackPanel Margin="16"><TextBlock Text="美丽的风景" Style="{StaticResource MaterialDesignHeadline6TextBlock}"/><TextBlock Text="这是一张美丽的风景照片，拍摄于2023年夏季。" Margin="0,8,0,0"Style="{StaticResource MaterialDesignBody1TextBlock}"TextWrapping="Wrap"/></StackPanel><!-- 卡片操作按钮 --><StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,0,8,8"><Button Content="分享" Style="{StaticResource MaterialDesignFlatButton}"/><Button Content="查看" Style="{StaticResource MaterialDesignFlatButton}" Margin="8,0,0,0"/></StackPanel></StackPanel>
</materialDesign:Card>

2.双击后高度变化的动画:

private void ToggleCardHeight(object sender, RoutedEventArgs e)
{var animation = new DoubleAnimation(ExpandableCard.ActualHeight == 100 ? 300 : 100,new Duration(TimeSpan.FromMilliseconds(300)));ExpandableCard.BeginAnimation(FrameworkElement.HeightProperty, animation);
}

<materialDesign:Card Margin="16" Width="250"   Height="100"x:Name="ExpandableCard" MouseDoubleClick="ToggleCardHeight"Cursor="Hand">                <StackPanel><materialDesign:PackIcon Kind="Image" Width="48" Height="48"Margin="0,16,0,0"HorizontalAlignment="Center"/><TextBlock Text="图片库"HorizontalAlignment="Center"Margin="0,8,0,16"Style="{StaticResource MaterialDesignSubtitle1TextBlock}"/></StackPanel>
</materialDesign:Card>