Question

I copied style using Blend, made most changes I needed but really stuck with how to remove rounding completely and remove this white space around.
Button with arrouw should be 18 and whole dropdown should be 18 high. Now there is padding and white around while button is not centered. Plus, this rounding on right?

This is my style:

<Style x:Key="ComboBoxReadonlyToggleButton" TargetType="{x:Type ToggleButton}">
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Focusable" Value="false"/>
            <Setter Property="ClickMode" Value="Press"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Microsoft_Windows_Themes:ButtonChrome Height="18"
                            x:Name="Chrome" RoundCorners="False" 
                            BorderBrush="{TemplateBinding BorderBrush}" 
                            Background="{TemplateBinding Background}" 
                            RenderMouseOver="{TemplateBinding IsMouseOver}" 
                            RenderPressed="{TemplateBinding IsPressed}" SnapsToDevicePixels="true">
                            <Border
                                BorderBrush="#a6a6a6" BorderThickness="1"
                                HorizontalAlignment="Right" Width="18" Height="18">
                                <Border.Background>                                    
                                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                        <GradientStop Color="#899ba5" />
                                        <GradientStop Color="#4f6473" Offset="1" />
                                    </LinearGradientBrush>                                    
                                </Border.Background>
                                <Grid>
                                    <Path x:Name="Arrow" Fill="#dcdcdc" HorizontalAlignment="Center" VerticalAlignment="Center">
                                        <Path.Data>
                                            <Geometry>M 0 0 L 3.5 4 L 7 0 Z</Geometry>
                                        </Path.Data>
                                    </Path>
                                </Grid>
                            </Border>                            
                        </Microsoft_Windows_Themes:ButtonChrome>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>        
        <Style x:Key="ComboBoxStyle" TargetType="{x:Type ComboBox}">
            <Setter Property="Height" Value="18" />
            <Setter Property="Foreground" Value="#1a3e55"/>
            <Setter Property="Background" Value="#f7f7f7"/>
            <Setter Property="BorderBrush" Value="#a6a6a6"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>

            <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
            <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
            <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBox}">
                        <Grid x:Name="MainGrid" 
                            SnapsToDevicePixels="true">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
                            </Grid.ColumnDefinitions>
                            <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
                                <Microsoft_Windows_Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=MainGrid}">
                                    <Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
                                        <ScrollViewer x:Name="DropDownScrollViewer">
                                            <Grid RenderOptions.ClearTypeHint="Enabled">
                                                <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
                                                    <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}"/>
                                                </Canvas>
                                                <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                            </Grid>
                                        </ScrollViewer>
                                    </Border>
                                </Microsoft_Windows_Themes:SystemDropShadowChrome>
                            </Popup>
                            <ToggleButton 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                Background="{TemplateBinding Background}" 
                                Grid.ColumnSpan="2" 
                                IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" 
                                Style="{StaticResource ComboBoxReadonlyToggleButton}"/>
                            <ContentPresenter 
                                ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" 
                                ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" 
                                Content="{TemplateBinding SelectionBoxItem}" 
                                ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" 
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                IsHitTestVisible="false" 
                                Margin="{TemplateBinding Padding}" 
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>           
        </Style>    

Answer 1

Okay, I finally got it right this time.

All of these were in your ButtonChrome style template. I used this answer https://stackoverflow.com/a/4554309/1449777 on how to change this style. Download the class file from the link provided here: http://www.mediafire.com/?wnra4qj4qt07wn6

First things first, let’s get rid of the rounded corners.

Update your style for the toggle button to the local copy of the button chrome class and set RoundedCorners=”false”.

<local:MyButtonChrome RoundCorners="False" ... >

To Fix the rounded corners, I modified the buttonchrome class to implement the RoundedCorners=”false” correctly. In the DrawBorder function, I changed the logic to draw the border (Line Number 128) to:

if (this.RoundCorners)
{
    Rect rectangle = new Rect(bounds.Left + 0.5, bounds.Top + 0.5, bounds.Width - 1.0, bounds.Height - 1.0);
    if (base.IsEnabled && (pen != null))
    {
        dc.DrawRoundedRectangle(null, pen, rectangle, 2.75, 2.75);
    }
    if (borderOverlayPen != null)
    {
        dc.DrawRoundedRectangle(null, borderOverlayPen, rectangle, 2.75, 2.75);
    }
}
else
{
    Rect rectangle = new Rect(bounds.Left + 0.5, bounds.Top + 0.5, bounds.Width - 1.0, bounds.Height - 1.0);
    if (base.IsEnabled && (pen != null))
    {
        dc.DrawRectangle(null, pen, rectangle);
    }
    if (borderOverlayPen != null)
    {
        dc.DrawRectangle(null, borderOverlayPen, rectangle);
    }
}

And I changed the InnerBorder function (Line 180) to:

private void DrawInnerBorder(DrawingContext dc, ref Rect bounds)
{
    if (DisableInnerBorder == false && ((base.IsEnabled || this.RoundCorners) && ((bounds.Width >= 4.0) && (bounds.Height >= 4.0))))
    {
        Pen innerBorderPen = this.InnerBorderPen;
        if (innerBorderPen != null)
        {
            if (this.RoundCorners)
            {
                dc.DrawRoundedRectangle(null, innerBorderPen, new Rect(bounds.Left + 1.5, bounds.Top + 1.5, bounds.Width - 3.0, bounds.Height - 3.0), 1.75, 1.75);
            }
            else
            {
                dc.DrawRoundedRectangle(null, innerBorderPen, new Rect(bounds.Left + 1.5, bounds.Top + 1.5, bounds.Width - 3.0, bounds.Height - 3.0), 0, 0);
            }
        }
    }
}

Now lets handle that padding.

This one took a while to spot, but I found it in the function ArrangeOverride (line 40). Just delete the following function, and it will no longer override the placement.

protected override Size ArrangeOverride(Size finalSize)

Result:

And just to prove that it actually did work…