2016/09/29

    C#のWPFでComboBoxの表示をカスタマイズ　その２

    こちらに引き続きComboBoxのカスタマイズを考えてみる。

     

    ComboBox.ItemTemplateを使う事で表示項目をカスタマイズできた。

    ただ、項目を横に並べたいとかをやろうとするとItemTemplateだけではうまくいかない。

    プルダウンで表示される部分は以下のような階層で構成されている。

    ItemsPanel

    　　プルダウンで出てくるリスト部分全体

    ItemContainerStyle

    　　項目毎の外観（マウスオーバーや選択など）を管理する

    ItemTemplate

    　　バインドされるデータに関する外観を管理する

     

     

    以下のようにItemsPanelを編集する事で、横方向に項目を並べる事が出来る。 

        <StackPanel Margin="10">
        <ComboBox x:Name="comboBox">
            <ComboBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel></WrapPanel>
                </ItemsPanelTemplate>
            </ComboBox.ItemsPanel>
            <ComboBox.ItemContainerStyle>
                <Style TargetType="{x:Type ComboBoxItem}">
                    <Setter Property="Margin" Value="3"/>
                </Style>
            </ComboBox.ItemContainerStyle>
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Width="60" Text="{Binding Title}" Margin="3"/>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
    </StackPanel>

    ついでにItemContinerStyleにMarginを加えてみた。

    ココに入れるとマウスオーバーで色が変わる外側にスペースを作る事ができる。

     

     

    カテゴリ： C#, C#WPF