UWPでListViewのアイテムをToggleButtonにして、アニメーションでListViewを動かすとToggleButtonの選択状態がおかしくなります。
調べてもヒットできなかったので解決法をご存じのかたいらっしゃいましたらご教示お願い致します。
再現手順
- ListViewのItemsTemplateにToggleButton配置
- データは1000件ぐらいにしておく
- アプリを実行して、ListViewの一番上以外のToggleButtonを押下
- ListViewをアニメーションで動かす
- ListViewをスクロールする
結果
選択していないToggleButtonも選択状態になっています。
(だいたい52件ごとにひとつ選択されている)
補足
ListViewの仮想化を無効にすると起きなくなります。
UWPを19041にしても起きました。
データはList<string>にしていますが任意で大丈夫です。
環境
UWP:17763
最小バージョン:16229
Microsoft.NETCore.UniversalWindowsPlatform:6.2.13
コード
MainPage.xaml
<Page
x:Class="ListViewErrorTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ListViewErrorTest"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<Storyboard x:Name="SlideRightStoryboard">
<DoubleAnimation Duration="00:00:00.4000000" To="500" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="grid" d:IsOptimized="True">
<DoubleAnimation.EasingFunction>
<ExponentialEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
<Storyboard x:Name="SlideLeftStoryboard">
<DoubleAnimation Duration="00:00:00.4000000" To="200" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="grid" d:IsOptimized="True">
<DoubleAnimation.EasingFunction>
<ExponentialEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
<CollectionViewSource x:Key="dataSource" Source="{Binding DataSource}" ItemsPath="Value" IsSourceGrouped="True"/>
</Page.Resources>
<Grid>
<ScrollViewer>
<StackPanel>
<Grid Name="grid" RenderTransformOrigin="0.5,0.5" Width="800" Height="800">
<Grid.RenderTransform>
<CompositeTransform TranslateX="0"/>
</Grid.RenderTransform>
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="80">
<ToggleButton Content="{Binding}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
<ToggleButton Name="slideButton" Content="スライド" Width="200" FontSize="40" Margin="100,50,0,0"/>
</StackPanel>
</ScrollViewer>
</Grid>
</Page>
MainPage.xaml.cs
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
this.listView.ItemsSource = CreateData();
this.slideButton.Click += (s, e) =>
{
if (s is ToggleButton toggleButton)
{
if (toggleButton.IsChecked == true)
{
this.SlideRightStoryboard.Begin();
}
else
{
this.SlideLeftStoryboard.Begin();
}
}
};
}
private List<string> CreateData()
{
List<string> data = new List<string>();
for (int i = 0; i < 1000; i++)
{
data.Add($"No{i}");
}
return data;
}
}