zoukankan      html  css  js  c++  java
  • Studio for WPF:使用 C1TileView 创建图片库

    C1TileView 提供了数据交互浏览的功能。允许我们设置最大化和最小化浏览模板,我们可以通过最小化模板快速定位详细浏览选项。

    下面我们分步分享实现方法:

    1.添加 C1TileView 到窗体,并且添加 8 个 C1TileViewItem。

    2.添加 Image 地址作为 C1TileViewItem 显示内容,并且设置 Header 属性为图片名。

    <c1:C1TileViewItem Header="Jellyfish.jpg"
    
    Content="Images/Jellyfish.jpg" />

    设置最小化位置:

    <c1:C1TileView Name="c1TileView1"
    
    MinimizedItemsPosition="Bottom" UpdateSourceCollection="False">

    3.添加资源模板,添加最大化和最小化模板:

    <UserControl.Resources>
    
        <DataTemplate x:Key="template">
    
            <Grid>
    
                <Image Source="{Binding}" />
    
            </Grid>
    
        </DataTemplate>
    
        <DataTemplate x:Key="mintemplate">
    
            <Grid Width="100" Height="75">
    
                <Image Source="{Binding}" />
    
            </Grid>
    
        </DataTemplate>
    
        <Style TargetType="c1:C1TileViewItem">
    
            <Setter Property="Padding" Value="0" />
    
            <Setter Property="ContentTemplateMinimized" Value="{StaticResource mintemplate}" />
    
            <Setter Property="ContentTemplateMaximized" Value="{StaticResource template}" />
    
            <Setter Property="ContentTemplate" Value="{StaticResource template}" />
    
        </Style>
    
    </UserControl.Resources>

    使用以上模板既可以完成图片浏览库的功能:

    详细代码:

    <UserControl x:Class="TileViewPhotos.MainPage"
    
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    
        mc:Ignorable="d"
    
        d:DesignHeight="300" d:DesignWidth="400" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml">
    
        <UserControl.Resources>
    
            <DataTemplate x:Key="template">
    
                <Grid>
    
                    <Image Source="{Binding}" />
    
                </Grid>
    
            </DataTemplate>
    
            <DataTemplate x:Key="mintemplate">
    
                <Grid Width="100" Height="75">
    
                    <Image Source="{Binding}" />
    
                </Grid>
    
            </DataTemplate>
    
            <Style TargetType="c1:C1TileViewItem">
    
                <Setter Property="Padding" Value="0" />
    
                <Setter Property="ContentTemplateMinimized" Value="{StaticResource mintemplate}" />
    
                <Setter Property="ContentTemplateMaximized" Value="{StaticResource template}" />
    
                <Setter Property="ContentTemplate" Value="{StaticResource template}" />
    
            </Style>
    
        </UserControl.Resources>
    
        <Grid x:Name="LayoutRoot" Background="White">
    
            <c1:C1TileView Name="c1TileView1" MinimizedItemsPosition="Bottom" UpdateSourceCollection="False">
    
                <c1:C1TileViewItem Header="Chrysanthemum.jpg" Content="Images/Chrysanthemum.jpg" />
    
                <c1:C1TileViewItem Header="Desert.jpg" Content="Images/Desert.jpg" />
    
                <c1:C1TileViewItem Header="Hydrangeas.jpg" Content="Images/Hydrangeas.jpg" />
    
                <c1:C1TileViewItem Header="Jellyfish.jpg" Content="Images/Jellyfish.jpg" />
    
                <c1:C1TileViewItem Header="Koala.jpg" Content="Images/Koala.jpg" />
    
                <c1:C1TileViewItem Header="Lighthouse.jpg" Content="Images/Lighthouse.jpg" />
    
                <c1:C1TileViewItem Header="Penguins.jpg" Content="Images/Penguins.jpg" />
    
                <c1:C1TileViewItem Header="Tulips.jpg" Content="Images/Tulips.jpg" />       
            </c1:C1TileView>
    
        </Grid>
    
    </UserControl>
     
    更多关于 Studio for WPF 控件及特性,请参考:
     

    http://www.gcpowertools.com.cn/products/componentone_studio_wpf.htm

  • 相关阅读:
    Win8系统 Python安装
    一些安卓开源框架整理
    Android 媒体键监听以及模拟媒体键盘的实现 demo
    android View 自动 GONE 问题
    Android 定时器TimerTask 简单使用
    关于Android studio 相对 eclipse 优点
    Java序列化与反序列化
    android shape的使用 边框
    Android Studio 修改 包名 package name
    Android WebView Long Press长按保存图片到手机
  • 原文地址:https://www.cnblogs.com/C1SupportTeam/p/c1_wpf_c1tileview.html
Copyright © 2011-2022 走看看