web-dev-qa-db-ja.com

WPF ComboBoxの選択したアイテムに、ドロップダウンパーツのアイテムとは異なるテンプレートを使用できますか？

たとえば、Customerオブジェクトで満たされたWPFコンボボックスがあります。私はDataTemplateを持っています：

<DataTemplate DataType="{x:Type MyAssembly:Customer}">
    <StackPanel>
        <TextBlock Text="{Binding Name}" />
        <TextBlock Text="{Binding Address}" />
    </StackPanel>
</DataTemplate>

このようにして、ComboBoxを開くと、さまざまな顧客の名前とその下に住所が表示されます。

しかし、Customerを選択すると、ComboBoxに名前を表示したいだけです。何かのようなもの：

<DataTemplate DataType="{x:Type MyAssembly:Customer}">
    <StackPanel>
        <TextBlock Text="{Binding Name}" />
    </StackPanel>
</DataTemplate>

ComboBoxで選択したアイテムに別のテンプレートを選択できますか？

ソリューション

答えの助けを借りて、私はこのように解決しました：

<UserControl.Resources>
    <ControlTemplate x:Key="SimpleTemplate">
        <StackPanel>
            <TextBlock Text="{Binding Name}" />
        </StackPanel>
    </ControlTemplate>
    <ControlTemplate x:Key="ExtendedTemplate">
        <StackPanel>
            <TextBlock Text="{Binding Name}" />
            <TextBlock Text="{Binding Address}" />
        </StackPanel>
    </ControlTemplate>
    <DataTemplate x:Key="CustomerTemplate">
        <Control x:Name="theControl" Focusable="False" Template="{StaticResource ExtendedTemplate}" />
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ComboBoxItem}}, Path=IsSelected}" Value="{x:Null}">
                <Setter TargetName="theControl" Property="Template" Value="{StaticResource SimpleTemplate}" />
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>
</UserControl.Resources>

次に、私のコンボボックス：

<ComboBox ItemsSource="{Binding Customers}" 
                SelectedItem="{Binding SelectedCustomer}"
                ItemTemplate="{StaticResource CustomerTemplate}" />

動作させるための重要な部分はBinding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ComboBoxItem}}, Path=IsSelected}" Value="{x:Null}"（値がTrueではなくx：Nullである必要がある部分）。

wpftemplatescombobox
60
Peter

上記のDataTrigger/Bindingソリューションの使用に関する問題は2つあります。 1つ目は、選択したアイテムの相対ソースが見つからないというバインディング警告が実際に表示されることです。ただし、より大きな問題は、データテンプレートが乱雑になり、ComboBoxに固有のものになっていることです。

DataTemplateSelectorプロパティとSelectedItemTemplateプロパティを使用して個別のテンプレートを指定できるDropDownItemsTemplateを使用するという点で、私が提示する解決策はWPFデザインに従います。どちらも。

public class ComboBoxTemplateSelector : DataTemplateSelector
{
    public DataTemplate         SelectedItemTemplate          { get; set; }
    public DataTemplateSelector SelectedItemTemplateSelector  { get; set; }
    public DataTemplate         DropdownItemsTemplate         { get; set; }
    public DataTemplateSelector DropdownItemsTemplateSelector { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        var itemToCheck = container;

        // Search up the visual tree, stopping at either a ComboBox or
        // a ComboBoxItem (or null). This will determine which template to use
        while(itemToCheck != null && !(itemToCheck is ComboBoxItem) && !(itemToCheck is ComboBox))
            itemToCheck = VisualTreeHelper.GetParent(itemToCheck);

        // If you stopped at a ComboBoxItem, you're in the dropdown
        var inDropDown = (itemToCheck is ComboBoxItem);

        return inDropDown
            ? DropdownItemsTemplate ?? DropdownItemsTemplateSelector?.SelectTemplate(item, container)
            : SelectedItemTemplate  ?? SelectedItemTemplateSelector?.SelectTemplate(item, container); 
    }
}

注：簡単にするために、ここのサンプルコードでは新しい「？」を使用しています。 C＃6の機能（VS 2015）。古いバージョンを使用している場合は、単に「？」を削除してください上記の「SelectTemplate」を呼び出す前に明示的にnullをチェックし、そうでない場合はnullを返します。

return inDropDown
    ? DropdownItemsTemplate ??
        ((DropdownItemsTemplateSelector != null)
            ? DropdownItemsTemplateSelector.SelectTemplate(item, container)
            : null)
    : SelectedItemTemplate ??
        ((SelectedItemTemplateSelector != null)
            ? SelectedItemTemplateSelector.SelectTemplate(item, container)
            : null)

また、XAMLでの利便性のために、上記のクラスを単に作成して返すマークアップ拡張機能も含めました。

