Q&A
windows8.1 ストアアプリを、visualstudio2015、OSはWindows10で開発しております。
今回は、ComboBox に関して質問です。
ComboBoxコントロールの標準は、
です。これを、
や
に、ComboBoxのデザインを編集したいです。
■変更したいデザイン
①角丸
②背景をグラデーション
③ドロップダウンボタン?テキスト？(右側の三角)
④テキスト部分(左側)と③の間に縦線(heightは自由に変更したい)
■ここまでできてます
●コード
C#
1<Grid Background ="{ThemeResource ApplicationPageBackgroundThemeBrush }"> 2 <Grid.RowDefinitions> 3 <RowDefinition/> 4 <RowDefinition/> 5 <RowDefinition/> 6 <RowDefinition/> 7 <RowDefinition/> 8 </Grid.RowDefinitions> 9 10 <!--0行目(デフォルト)--> 11 <ComboBox Width="580" Height ="60"> 12 <ComboBoxItem> リスト1</ComboBoxItem > 13 </ComboBox> 14 15 <!--1行目(いろいろお試し中)--> 16 <ComboBox Grid.Row ="1" Width="580" Height="60"> 17 <ComboBoxItem BorderBrush ="Red" BorderThickness="3" Background="#FF0E39AC" Height ="20" Width="20" RenderTransformOrigin="0.5,0.5"> 18 <ComboBoxItem.RenderTransform> 19 <CompositeTransform TranslateX ="20" TranslateY="24"/> 20 </ComboBoxItem.RenderTransform> 21 </ComboBoxItem> 22 </ComboBox> 23 24 25 <!--2行目(既存のスタイルテンプレート使用)--> 26 <!--<ComboBox x:Name="comboBox" Width="580" Height="60" Grid.Row="2" Style="{StaticResource ComboBoxStyle1}"/> 27 28 <!--3行目(とりあえず見た目だけでも近づけたい)--> 29 <Grid Width ="580" Height="60" Grid.Row="2"> 30 <Border CornerRadius ="5 5 5 5" BorderThickness="1,1,1,1" BorderBrush="Gray"> 31 <Border.Background> 32 <LinearGradientBrush EndPoint ="0.5,1" StartPoint="0.5,0"> 33 <GradientStop Color ="White" Offset="0"/> 34 <GradientStop Color ="#FFF5F5F5" Offset="1"/> 35 </LinearGradientBrush> 36 </Border.Background> 37 </Border> 38 <Border Background ="#FFCCCCCC" HorizontalAlignment="Right" Width="1" Height ="34" Margin="0 0 40 0"/> 39 <!--<UserControls:SortBtn Grid.Column="1" Width="13" Height="9" Margin="13 0 13 0" HorizontalAlignment="Right" VerticalAlignment="Center"/>--> 40 <TextBlock Grid.Column ="0" Margin="20 0 0 0" FontSize="22" VerticalAlignment ="Center" Text="リスト1" /> 41 42 </Grid> 43 44 45 </Grid > 46 47
●ビジュアル
探してもあまりないのですが、みなさんデフォルトのままで使用されているからなのでしょうか。
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でラッピングをすることで期待通りの結果が得られました。
ありがとうございました。
■□■□■□■□■□■□■□■□■□■□■□■□■
以上
お手数おかけしますが、宜しくお願いいたします。
回答1件
0
ベストアンサー
こんにちは。
色々調整は必要かと思いますけど、とりあえずこんなかんじでしょうか。
デザイン調整は苦手で…イマイチな出来です。
XML
1<Page 2 x:Class="App1.MainPage" 3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 5 xmlns:local="using:App1" 6 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 7 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 8 mc:Ignorable="d"> 9 <Page.Resources> 10 <Style x:Key="ComboBoxStyle1" TargetType="ComboBox"> 11 <Setter Property="Template"> 12 <Setter.Value> 13 <ControlTemplate TargetType="ComboBox"> 14 <Grid> 15 <Grid.ColumnDefinitions> 16 <ColumnDefinition Width="*"/> 17 <ColumnDefinition Width="32"/> 18 </Grid.ColumnDefinitions> 19 <Grid.RowDefinitions> 20 <RowDefinition Height="Auto"/> 21 <RowDefinition Height="*"/> 22 </Grid.RowDefinitions> 23 <ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource ComboBoxHeaderForegroundThemeBrush}" FontWeight="{ThemeResource ComboBoxHeaderThemeFontWeight}" FlowDirection="{TemplateBinding FlowDirection}" Margin="{ThemeResource ComboBoxHeaderThemeMargin}" Visibility="Collapsed"/> 24 <!--①角丸--> 25 <Border CornerRadius="5" x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Row="1"/> 26 <Rectangle x:Name="PressedBackground" Fill="{ThemeResource ComboBoxPressedHighlightThemeBrush}" Margin="{TemplateBinding BorderThickness}" Opacity="0" Grid.Row="1"/> 27 <Border x:Name="HighlightBackground" BorderBrush="{ThemeResource ComboBoxFocusedBorderThemeBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{ThemeResource ComboBoxFocusedBackgroundThemeBrush}" Grid.ColumnSpan="2" Opacity="0" Grid.Row="1"/> 28 <Rectangle x:Name="Highlight" Fill="{ThemeResource ComboBoxSelectedBackgroundThemeBrush}" Margin="{TemplateBinding BorderThickness}" Opacity="0" Grid.Row="1"/> 29 <ContentPresenter x:Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> 30 <TextBlock x:Name="PlaceholderTextBlock" Foreground="{ThemeResource ComboBoxPlaceholderTextForegroundThemeBrush}" FontWeight="{ThemeResource ComboBoxPlaceholderTextThemeFontWeight}" Text="{TemplateBinding PlaceholderText}"/> 31 </ContentPresenter> 32 <!--<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="" VerticalAlignment="Center"/>--> 33 <!--④テストと③の間に縦線--> 34 <Border Grid.Row="1" Grid.Column="1" BorderBrush="Silver" BorderThickness="1" CornerRadius="0,5,5,0"> 35 <!--③ボタンを三角に--> 36 <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="▼" VerticalAlignment="Center"/> 37 </Border> 38 <Popup x:Name="Popup"> 39 <Border x:Name="PopupBorder" BorderBrush="{ThemeResource ComboBoxPopupBorderThemeBrush}" BorderThickness="{ThemeResource ComboBoxPopupBorderThemeThickness}" Background="{ThemeResource ComboBoxPopupBackgroundThemeBrush}" HorizontalAlignment="Stretch"> 40 <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"> 41 <ItemsPresenter/> 42 </ScrollViewer> 43 </Border> 44 </Popup> 45 </Grid> 46 </ControlTemplate> 47 </Setter.Value> 48 </Setter> 49 </Style> 50 </Page.Resources> 51 52 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 53 <ComboBox Height="50" Width="200" SelectedIndex="0" Style="{StaticResource ComboBoxStyle1}"> 54 <ComboBox.Background> 55 <!--②背景をグラデーション--> 56 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 57 <GradientStop Color="#FFA8A8A8" Offset="0.116"/> 58 <GradientStop Color="#FFA6A6A6" Offset="0.9"/> 59 <GradientStop Color="White" Offset="0.542"/> 60 </LinearGradientBrush> 61 </ComboBox.Background> 62 <ComboBoxItem Content="AAA" /> 63 <ComboBoxItem Content="BBB" /> 64 <ComboBoxItem Content="CCC" /> 65 </ComboBox> 66 </Grid> 67</Page>
テキストとボタンの間の縦線の高さを変えたいならGridの列を増やして間にセパレータを配置したほうが良いかもしれないです。
投稿2015/09/30 06:50
総合スコア4791
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2015/09/30 08:16
2015/09/30 09:17
2015/10/01 03:27