質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.78%

ComboBoxのデザインを変更したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 18K+

score 205

windows8.1 ストアアプリを、visualstudio2015、OSはWindows10で開発しております。 

今回は、ComboBox に関して質問です。
ComboBoxコントロールの標準は、
イメージ説明です。これを、

イメージ説明
イメージ説明
に、ComboBoxのデザインを編集したいです。

■変更したいデザイン
①角丸
②背景をグラデーション
③ドロップダウンボタン?テキスト?(右側の三角)
④テキスト部分(左側)と③の間に縦線(heightは自由に変更したい)

------------------------------
■ここまでできてます
●コード
<Grid Background ="{ThemeResource ApplicationPageBackgroundThemeBrush }">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <!--0行目(デフォルト)-->
        <ComboBox  Width="580" Height ="60">
            <ComboBoxItem> リスト1</ComboBoxItem >
        </ComboBox>

        <!--1行目(いろいろお試し中)-->
        <ComboBox Grid.Row ="1" Width="580" Height="60">
            <ComboBoxItem BorderBrush ="Red" BorderThickness="3" Background="#FF0E39AC" Height ="20" Width="20" RenderTransformOrigin="0.5,0.5">
                <ComboBoxItem.RenderTransform>
                    <CompositeTransform TranslateX ="20" TranslateY="24"/>
                </ComboBoxItem.RenderTransform>
            </ComboBoxItem>
        </ComboBox>
      

        <!--2行目(既存のスタイルテンプレート使用)-->
        <!--<ComboBox x:Name="comboBox"  Width="580" Height="60" Grid.Row="2" Style="{StaticResource ComboBoxStyle1}"/>

            <!--3行目(とりあえず見た目だけでも近づけたい)-->
        <Grid Width ="580" Height="60" Grid.Row="2">
            <Border CornerRadius ="5 5 5 5" BorderThickness="1,1,1,1" BorderBrush="Gray">
                <Border.Background>
                    <LinearGradientBrush EndPoint ="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color ="White" Offset="0"/>
                        <GradientStop Color ="#FFF5F5F5" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
            <Border Background ="#FFCCCCCC" HorizontalAlignment="Right" Width="1" Height ="34" Margin="0 0 40 0"/>
            <!--<UserControls:SortBtn Grid.Column="1" Width="13" Height="9" Margin="13 0 13 0" HorizontalAlignment="Right" VerticalAlignment="Center"/>-->
            <TextBlock Grid.Column ="0" Margin="20 0 0 0" FontSize="22" VerticalAlignment ="Center" Text="リスト1" />
                      
        </Grid>
    

    </Grid >
●ビジュアル
イメージ説明


------------------------------
探してもあまりないのですが、みなさんデフォルトのままで使用されているからなのでしょうか。
PHPの公式リファレンスのように、オブジェクトで検索したら細かく使用例を交えながら説明しているサイトがあれば教えていただきたいです。
コンボボックス/リストボックスを極めてるサイトがあればいいのですが。。。

__似た状況っぽいけど、
http://tryerror.net/tryerror/wordpress/post-205
WindowsApplicationとwindowsストアアプリとWindowsデスクトップアプリが同じことを指しているのかわからないので、同じ言語を使用できるか不明。

この辺にも書いてそうだけど、まだ解読する力がない。
http://sourcechord.hatenablog.com/entry/2014/10/25/205036
http://d.hatena.ne.jp/kaorun/20120908/1347100061
https://msdn.microsoft.com/ja-jp/library/ms749018(v=vs.110).aspx
http://www.moonmile.net/blog/archives/4087__



前回の質問、【Sliderのデザイン】では、プロパティがSliderにはなかったので、SliderをBoderでラッピングをすることで期待通りの結果が得られました。
ありがとうございました。


■□■□■□■□■□■□■□■□■□■□■□■□■


以上


お手数おかけしますが、宜しくお願いいたします。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

こんにちは。

