design: 콤보박스 디자인 정의 및 적용

prototype
HyungJune Kim 7 months ago
parent e308fcbf34
commit 4d4bacd3b7

@ -235,13 +235,141 @@
</Setter> </Setter>
</Style> </Style>
<SolidColorBrush x:Key="LineComboBg" Color="#1D3649" />
<!-- 바 전체 배경 -->
<SolidColorBrush x:Key="LineComboText" Color="#999999" />
<!-- LINE 텍스트 색 -->
<SolidColorBrush x:Key="LineComboArrow" Color="#C0C3C6" />
<!-- 화살표 색 -->
<SolidColorBrush x:Key="LineComboHover" Color="#1D3E55" />
<SolidColorBrush x:Key="LineComboItemHover" Color="#20435A" />
<SolidColorBrush x:Key="LineComboItemSelected" Color="#29506B" />
<Style x:Key="ComboDropToggleStyle" TargetType="ToggleButton">
<Setter Property="Focusable" Value="False" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border x:Name="Bd"
Background="{TemplateBinding Background}"
BorderThickness="0">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<!-- 마우스 올렸을 때 살짝만 진하게, 싫으면 이 트리거 삭제 -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="Background"
Value="{StaticResource LineComboHover}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- 아이템 스타일 (드롭다운 내부 항목) -->
<Style x:Key="LineComboBoxItemStyle" TargetType="ComboBoxItem">
<Setter Property="Foreground" Value="{StaticResource LineComboText}" />
<Setter Property="Background" Value="{StaticResource LineComboBg}" />
<Setter Property="Padding" Value="10,4" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Border x:Name="Bd"
Background="{TemplateBinding Background}">
<ContentPresenter
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="True">
<Setter TargetName="Bd" Property="Background"
Value="{StaticResource LineComboItemHover}" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Bd" Property="Background"
Value="{StaticResource LineComboItemSelected}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.4"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- 콤보박스 본체 스타일 -->
<Style x:Key="ComboBoxStyle" TargetType="ComboBox"> <Style x:Key="ComboBoxStyle" TargetType="ComboBox">
<Setter Property="BorderBrush" Value="#404F63"/> <Setter Property="BorderThickness" Value="0" />
<Setter Property="BorderThickness" Value="1"/> <Setter Property="Background" Value="{StaticResource LineComboBg}"/>
<Setter Property="Background" Value="#323232"/> <Setter Property="Foreground" Value="{StaticResource LineComboText}"/>
<Setter Property="Foreground" Value="Black"/> <Setter Property="FontSize" Value="16"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="12 0" />
<Setter Property="ItemContainerStyle" Value="{StaticResource LineComboBoxItemStyle}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="32" />
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="ContentSite"
Margin="{TemplateBinding Padding}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
RecognizesAccessKey="True" />
<ToggleButton x:Name="DropDownToggle"
Grid.Column="1"
Style="{StaticResource ComboDropToggleStyle}"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay,
RelativeSource={RelativeSource TemplatedParent}}">
<Path Stroke="{StaticResource LineComboArrow}"
StrokeThickness="1.6"
StrokeStartLineCap="Round"
StrokeEndLineCap="Round"
Data="M 3 4 L 8 9 L 13 4" />
</ToggleButton>
<Popup x:Name="PART_Popup"
Placement="Bottom"
AllowsTransparency="True"
Focusable="False"
IsOpen="{TemplateBinding IsDropDownOpen}"
PopupAnimation="Fade"
PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<Border Background="{StaticResource LineComboBg}"
BorderThickness="0"
Width="{Binding ActualWidth,
RelativeSource={RelativeSource TemplatedParent}}">
<!-- 🔴 여기: 흰 배경 안 나오게 -->
<ScrollViewer Background="{StaticResource LineComboBg}">
<StackPanel IsItemsHost="True" />
</ScrollViewer>
</Border>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.4" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> </Style>
<Style x:Key="DataGridStyle" TargetType="DataGrid"> <Style x:Key="DataGridStyle" TargetType="DataGrid">

@ -541,12 +541,12 @@
<ColumnDefinition Width="550"/> <ColumnDefinition Width="550"/>
<ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions> </Grid.ColumnDefinitions>
<Border Margin="15" <Border Margin="16 16 12 16" CornerRadius="5"
Background="#384659" BorderBrush="#404F63" BorderThickness="1" CornerRadius="10"> Background="#152935" BorderBrush="#325C80" BorderThickness="1" >
<Grid> <Grid>
<Grid.RowDefinitions> <Grid.RowDefinitions>
<RowDefinition/> <RowDefinition/>
<RowDefinition Height="50"/> <RowDefinition Height="62"/>
</Grid.RowDefinitions> </Grid.RowDefinitions>
<Grid.Resources> <Grid.Resources>
<Style TargetType="FrameworkElement"> <Style TargetType="FrameworkElement">
@ -561,13 +561,13 @@
</Style> </Style>
</Grid.Resources> </Grid.Resources>
<StackPanel> <StackPanel>
<Grid Margin="15 15 15 10"> <Grid Margin="24 24 24 16">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/> <ColumnDefinition Width="80"/>
<ColumnDefinition/> <ColumnDefinition/>
</Grid.ColumnDefinitions> </Grid.ColumnDefinitions>
<TextBlock Text="그래프" VerticalAlignment="Center" <TextBlock Text="그래프" VerticalAlignment="Center"
FontSize="20" FontFamily="{StaticResource SCDream5}" Foreground="White"/> FontSize="18" FontFamily="{StaticResource SCDream4}" Foreground="White"/>
<ComboBox Margin="15 0 0 0" Height="40" Grid.Column="1" <ComboBox Margin="15 0 0 0" Height="40" Grid.Column="1"
Style="{StaticResource ComboBoxStyle}" Style="{StaticResource ComboBoxStyle}"

Loading…
Cancel
Save