public class ComboBoxTemplateSelectorExtension : MarkupExtension
{
    public DataTemplate         SelectedItemTemplate          { get; set; }
    public DataTemplateSelector SelectedItemTemplateSelector  { get; set; }
    public DataTemplate         DropdownItemsTemplate         { get; set; }
    public DataTemplateSelector DropdownItemsTemplateSelector { get; set; }

    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        return new ComboBoxTemplateSelector(){
            SelectedItemTemplate          = SelectedItemTemplate,
            SelectedItemTemplateSelector  = SelectedItemTemplateSelector,
            DropdownItemsTemplate         = DropdownItemsTemplate,
            DropdownItemsTemplateSelector = DropdownItemsTemplateSelector
        };
    }
}

そして、これがあなたの使い方です。きれいでわかりやすく、テンプレートは「純粋」のまま

注：「is：」は、クラスをコード内に配置するためのxmlnsマッピングです。独自のネームスペースをインポートし、必要に応じて「is：」を変更してください。

<ComboBox x:Name="MyComboBox"
    ItemsSource="{Binding Items}"
    ItemTemplateSelector="{is:ComboBoxTemplateSelector
        SelectedItemTemplate={StaticResource MySelectedItemTemplate},
        DropdownItemsTemplate={StaticResource MyDropDownItemTemplate}}" />

必要に応じて、DataTemplateSelectorsも使用できます...

<ComboBox x:Name="MyComboBox"
    ItemsSource="{Binding Items}"
    ItemTemplateSelector="{is:ComboBoxTemplateSelector
        SelectedItemTemplateSelector={StaticResource MySelectedItemTemplateSelector},
        DropdownItemsTemplateSelector={StaticResource MyDropDownItemTemplateSelector}}" />

またはミックスしてマッチ！ここでは、選択したアイテムのテンプレートを使用していますが、DropDownアイテムのテンプレートセレクターを使用しています。

<ComboBox x:Name="MyComboBox"
    ItemsSource="{Binding Items}"
    ItemTemplateSelector="{is:ComboBoxTemplateSelector
        SelectedItemTemplate={StaticResource MySelectedItemTemplate},
        DropdownItemsTemplateSelector={StaticResource MyDropDownItemTemplateSelector}}" />

さらに、選択したアイテムまたはドロップダウンアイテムにTemplateまたはTemplateSelectorを指定しない場合は、予想どおり、データタイプに基づいたデータテンプレートの通常の解決に単純にフォールバックします。そのため、たとえば以下の場合、選択されたアイテムのテンプレートは明示的に設定されますが、ドロップダウンはデータコンテキスト内のオブジェクトのDataTypeに適用されるデータテンプレートを継承します。

<ComboBox x:Name="MyComboBox"
    ItemsSource="{Binding Items}"
    ItemTemplateSelector="{is:ComboBoxTemplateSelector
        SelectedItemTemplate={StaticResource MyTemplate} />

楽しい！

55
MarqueIV

シンプルなソリューション：

<DataTemplate>
    <StackPanel>
        <TextBlock Text="{Binding Name}"/>
        <TextBlock Text="{Binding Address}">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ComboBoxItem}}" Value="{x:Null}">
                            <Setter Property="Visibility" Value="Collapsed"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </StackPanel>
</DataTemplate>

（リストではなく、ボックスで選択および表示される要素はComboBoxItem内にないため、Nullのトリガーです）

テンプレート全体を切り替える場合は、トリガーを使用して同様に行うことができます。 異なるContentTemplateをContentControlに適用 。これにより、この選択的なケースのテンプレートを変更するだけで、デフォルトのDataTypeベースのテンプレート選択を保持することもできます。例：

<ComboBox.ItemTemplate>
    <DataTemplate>
        <ContentControl Content="{Binding}">
            <ContentControl.Style>
                <Style TargetType="ContentControl">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ComboBoxItem}}"
                                        Value="{x:Null}">
                            <Setter Property="ContentTemplate">
                                <Setter.Value>
                                    <DataTemplate>
                                        <!-- ... -->
                                    </DataTemplate>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ContentControl.Style>
        </ContentControl>
    </DataTemplate>
</ComboBox.ItemTemplate>

選択したアイテムの相対ソースが見つからないため、このメソッドはバインディングエラーを引き起こすことに注意してください。別のアプローチについては、 MarqueIVの答え を参照してください。

30
H.B.

次のアプローチを使用しました

 <UserControl.Resources>
    <DataTemplate x:Key="SelectedItemTemplate" DataType="{x:Type statusBar:OffsetItem}">
        <TextBlock Text="{Binding Path=ShortName}" />
    </DataTemplate>
</UserControl.Resources>
<StackPanel Orientation="Horizontal">
    <ComboBox DisplayMemberPath="FullName"
              ItemsSource="{Binding Path=Offsets}"
              behaviors:SelectedItemTemplateBehavior.SelectedItemDataTemplate="{StaticResource SelectedItemTemplate}"
              SelectedItem="{Binding Path=Selected}" />
    <TextBlock Text="User Time" />
    <TextBlock Text="" />
