Studio for WPF：使用 C1TileView 创建图片库

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

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

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

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

<c1:C1TileViewItem Header="Jellyfish.jpg"

Content="Images/Jellyfish.jpg" />

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

设置最小化位置：

<c1:C1TileView Name="c1TileView1"

MinimizedItemsPosition="Bottom" UpdateSourceCollection="False">

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

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>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

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

详细代码：

<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

Studio for WPF：使用 C1TileView 创建图片库,码迷,mamicode.com