自定义ListBox/ListView为"FlipView"（图片）

Question

我想自定义我的列表框或列表视图，使其表现得像下图中的控件：

它类似于 FlipView，但我以前从未使用过 FlipView，只是看到了一些图片。

Answer 1

尝试这样的事情

<UserControl x:Class="WpfApplication1.UserControl1"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         >
<UserControl.Resources>
    <DataTemplate x:Key="Test">

        <Grid >
            <Border Background="Red"
                    Loaded="RedBorder_OnLoaded" >
                <!--content for this card goes here-->
                <TextBlock Text="{Binding}"></TextBlock>
            </Border>
            <Border Background="Green"
                    Loaded="GreenBorder_OnLoaded"
                    Visibility="Collapsed" >
                <!--content for this card goes here-->
                <TextBlock Text="{Binding}"></TextBlock>
            </Border>
        </Grid>

    </DataTemplate>
</UserControl.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <ListBox Name="myListbox"
             Margin="50"
             HorizontalContentAlignment="Stretch"
             VerticalContentAlignment="Stretch"
             ItemTemplate="{StaticResource Test}" />
    <StackPanel Grid.Row="1"
                HorizontalAlignment="Center"
                Orientation="Horizontal">
        <Button Width="20"
                Height="20"
                Background="Black"
                Click="FirstButton_OnClick" />
        <Button Width="20"
                Height="20"
                Background="Black"
                Click="SecondButton_OnClick" />
    </StackPanel>
</Grid>

</UserControl>

代码隐藏

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;

namespace WpfApplication1
{
public partial class UserControl1 : UserControl
{
    private readonly List<Border> redBorders = new List<Border>();
    private readonly List<Border> greenBorders = new List<Border>();

    public UserControl1()
    {
        InitializeComponent();
        myListbox.ItemsSource = new List<string>() { "Batman", "Superman",     "All others" };
    }

    private void RedBorder_OnLoaded(object sender, RoutedEventArgs e)
    {
        redBorders.Add(sender as Border);
    }

    private void GreenBorder_OnLoaded(object sender, RoutedEventArgs e)
    {
        greenBorders.Add(sender as Border);
    }

    private void FirstButton_OnClick(object sender, RoutedEventArgs e)
    {
        redBorders.ForEach(p => p.Visibility = Visibility.Visible);
        greenBorders.ForEach(p => p.Visibility = Visibility.Collapsed);
    }

    private void SecondButton_OnClick(object sender, RoutedEventArgs e)
    {
        redBorders.ForEach(p => p.Visibility = Visibility.Collapsed);
        greenBorders.ForEach(p => p.Visibility = Visibility.Visible);
    }
}
}

用法

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wpfApplication1="clr-namespace:WpfApplication1">
<wpfApplication1:UserControl1 />

它很简单，但我想你可以从这里改进它。

Answer 2

我找到了适合我的解决方案。它可能会帮助某人。我对它做了一些改动，它非常适合我。

http://www.codeproject.com/Articles/741026/WPF-FlipView

自定义ListBox/ListView为"FlipView"（图片）

Customize ListBox/ListView to "FlipView" (Picture)

c#

wpf

wpf-controls