2

そのため、私が望む動作を説明するのはちょっと難しいので、素人のペイントスキルで素敵な絵を描きました。

ここに画像の説明を入力

ItemsControlしたがって、基本的には、見苦しいエキスパンダー アイコンを表示せずに、見出しをエキスパンダーのように動作させたいと考えています (したがって、ボックス内の任意の場所をクリックするだけで、サブ項目が表示されます)。私はすでにデータ階層を配置していますが、私の人生ではエキスパンダーを思い通りに動作させることはできません.誰かがエキスパンダースタイルをオーバーライドしてこのようなことを達成することに成功したか、または次のようなことを達成できる別のコントロールがありますか?これは簡単ですか？簡単なコードをいくつか示しますが、見栄えの悪いエキスパンダー ボタンがあり、ヘッダー テンプレートとエキスパンダーのスタイルをオーバーライドすると、見栄えがさらに悪くなります。

<ItemsControl ItemsSource="{Binding Collection}" 
  HorizontalContentAlignment="Stretch">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Expander Header="Heading">
                <ItemsControl ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Expander Header="Sub-Heading">
                                <ListBox ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch"/>
                            </Expander>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Expander>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>
4

1 に答える 1

1

組み込みのスタイルが気に入らない場合は、エキスパンダーにカスタムスタイルを使用する必要があります:)

ここにスタートがあります：

<Style x:Key="customExpander">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate TargetType="Expander">
                    <DockPanel>
                        <ToggleButton DockPanel.Dock="Top"
                                      IsChecked="{Binding Path=IsExpanded,Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                      Background="{TemplateBinding Background}"
                                      Content="{TemplateBinding Header}"
                                      ContentTemplate="{TemplateBinding HeaderTemplate}"
                                      Foreground="{TemplateBinding Foreground}"
                                      FontFamily="{TemplateBinding FontFamily}"
                                      FontSize="{TemplateBinding FontSize}"
                                      FontStretch="{TemplateBinding FontStretch}"
                                      FontStyle="{TemplateBinding FontStyle}"
                                      FontWeight="{TemplateBinding FontWeight}"
                                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                      Padding="{TemplateBinding Padding}"
                                      Name="HeaderSite"
                                      MinWidth="0"
                                      MinHeight="0"
                                      Margin="1,1,1,1">
                            <ToggleButton.Template>
                                <ControlTemplate TargetType="ToggleButton">
                                    <TextBlock Text="{TemplateBinding Content}" Background="{TemplateBinding Background}" />
                                </ControlTemplate>
                            </ToggleButton.Template>
                        </ToggleButton>

                        <ContentPresenter Content="{TemplateBinding Content}"
                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                  ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                  Name="ExpandSite" Margin="{TemplateBinding Padding}"
                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                  Visibility="Collapsed"
                                  Focusable="False"
                                  DockPanel.Dock="Bottom" />
                    </DockPanel>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsExpanded" Value="True">
                            <Setter TargetName="HeaderSite" Property="Background" Value="Gold" />
                            <Setter TargetName="ExpandSite" Property="Visibility" Value="Visible" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="TextElement.Foreground" Value="{DynamicResource DisabledTextBrush}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

次に、このスタイルを使用するようにxamlを変更します。

<ItemsControl ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Expander Header="Heading" Style="{StaticResource customExpander}" Background="LightSteelBlue" >
                <ItemsControl ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Expander Header="Sub-Heading" Style="{StaticResource customExpander}" Background="LightSalmon">
                                <ListBox ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch"/>
                            </Expander>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Expander>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

編集重要な部分は

<ControlTemplate TargetType="ToggleButton">
    <TextBlock Text="{TemplateBinding Content}" Background="{TemplateBinding Background}" />
</ControlTemplate>

カスタマイズしたい場合。これは非常に生のソリューションなので、それを強化するための十分な余地があります;）

于 2012-10-12T18:01:11.343 に答える