Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Ronded corners on MetroComboBox ? #2207

Closed
barryBithead opened this issue Nov 10, 2015 · 4 comments
Closed

Ronded corners on MetroComboBox ? #2207

barryBithead opened this issue Nov 10, 2015 · 4 comments
Assignees
@punker76
Milestone
1.2.0

Comments

@barryBithead
Copy link

Is there a way to get rounded corners on a MetroComboBox ?

Barry
@punker76
Copy link
Member

@barryBithead Not in a simple way yet, you must create your own style for a workaround until it's implemented...

@barryBithead
Copy link
Author

HERE'S ONE TAKE ON IT:

       <!-- COMBOBOX STYLING -->          
        <ControlTemplate TargetType="ToggleButton" x:Key="ComboBoxToggleButtonTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="16" />
                </Grid.ColumnDefinitions>
                <Border
      BorderBrush="DarkGray"
      CornerRadius="2,2,2,2"
      BorderThickness="1,1,1,1"
      Name="Border"
      Background="LightGray"
      Grid.ColumnSpan="2" />
                <Border
      Margin="1,1,1,1"
      BorderBrush="{StaticResource NormalBorderBrush}"
      CornerRadius="3,0,0,3"
      BorderThickness="0,0,1,0"
      Background="White"
      Grid.Column="0" />
                <Path
      Margin="0,0,3,0"
      Data="M0,0L4,4 8,0z"
      HorizontalAlignment="Center"
      Fill="{Binding BGColourPref}"
      Name="Arrow"
      VerticalAlignment="Center"
      Width="8"
      Grid.Column="1" />
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="UIElement.IsMouseOver" Value="True">
                    <Setter Property="Panel.Background" TargetName="Border" Value="DarkGray"/>
                </Trigger>
                <Trigger Property="ToggleButton.IsChecked" Value="True">
                    <Setter Property="Panel.Background" TargetName="Border" Value="DarkGray"/>
                    <Setter Property="Shape.Fill" TargetName="Arrow" Value="{Binding BGColourPref}"/>
                </Trigger>
                <Trigger Property="UIElement.IsEnabled" Value="False">
                    <Setter Property="Panel.Background" TargetName="Border" Value="{StaticResource DisabledBackgroundBrush}"/>
                    <Setter Property="Border.BorderBrush" TargetName="Border" Value="{StaticResource DisabledBorderBrush}"/>
                    <Setter Property="TextElement.Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                    <Setter Property="Shape.Fill" TargetName="Arrow" Value="{Binding BGColourPref}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <ControlTemplate TargetType="TextBox" x:Key="ComboBoxTextBoxTemplate">
            <Border Name="PART_ContentHost" Background="{Binding BGColourPref}" Focusable="False" />
        </ControlTemplate>

        <Style TargetType="{x:Type ComboBoxItem}">
            <Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
            <Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="TextElement.Foreground"  Value="Black"/>
            <Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True"/>
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                        <Border Name="Border" SnapsToDevicePixels="True" Padding="3,2,2,2">
                            <ContentPresenter ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" Content="{TemplateBinding ContentControl.Content}" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ComboBoxItem.IsHighlighted" Value="True">
                                <Setter Property="Panel.Background" TargetName="Border" Value="{DynamicResource DefaultBrush}"/>
                                <Setter Property="TextElement.Foreground" Value="White"></Setter>
                            </Trigger>
                            <Trigger Property="ComboBoxItem.IsSelected" Value="True">
                                <Setter Property="Background" Value="Red" />
                            </Trigger>
                            <Trigger Property="UIElement.IsEnabled" Value="False">
                                <Setter Property="TextElement.Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="CustomComboBoxStyle" TargetType="{x:Type ComboBox}" BasedOn="{StaticResource MetroComboBox}">
            <Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
            <Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
            <Setter Property="TextElement.Foreground" Value="Black"/>
            <Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBox">
                        <Grid>
                            <ToggleButton
            ClickMode="Press"
            Name="ToggleButton"
            IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
            Focusable="False"
            Grid.Column="2"
            Template="{StaticResource ComboBoxToggleButtonTemplate}"/>       
                            <ContentPresenter
            Margin="3,3,23,3"
            HorizontalAlignment="Left"
            Name="ContentSite"
            VerticalAlignment="Center"
            ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}"
            Content="{TemplateBinding ComboBox.SelectionBoxItem}"
            IsHitTestVisible="False" />
                            <TextBox
            Margin="3,3,23,3"
            Visibility="Hidden"
            HorizontalAlignment="Left"
            Name="PART_EditableTextBox"
            Background="Transparent"
            VerticalAlignment="Center" 
            Style="{x:Null}"
            IsReadOnly="False"
            Focusable="True"
            xml:space="preserve"
            Template="{StaticResource ComboBoxTextBoxTemplate}"/>
        <Popup
            Placement="Bottom"
            Name="Popup"
            Focusable="False"
            AllowsTransparency="True"
            IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}"
            PopupAnimation="Fade">
          <Grid
              MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"
              MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}"
              Name="DropDown"
              SnapsToDevicePixels="True">
            <Border
                BorderBrush="{StaticResource NormalBorderBrush}"
                BorderThickness="1,1,1,1"
                Name="DropDownBorder"
                Background="{StaticResource WindowBackgroundBrush}"/>
            <ScrollViewer
                Margin="4,6,4,6"
                SnapsToDevicePixels="True">
              <ItemsPresenter
                  KeyboardNavigation.DirectionalNavigation="Contained" />
            </ScrollViewer>
          </Grid>
        </Popup>
      </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ItemsControl.HasItems" Value="False">
                                <Setter Property="FrameworkElement.MinHeight" TargetName="DropDownBorder" Value="95"/>
                            </Trigger>
                            <Trigger Property="UIElement.IsEnabled" Value="False">
                                <Setter Property="TextElement.Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                            </Trigger>
                            <Trigger Property="ItemsControl.IsGrouping" Value="True">
                                <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
                            </Trigger>
                            <Trigger Property="Window.AllowsTransparency" SourceName="Popup" Value="True">
                                <Setter Property="Border.CornerRadius" TargetName="DropDownBorder" Value="4"/>
                                <Setter Property="FrameworkElement.Margin" TargetName="DropDownBorder" Value="0,2,0,0"/>
                            </Trigger>
                            <Trigger Property="ComboBox.IsEditable" Value="True">
                                <Setter Property="KeyboardNavigation.IsTabStop" Value="False"/>
                                <Setter Property="UIElement.Visibility" TargetName="PART_EditableTextBox" Value="Visible"/>
                                <Setter Property="UIElement.Visibility" TargetName="ContentSite" Value="Hidden"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

