silverlight - Silverlightコンボボックスのコントロールテンプレートをカスタマイズする

Question

これをSilverlightに実装したいと思います。

ポップアップにインラインフィルターを備えたコンボボックス

http://gregandora.wordpress.com/2012/01/25/filtering-items-in-a-wpf-combobox/

残念ながら、これはWPF用であり、XAMLには互換性がありません。それを変換したり、コンボボックスのコントロールテンプレートを変更する方法を理解したりするのは非常に困難です。

何か案が？

Answer 1

ソリューションのデモは次のとおりです：https ：//dl.dropbox.com/u/8424800/StackOverflowSl.html （ComboBoxフィルターを参照）

デフォルトのSilverlightComboBoxテンプレートを使用して、ポップアップセクションに「FilterTextBox」を追加しました。StackOverflowの制限を超えたため、xaml全体を投稿できませんでした。完全なソースは、GitHubGistとしてここにあります。重要な部分を残しました。次に、TextBoxのイベントハンドラーを接続する必要があります。

<Style TargetType="ComboBox">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBox">
                <Grid>                       
                    <Popup x:Name="Popup">
                        <Border x:Name="PopupBorder"
                                Height="Auto"
                                HorizontalAlignment="Stretch"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="3">
                            <Border.Background>
                                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                    <GradientStop Offset="0" Color="#FFFFFFFF" />
                                    <GradientStop Offset="1" Color="#FFFEFEFE" />
                                </LinearGradientBrush>
                            </Border.Background>
                            <Grid>
                                <TextBox x:Name="FilterTextBox"
                                            Height="22"
                                            VerticalAlignment="Top" />
                                <ScrollViewer x:Name="ScrollViewer"
                                                Margin="0,25,0,0"
                                                BorderThickness="0"
                                                Padding="1">
                                    <ItemsPresenter />
                                </ScrollViewer>
                            </Grid>
                        </Border>
                    </Popup>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

TextBoxの配線

public Q12513294()
{
    // Required to initialize variables
    InitializeComponent();

    InitializeMyCombo(
        Enumerable.Range(1, 99).Select(x => "Beer " + x.ToString() + " on the wall"),
        (object item, string filter) => (item as String).Contains(filter)
    );
}

private void InitializeMyCombo(IEnumerable items, Func<object, string, bool> filter)
{
    MyComboBox.Loaded += (s, e) =>
    {
        // PagedCollectionView implements a filterable collection
        PagedCollectionView list = new PagedCollectionView(items);
        MyComboBox.ItemsSource = list;

        // Set the filter based on the contents of the textbox
        TextBox filterTextBox = MyComboBox.GetTemplateChild<TextBox>("FilterTextBox");
        list.Filter = new Predicate<object>(
            item => filter(item, filterTextBox.Text)
            );

        // Refresh the filter each time
        filterTextBox.TextChanged += (s2, e2) =>
        {
            list.Refresh();
            filterTextBox.Focus();
        };
    };

}

public static class Helper
{
    public static T GetTemplateChild<T>(this DependencyObject parent, string partName)
    {
        return (T)(VisualTreeHelper.GetChild(parent, 0) as Panel).FindName(partName);
    }
}