2

ItemTemplate 内にエキスパンダーを持つリストボックスがあります。エキスパンダーの IsExpanded プロパティを ListBoxItem の IsSelected プロパティにバインドできました。ここで、IsSelected プロパティにもバインドされた ListBoxItem のコンテンツにスタイルを適用したいと考えています。

    <ListBox.ItemTemplate>
        <DataTemplate>
            <Border Name="myBorder">
                    <StackPanel Orientation="Vertical">
                    <TextBlock Text="{Binding Description}" />
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Date:"/>
                        <TextBlock Text="{Binding Date}"/>
                    </StackPanel>
                    <dx:DXExpander Name="expanderDetails" 
                              IsExpanded="{Binding Mode=TwoWay, Path=IsSelected,
                              RelativeSource={RelativeSource AncestorType=ListBoxItem, Mode=FindAncestor}}">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Count:"/>
                            <TextBlock Text="{Binding Count}"/>
                        </StackPanel>
                    </dx:DXExpander>
                </StackPanel>
            </Border>
        </DataTemplate>
    </ListBox.ItemTemplate>

私がやりたいことは、「myBorder」ボーダーのスタイルを、選択されていないListBoxItemsの場合は「NotSelectedBorderStyle」に、SelectedItem（単一選択のListBox）の場合は「SelectedBorderStyle」に設定することです。

参考までに、スタイルは背景、境界線などを定義します。どのアイテムが選択されているかを明確にするためだけに、これらのスタイルには特別なものはありません。

ここで受け入れられた答えを試しましたが、スタイルを完全に切り替えると、DXExpander の素敵な拡張アニメーションが失われます。

トリガーを使用した解決策があるに違いないと思いますが、適切な場所にヒットすることはできません。

4

1 に答える 1

4

ついに私はそれを手に入れました、これが他の誰かの時間と苦痛を節約することを願ってここに投稿しています:-P

このコードはいくつかの追加のことを行います。EventSetterと対応するHandlerメソッドは、要素を含むListBoxItemを選択するために、DataTemplate内の要素へのクリックをキャプチャするためにあります（項目内にテキストを入力しない場合は、別のものが選択されている間）。

内側の境界線（ "myBorder"）は、スタックパネルの単なるコンテナーです。ListBoxItemが選択されるとスタイルが変更される別の境界線（ "backgroundBorder"）内にすべてをラップする必要がありました。

    <Style x:Key="FocusedContainer" TargetType="{x:Type ListBoxItem}">
        <Setter Property="Background" Value="LightGray"/>
        <EventSetter Event="GotKeyboardFocus" Handler="OnListBoxItemContainerFocused" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <Border x:Name="backgroundBorder" Width="Auto" Style="{StaticResource NotSelectedBorderStyle}">
                        <ContentPresenter Content="{TemplateBinding Content}">
                            <ContentPresenter.ContentTemplate>
                                <DataTemplate>
                                    <Border Name="myBorder">
                                         <StackPanel Orientation="Vertical">
                                               <TextBlock Text="{Binding Description}" />
                                         <StackPanel Orientation="Horizontal">
                                               <TextBlock Text="Date:"/>
                                               <TextBlock Text="{Binding Date}"/>
                                         </StackPanel>
                                         <dx:DXExpander Name="expanderDetails" 
                                             IsExpanded="{Binding Mode=TwoWay, Path=IsSelected,
                                             RelativeSource={RelativeSource AncestorType=ListBoxItem, Mode=FindAncestor}}">
                                                <StackPanel Orientation="Horizontal">
                                                     <TextBlock Text="Count:"/>
                                                     <TextBlock Text="{Binding Count}"/>
                                                </StackPanel>
                                         </dx:DXExpander>
                                       </StackPanel>
                                    </Border>
                                </DataTemplate>
                            </ContentPresenter.ContentTemplate>
                        </ContentPresenter>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="backgroundBorder" Property="Style" Value="{StaticResource SelectedBorderStyle}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

次に、リストボックスのItemContainerStyleを上記のスタイルに設定します。

<ListBox Background="#7FFFFFFF" HorizontalContentAlignment="Stretch" 
         ItemsSource="{Binding}" IsSynchronizedWithCurrentItem="True"
         ItemContainerStyle="{StaticResource FocusedContainer}"/>

最後に、GotKeyBoardFocusハンドラーの背後にあるコードは次のとおりです。

    private void OnListBoxItemContainerFocused(object sender, RoutedEventArgs e)
    {
        (sender as ListBoxItem).IsSelected = true;
    }

コードがめちゃくちゃですが、UIはかなりきれいです。これが誰かに役立つことを願っています！

于 2013-01-27T01:17:47.420 に答える