0

ListBoxのカスタムコントロールテンプレートを作成していますが、視覚的な状態に問題があります。VisualState MouseOverを使用すると、選択したアイテムを含むすべてのアイテムに影響します。これには、個別のスタイルを設定する必要があります。

MetroにはSelectedPointerOverがありますが、WPFやその他の代替手段に相当するものはありますか？

編集：

たとえば、すべてのアイテムの前景は最初は黒です。

1つのアイテムが選択されると、その前景は白に変わります（そして、選択されていないアイテムは黒の前景のままになります）。

そして、選択されていないアイテムにマウスオーバーすると、前景が青に変わり、選択されたアイテムにマウスオーバーすると、前景が赤に変わります。

4

1 に答える 1

1

私の知る限り、WPFにはその状態に相当するものはありません。

WPF ListBoxItemには、状態Unselected、SelectedおよびSelectedUnfocusedグループ内SelectionStatesと状態Normal、MouseOverおよびDisabledグループ内がありCommonStatesます。各グループの状態は相互に排他的ですが、異なるグループの状態を同時に取得できます。ListBoxItemは、たとえば、状態にあるSelectedとMouseOver同時に状態にすることができます。

この事実を考慮した視覚化を定義するのは、コントロールテンプレート次第です。たとえば、アイテムが選択されているときに別の背景ブラシでアイテムを塗りつぶし、マウスがアイテムの上にあるときに外側の境界線を描画することができます。重要なことは、関連する状態が独立していて同時に実行できるため、同時に表示される独立した視覚化があることです。ユーザーは通常、選択したリストアイテムがそのアイテムの上にマウスを移動しただけで選択されたように見えない場合、少し混乱します。

編集-以下のリストボックスの例。おそらく、ビジュアルステートの代わりにトリガーを使用すると、はるかに簡単に実行できます。

<ListBox SelectionMode="Extended">
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid Background="LightGray" Margin="1">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Disabled"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="UnselectedText"
                                                            Storyboard.TargetProperty="Foreground.Color"
                                                            To="Blue" Duration="0:0:0.1"/>
                                            <ColorAnimation Storyboard.TargetName="SelectedText"
                                                            Storyboard.TargetProperty="Foreground.Color"
                                                            To="Red" Duration="0:0:0.1"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="UnselectedText"
                                                             Storyboard.TargetProperty="Opacity"
                                                             To="0" Duration="0:0:0.1"/>
                                            <DoubleAnimation Storyboard.TargetName="SelectedText"
                                                             Storyboard.TargetProperty="Opacity"
                                                             To="1" Duration="0:0:0.1"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <TextBlock Name="UnselectedText" Margin="2" Text="{TemplateBinding Content}">
                                <TextBlock.Foreground>
                                    <SolidColorBrush Color="Black"/>
                                </TextBlock.Foreground>
                            </TextBlock>
                            <TextBlock Name="SelectedText" Margin="2" Text="{TemplateBinding Content}" Opacity="0">
                                <TextBlock.Foreground>
                                    <SolidColorBrush Color="White"/>
                                </TextBlock.Foreground>
                            </TextBlock>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>
    <ListBox.Items>
        <ListBoxItem Content="Item 1"/>
        <ListBoxItem Content="Item 2"/>
        <ListBoxItem Content="Item 3"/>
        <ListBoxItem Content="Item 4"/>
        <ListBoxItem Content="Item 5"/>
        <ListBoxItem Content="Item 6"/>
        <ListBoxItem Content="Item 7"/>
        <ListBoxItem Content="Item 8"/>
        <ListBoxItem Content="Item 9"/>
        <ListBoxItem Content="Item 10"/>
    </ListBox.Items>
</ListBox>
于 2012-06-28T09:41:18.457 に答える