色々調整は必要かと思いますけど、とりあえずこんなかんじでしょうか。
デザイン調整は苦手で…イマイチな出来です。

イメージ説明
<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Style x:Key="ComboBoxStyle1" TargetType="ComboBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBox">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="32"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource ComboBoxHeaderForegroundThemeBrush}" FontWeight="{ThemeResource ComboBoxHeaderThemeFontWeight}" FlowDirection="{TemplateBinding FlowDirection}" Margin="{ThemeResource ComboBoxHeaderThemeMargin}" Visibility="Collapsed"/>
                            <!--①角丸-->
                            <Border CornerRadius="5" x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Row="1"/>
                            <Rectangle x:Name="PressedBackground" Fill="{ThemeResource ComboBoxPressedHighlightThemeBrush}" Margin="{TemplateBinding BorderThickness}" Opacity="0" Grid.Row="1"/>
                            <Border x:Name="HighlightBackground" BorderBrush="{ThemeResource ComboBoxFocusedBorderThemeBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{ThemeResource ComboBoxFocusedBackgroundThemeBrush}" Grid.ColumnSpan="2" Opacity="0" Grid.Row="1"/>
                            <Rectangle x:Name="Highlight" Fill="{ThemeResource ComboBoxSelectedBackgroundThemeBrush}" Margin="{TemplateBinding BorderThickness}" Opacity="0" Grid.Row="1"/>
                            <ContentPresenter x:Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <TextBlock x:Name="PlaceholderTextBlock" Foreground="{ThemeResource ComboBoxPlaceholderTextForegroundThemeBrush}" FontWeight="{ThemeResource ComboBoxPlaceholderTextThemeFontWeight}" Text="{TemplateBinding PlaceholderText}"/>
                            </ContentPresenter>
                            <!--<TextBlock x:Name="DropDownGlyph" AutomationProperties.AccessibilityView="Raw" Grid.Column="1" Foreground="{ThemeResource ComboBoxArrowForegroundThemeBrush}" FontWeight="Bold" FontSize="{ThemeResource ComboBoxArrowThemeFontSize}" FontFamily="{ThemeResource SymbolThemeFontFamily}" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="0,0,6,4" Grid.Row="1" Text="&#xE011;" VerticalAlignment="Center"/>-->
                            <!--④テストと③の間に縦線-->
                            <Border Grid.Row="1" Grid.Column="1" BorderBrush="Silver" BorderThickness="1" CornerRadius="0,5,5,0">
                                <!--③ボタンを三角に-->
                                <TextBlock x:Name="DropDownGlyph" AutomationProperties.AccessibilityView="Raw" Grid.Column="1" Foreground="{ThemeResource ComboBoxArrowForegroundThemeBrush}" FontWeight="Bold" FontSize="{ThemeResource ComboBoxArrowThemeFontSize}" FontFamily="{ThemeResource SymbolThemeFontFamily}" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="0,0,6,4" Grid.Row="1" Text="&#9660;" VerticalAlignment="Center"/>
                            </Border>
                            <Popup x:Name="Popup">
                                <Border x:Name="PopupBorder" BorderBrush="{ThemeResource ComboBoxPopupBorderThemeBrush}" BorderThickness="{ThemeResource ComboBoxPopupBorderThemeThickness}" Background="{ThemeResource ComboBoxPopupBackgroundThemeBrush}" HorizontalAlignment="Stretch">
                                    <ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" Foreground="{ThemeResource ComboBoxPopupForegroundThemeBrush}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" MinWidth="{ThemeResource ComboBoxPopupThemeMinWidth}" VerticalSnapPointsType="OptionalSingle" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalSnapPointsAlignment="Near" ZoomMode="Disabled">
                                        <ItemsPresenter/>
                                    </ScrollViewer>
                                </Border>
                            </Popup>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ComboBox Height="50" Width="200" SelectedIndex="0" Style="{StaticResource ComboBoxStyle1}">
            <ComboBox.Background>
                <!--②背景をグラデーション-->
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA8A8A8" Offset="0.116"/>
                    <GradientStop Color="#FFA6A6A6" Offset="0.9"/>
                    <GradientStop Color="White" Offset="0.542"/>
                </LinearGradientBrush>
            </ComboBox.Background>
            <ComboBoxItem Content="AAA" />
            <ComboBoxItem Content="BBB" />
            <ComboBoxItem Content="CCC" />
        </ComboBox>
    </Grid>
