uwp 的】listView 选择

xml 代码

----------------------------------------------------------

<Page

x:Class="ContentControlWithTemplateSelector.TestPage1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:ContentControlWithTemplateSelector"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">

<Page.Resources>

<DataTemplate x:Key="AvatarWithVisibility">

<Grid >

<Grid Visibility="{Binding Converter={StaticResource RoomTypeConverter},ConverterParameter=Name}">

<Ellipse Fill="Green"></Ellipse>

<TextBlock Text="{Binding Index}" TextAlignment="Center" VerticalAlignment="Center"></TextBlock>

</Grid>

<Grid Visibility="{Binding Converter={StaticResource RoomTypeConverter},ConverterParameter=Image}">

<Ellipse >

<Ellipse.Fill>

<ImageBrush ImageSource="{Binding ImageUri}"></ImageBrush>

</Ellipse.Fill>

</Ellipse>

</Grid>

<Grid CacheMode="BitmapCache" Visibility="{Binding Converter={StaticResource RoomTypeConverter},ConverterParameter=Default}">

<Grid.RowDefinitions>

<RowDefinition></RowDefinition>

<RowDefinition Height="2*"></RowDefinition>

<RowDefinition></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition></ColumnDefinition>

<ColumnDefinition Width="2*"></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

</Grid.ColumnDefinitions>

<Ellipse Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Fill="Green">

</Ellipse>

<Ellipse Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2" Fill="Orange">

</Ellipse>

</Grid>

</Grid>

</DataTemplate>

</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid.ColumnDefinitions>

<ColumnDefinition></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

</Grid.ColumnDefinitions>

<ListView x:Name="listViewAvatar" Grid.Column="0" ItemsSource="{Binding Rooms}">

<ListView.ItemTemplate>

<DataTemplate>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition ></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

</Grid.ColumnDefinitions>

<ContentControl Grid.Column="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Width="50" Height="50"

ContentTemplate="{StaticResource AvatarWithVisibility}"></ContentControl>

<StackPanel Grid.Column="1" >

<TextBlock  Text="{Binding Name}"></TextBlock>

<TextBlock  Text="{Binding ImageUri}"></TextBlock>

</StackPanel>

</Grid>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

<ContentControl Grid.Column="1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"

Content="{Binding SelectedItem,ElementName=listViewAvatar}" Width="150" Height="150"

ContentTemplate="{StaticResource AvatarWithVisibility}"></ContentControl>

</Grid>

</Page>

public sealed partial class TestPage1 : Page
{
　　public TestPage1()
　　{
　　　　this.InitializeComponent();
　　　　this.DataContext = new DataViewModel();
　　}
}

DataViewModel 代码

public class DataViewModel

{

public ObservableCollection<Room> Rooms { get; set; }

public DataViewModel()

{

Rooms = CreateRooms();

}

private ObservableCollection<Room> CreateRooms()

{

ObservableCollection<Room> rooms = new ObservableCollection<Room>();

for (int i = 0; i < 10000; i++)

{

var room = new Room { Index = i };

if (i % 3 == 0)

{

room.Name = "Room " + i;

if (i % 2 == 0)

{

room.ImageUri = new Uri( "ms-appx:///Assets/testImage.jpg");

}

}

rooms.Add(room);

}

return rooms;

}

}