@barryBithead
Copy link
Author

HOW TO COLOR THE SELECTED ITEMS THE WAY YOU WANT (inline style override):

            <ComboBox Style="{StaticResource CustomComboBoxStyle}" HorizontalAlignment="Left" Width="125" Height="25" SelectedItem="{Binding SelectedBrowser, Mode=TwoWay}" ItemsSource="{Binding InstalledBrowsers}" Margin="-164,304,0,0" x:Name="UrlBrowserPrefDropDown" VerticalAlignment="Top" IsEnabled="False">
                <ComboBox.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="{Binding BGColourPref}"/>
                    <SolidColorBrush x:Key="{x:Static SystemColors.WindowBrushKey}" Color="Red" />
                </ComboBox.Resources>
                <ComboBox.ItemContainerStyle>
                    <Style TargetType="{x:Type ComboBoxItem}">
                        <Setter Property="Padding" Value="3"/>
                        <Setter Property="Margin" Value="2,0,0,0"/>
                        <Setter Property="Background" Value="#FFEEEEEE"/>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="BorderBrush" Value="{Binding BGColourPref}" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ComboBox.ItemContainerStyle>
                </ComboBox>

@punker76 punker76 added this to the 1.2.0 milestone Nov 14, 2015
@punker76 punker76 self-assigned this Nov 14, 2015
@punker76
Copy link
Member

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@punker76 punker76

Labels
None yet
Milestone
1.2.0
Development

No branches or pull requests
2 participants
@punker76 @barryBithead