</StackPanel>

そしてその振る舞い

public static class SelectedItemTemplateBehavior
{
    public static readonly DependencyProperty SelectedItemDataTemplateProperty =
        DependencyProperty.RegisterAttached("SelectedItemDataTemplate", typeof(DataTemplate), typeof(SelectedItemTemplateBehavior), new PropertyMetadata(default(DataTemplate), PropertyChangedCallback));

    public static void SetSelectedItemDataTemplate(this UIElement element, DataTemplate value)
    {
        element.SetValue(SelectedItemDataTemplateProperty, value);
    }

    public static DataTemplate GetSelectedItemDataTemplate(this ComboBox element)
    {
        return (DataTemplate)element.GetValue(SelectedItemDataTemplateProperty);
    }

    private static void PropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var uiElement = d as ComboBox;
        if (e.Property == SelectedItemDataTemplateProperty && uiElement != null)
        {
            uiElement.Loaded -= UiElementLoaded;
            UpdateSelectionTemplate(uiElement);
            uiElement.Loaded += UiElementLoaded;

        }
    }

    static void UiElementLoaded(object sender, RoutedEventArgs e)
    {
        UpdateSelectionTemplate((ComboBox)sender);
    }

    private static void UpdateSelectionTemplate(ComboBox uiElement)
    {
        var contentPresenter = GetChildOfType<ContentPresenter>(uiElement);
        if (contentPresenter == null)
            return;
        var template = uiElement.GetSelectedItemDataTemplate();
        contentPresenter.ContentTemplate = template;
    }


    public static T GetChildOfType<T>(DependencyObject depObj)
        where T : DependencyObject
    {
        if (depObj == null) return null;

        for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
        {
            var child = VisualTreeHelper.GetChild(depObj, i);

            var result = (child as T) ?? GetChildOfType<T>(child);
            if (result != null) return result;
        }
        return null;
    }
}

魔法のように働いた。ここではLoadedイベントはあまり好きではありませんが、必要に応じて修正できます

1
Artiom

コンボ項目にItemTemplateを組み合わせて、Textパラメーターをタイトル選択として使用することをお勧めしますが、ComboBoxはTextパラメーターを尊重しないことがわかります。

ComboBox ControlTemplateをオーバーライドすることで、同様の問題に対処しました。 MSDN website は、.NET 4.0のサンプルです。

私のソリューションでは、ComboBoxテンプレートのContentPresenterを変更してTextにバインドし、ContentTemplateを次のようなTextBlockを含む単純なDataTemplateにバインドします。

<DataTemplate x:Uid="DataTemplate_1" x:Key="ComboSelectionBoxTemplate">
    <TextBlock x:Uid="TextBlock_1" Text="{Binding}" />
</DataTemplate>

これをControlTemplateで：

<ContentPresenter Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding Text}" ContentTemplate="{StaticResource ComboSelectionBoxTemplate}" Margin="3,3,23,3" VerticalAlignment="Center" HorizontalAlignment="Left"/>

このバインディングリンクを使用すると、コントロールのTextパラメーター（ViewModelの適​​切な値にバインドする）を介して、コンボ選択表示を直接制御できます。

1
cunningdave

H.B。answer が言ったことに加えて、コンバータでバインドエラーを回避できます。次の例は、 OP自身 によって編集されたソリューションに基づいています。

アイデアは非常に単純です。常に存在するもの（Control）にバインドし、コンバーター内で関連するチェックを行います。変更されたXAMLの関連部分は次のとおりです。その点に注意してください Path=IsSelectedが実際に必要になることはなく、ComboBoxItemはバインドエラーを回避するためにControlに置き換えられます。

<DataTrigger Binding="{Binding 
    RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Control}},
    Converter={StaticResource ComboBoxItemIsSelectedConverter}}"
    Value="{x:Null}">
  <Setter TargetName="theControl" Property="Template" Value="{StaticResource SimpleTemplate}" />
</DataTrigger>

C＃コンバーターコードは次のとおりです。

public class ComboBoxItemIsSelectedConverter : IValueConverter
{
    private static object _notNull = new object();
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        // value is ComboBox when the item is the one in the closed combo
        if (value is ComboBox) return null; 

        // all the other items inside the dropdown will go here
        return _notNull;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}
0
raf

はい。 Template Selector を使用して、実行時にバインドするテンプレートを決定します。したがって、IsSelected = Falseの場合、このテンプレートを使用し、IsSelected = Trueの場合、この他のテンプレートを使用します。

注意：テンプレートセレクタを実装したら、テンプレートにキー名を付ける必要があります。

0
CodeWarrior