ListBox で VisualStateManager を使用しようとしています。以下のコードは Windows Phone では機能しますが、Windows ストア アプリでは機能しません。ListBoxItem を選択すると、ViewModel 内の選択されたアイテムには値がありますが、VisualStateManager が機能しません。ListBoxItem をクリックしても、UI は同じままです (つまり、選択されているようには見えません)。
これはコードです:
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto"
ItemsSource="{Binding Users, Mode=TwoWay}" SelectedItem="{Binding MySelectedListBox, Mode=TwoWay}"
x:Name="lbuser" Grid.ColumnSpan="2" Grid.Row="1" BorderBrush="Gray"
Height="390" Width="480" Background="Gray" IsTabStop="True" SelectionMode="Single">
<ItemsControl.ItemTemplate>
<DataTemplate/>
</ItemsControl.ItemTemplate>
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity" Duration="0" To=".2"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To=".4" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity" Duration="0" To=".5"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="fillColor" Opacity="0" Fill="#FFBADDE9" />
<Rectangle x:Name="fillColor2" Opacity="0" Fill="#FFBADDE9" />
<ContentPresenter
x:Name="contentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Height="110">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="42"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="94"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="152"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="Bezeichnung" Text="{Binding Path=Bezeichnung}" Grid.ColumnSpan="6" FontWeight="ExtraBold"/>
<TextBlock Grid.Row="1" Text="Stkl"/>
<TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding Path=MySelectedStkl.Stkl}"/>
<TextBlock Grid.Row="1" Grid.Column="3" Text="Bruttolohn"/>
<TextBlock Grid.Row="1" Grid.Column="5" Text="{Binding Path=Bruttolohn, Converter={StaticResource EuroConverter}}"/>
<TextBlock Grid.Row="2" Text="Alter"/>
<TextBlock Grid.Row="2" Grid.Column="2" Text="{Binding Path=Alter}" Width="Auto"/>
<TextBlock Grid.Row="2" Grid.Column="3" Text="Nettolohn"/>
<TextBlock Grid.Row="2" Grid.Column="5" Text="{Binding Path=Nettolohn, Converter={StaticResource EuroConverter}}"/>
<TextBlock Grid.Row="3" Text="Jahr"/>
<TextBlock Grid.Row="3" Grid.Column="2" Text="{Binding Path=MySelectedLoJahr}" Width="Auto"/>
<TextBlock Grid.Row="3" Grid.Column="3" Text="LoSt-Art"/>
<TextBlock Grid.Row="3" Grid.Column="5" Text="{Binding Path=BesondLoSt, Converter={StaticResource BesondereLohnsteuerConverter}}"/>
</Grid>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Resources>
<ItemsPanelTemplate/>
</ListBox>
選択が変更されているときに、分離コードで VisualState を呼び出そうとしました。
public Lohnrechner()
{
this.InitializeComponent();
Window.Current.SizeChanged += Current_SizeChanged;
lbuser.SelectionChanged += lbuser_SelectionChanged;
VisualStateManager.GoToState(this, ApplicationView.Value.ToString(), true);
}
void lbuser_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
VisualStateManager.GoToState(lbuser, "Selected", true);
}
void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
{
VisualStateManager.GoToState(this, ApplicationView.Value.ToString(), true);
}
それでもうまくいかない...
明確にするために: 上記のコードは、VisualStateManager を使用して ListViewItem の Background を設定します。Windows Phone では機能しますが、Windows ストア アプリでは機能しません。