</Page>
テキストとボタンの間の縦線の高さを変えたいならGridの列を増やして間にセパレータを配置したほうが良いかもしれないです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/30 17:16


    大変お世話になり、ありがとうございます。

    いつも早くプログラミングできて尊敬します。

    実装してみました。
    コメントアウトで、自分で追えるところは書き込んでいますが、間違っている箇所はございますでしょうか?


    ———————————————————-----━━━━★
    <Page.Resources>
    <Style x :Key="ComboBoxStyle1" TargetType="ComboBox">
    <Setter Property ="Template">
    <Setter.Value>
    <ControlTemplate TargetType ="ComboBox">
    <Grid>
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width ="*"/>

    <ColumnDefinition Width ="32"/>
    </Grid.ColumnDefinitions>
    <!--Rowを分けている理由。-->
    <Grid.RowDefinitions>
    <RowDefinition Height ="Auto"/>
    <RowDefinition Height ="*"/>
    </Grid.RowDefinitions>
    <!--全体-->
    <ContentPresenter x :Name="HeaderContentPresenter" ContentTemplate="{ TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource ComboBoxHeaderForegroundThemeBrush }" FontWeight="{ThemeResource ComboBoxHeaderThemeFontWeight }" FlowDirection="{ TemplateBinding FlowDirection}" Margin="{ThemeResource ComboBoxHeaderThemeMargin}" Visibility ="Collapsed"/>
    <!--①角丸(背景色もこちらが優先されている)-->
    <Border CornerRadius ="5" x: Name="Background" BorderBrush ="{TemplateBinding BorderBrush}" BorderThickness="1" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Row="1"/>

    <Rectangle x :Name="PressedBackground" Fill="{ThemeResource ComboBoxPressedHighlightThemeBrush}" Margin="{TemplateBinding BorderThickness}" Opacity ="0" Grid.Row="1"/>
    <!--全体(色を変更しても変わらないので、他の部分が優先されていると推測し、削除)-->
    <Border x :Name="HighlightBackground" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity ="0" Grid.Row="1"/>

    <Rectangle x :Name="Highlight" Fill="{ThemeResource ComboBoxSelectedBackgroundThemeBrush}" Margin="{TemplateBinding BorderThickness}" Opacity ="0" Grid.Row="1"/>
    <!--右側のpaddingを除いたテキスト部分-->
    <ContentPresenter x :Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row ="1" VerticalAlignment="{ TemplateBinding VerticalContentAlignment}">
    <TextBlock x :Name="PlaceholderTextBlock" Foreground="{ThemeResource ComboBoxPlaceholderTextForegroundThemeBrush}" FontWeight="{ThemeResource ComboBoxPlaceholderTextThemeFontWeight}" Text="{TemplateBinding PlaceholderText}"/>
    </ContentPresenter>
    <!--<TextBlock x:Name="DropDownGlyph" AutomationProperties.AccessibilityView="Raw" Grid.Column="1" Foreground="{ThemeResource ComboBoxArrowForegroundThemeBrush}" FontWeight="Bold" FontSize="{ThemeResource ComboBoxArrowThemeFontSize}" FontFamily="{ThemeResource SymbolThemeFontFamily}" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="0,0,6,4" Grid.Row="1" Text="&#xE011;" VerticalAlignment="Center"/>-->
    <!--④テストと③の間に縦線-->
    <Border Grid.Row ="1" Grid.Column="1" BorderBrush="Silver" BorderThickness ="1" CornerRadius="0,5,5,0">
    <!--③ボタンを三角に-->
    <TextBlock x :Name="DropDownGlyph" AutomationProperties.AccessibilityView ="Raw" Grid.Column="1" Foreground="{ThemeResource ComboBoxArrowForegroundThemeBrush }" FontWeight="Bold" FontSize="{ThemeResource ComboBoxArrowThemeFontSize}" FontFamily="{ThemeResource SymbolThemeFontFamily }" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="0,0,6,4" Grid.Row ="1" Text="&#9660;" VerticalAlignment="Center"/>
    </Border>
    <!--プルダウンリストの表示のデザイン-->
    <Popup x :Name="Popup">
    <Border x :Name="PopupBorder" BorderBrush="{ThemeResource ComboBoxPopupBorderThemeBrush}" BorderThickness="{ThemeResource ComboBoxPopupBorderThemeThickness}" Background="{ThemeResource ComboBoxPopupBackgroundThemeBrush}" HorizontalAlignment="Stretch">
    <ScrollViewer x :Name="ScrollViewer" AutomationProperties.AccessibilityView ="Raw" BringIntoViewOnFocusChange="{ TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" Foreground="{ThemeResource ComboBoxPopupForegroundThemeBrush }" HorizontalScrollMode="{ TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{ TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{ TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{ TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{ TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" MinWidth="{ThemeResource ComboBoxPopupThemeMinWidth }" VerticalSnapPointsType="OptionalSingle" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalSnapPointsAlignment="Near" ZoomMode ="Disabled">
    <ItemsPresenter/>
    </ScrollViewer>
    </Border>
    </Popup>


    </Grid>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>
    </Page.Resources >
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush }">
    <ComboBox Height ="50" Width="250.001" SelectedIndex="0" Style ="{StaticResource ComboBoxStyle1}">
    <ComboBox.Background>
    <!--②背景をグラデーション-->
    <LinearGradientBrush EndPoint ="0.5,1" StartPoint="0.5,0">
    <GradientStop Color ="#FFA8A8A8" Offset="0.116"/>
    <GradientStop Color ="#FFA6A6A6" Offset="0.9"/>
    <GradientStop Color ="White" Offset="0.542"/>
    </LinearGradientBrush>
    </ComboBox.Background>
    <ComboBoxItem Content ="AAA" />
    <ComboBoxItem Content ="BBB" />
    <ComboBoxItem Content ="CCC" />
    </ComboBox>
    </Grid >
    ———————————————————-----━━━━★

    ・Rectangleが2回出てきますが、役割と違いが分かりませんでした。
    ・Popupに関しては、細かくわかりやすく書いているサイトを見つけることができませんでした。どのように知識を深めていけるか、アドバイスいただけると助かります。

    >>>テキストとボタンの間の縦線の高さを変えたいならGridの列を増やして間にセパレータを配置したほうが良いかもしれないです。

    理解できました。
    現在はどこに記述されているのでしょうか?
    既存スタイルで自動的に設定されているのでしょうか?

    以上
    よろしくお願いいたします。

    キャンセル

  • 2015/09/30 18:17

    Rectangleは既定テンプレートからそのまま持ってきてましたが、一部機能を削除しているので不要かもしれません。Popupについては良いサイトが見つかりませんでした…見つけたら貼りますね。

    セパレータの列については、今はGridが
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width ="*"/>
    <ColumnDefinition Width ="32"/>
    </Grid.ColumnDefinitions>
    で定義されているので列を増やす感じです。
    わかりにくかったらすみません。

    キャンセル

  • 2015/10/01 12:27

    承知いたしました。
    ご親切にありがとうございます。

    >>><!--④テストと③の間に縦線-->
    <Border Grid.Row="1" Grid.Column="1" BorderBrush="Silver" BorderThickness="1" CornerRadius="0,5,5,0">

    書いてくださっていたのですね><、
    見落としていました。以後気をつけます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る