0

Estoy tratando de crear un estilo para mis ComboBox que simplemente tengan esquinas redondeadas, y que no se pierda ninguna de las propiedades que tiene este, en la imagen de abajo conseguí en gran parte lo que quería, pero actualmente solo despliega la lista si es que hago clic justo en el icono de la flecha, y los métodos que he intentado para que el clic funcione en todo el ComboBox, solo quitan el estilo por completo, o queda en blanco directamente:

introducir la descripción de la imagen aquí

Este es el codigo del estilo que le estoy importando al ComboBox:

    <Style x:Key="ComboBoxEstilo" TargetType="{x:Type ComboBox}">
        <Setter Property="Background" Value="White" />
        <Setter Property="BorderBrush" Value="Black" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="Padding" Value="5" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBox}">

                    <Grid>
                        <Border x:Name="MainBorder"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="8">
                            <Grid>
                                <ToggleButton Name="ToggleButton"
                                          Grid.Column="2"
                                          Focusable="false"
                                          IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                          ClickMode="Press">
                                    <ToggleButton.Template>
                                        <ControlTemplate>
                                            <Grid>
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="*" />
                                                    <ColumnDefinition Width="Auto" />
                                                </Grid.ColumnDefinitions>
                                                <Border x:Name="ArrowBorder"
                                                      Grid.Column="1"
                                                      Background="Transparent"
                                                      BorderBrush="Transparent"
                                                      BorderThickness="0"
                                                      Padding="4">
                                                    <Path x:Name="Arrow"
                                                      Width="8"
                                                      Height="6"
                                                      Fill="Black"
                                                      HorizontalAlignment="Center"
                                                      VerticalAlignment="Center"
                                                      Data="M0,0 L4,4 8,0 z" />
                                                </Border>
                                                <ContentPresenter />
                                            </Grid>
                                            <ControlTemplate.Triggers>
                                                <Trigger Property="ToggleButton.IsChecked" Value="True">
                                                    <Setter TargetName="Arrow" Property="RenderTransformOrigin" Value="0.5,0.5" />
                                                    <Setter TargetName="Arrow" Property="RenderTransform">
                                                        <Setter.Value>
                                                            <RotateTransform Angle="180" />
                                                        </Setter.Value>
                                                    </Setter>
                                                </Trigger>
                                                <Trigger Property="IsMouseOver" Value="True">
                                                    <Setter TargetName="Arrow" Property="Fill" Value="#E59400" />
                                                </Trigger>
                                                <Trigger Property="IsMouseOver" Value="False">
                                                    <Setter TargetName="Arrow" Property="Fill" Value="Black" />
                                                </Trigger>
                                            </ControlTemplate.Triggers>
                                        </ControlTemplate>
                                    </ToggleButton.Template>
                                </ToggleButton>
                                <ContentPresenter Name="ContentSite"
                                              IsHitTestVisible="False"
                                              Content="{TemplateBinding SelectionBoxItem}"
                                              ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                                              ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                              Margin="3,3,23,3"
                                              VerticalAlignment="Center"
                                              HorizontalAlignment="Left">
                                </ContentPresenter>
                                <Popup Name="Popup"
                                   Placement="Bottom"
                                   IsOpen="{TemplateBinding IsDropDownOpen}"
                                   AllowsTransparency="True"
                                   Focusable="False"
                                   PopupAnimation="Slide">
                                    <Grid Name="DropDown"
                                      SnapsToDevicePixels="True"
                                      MaxHeight="{TemplateBinding MaxDropDownHeight}">
                                        <Border x:Name="DropDownBorder"
                                            Background="{TemplateBinding Background}"
                                            BorderBrush="{TemplateBinding BorderBrush}"
                                            BorderThickness="{TemplateBinding BorderThickness}"
                                            CornerRadius="5">
                                            <ScrollViewer Margin="4">
                                                <ItemsPresenter />
                                            </ScrollViewer>
                                        </Border>
                                    </Grid>
                                </Popup>
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Y este es el código que tiene mi ComboBox:

<ComboBox ItemsSource="{Binding MateriasPrimas}" 
  DisplayMemberPath="CodApMp" 
  SelectedItem="{Binding MateriaPrima , Mode=TwoWay}" 
  Grid.Column="1" 
  Grid.Row="1"  
  Margin="5,5,5,5"
  FontSize="22"
  Style="{StaticResource ComboBoxEstilo}">
    <b:Interaction.Triggers>
        <b:EventTrigger EventName="SelectionChanged">
            <b:InvokeCommandAction Command="{Binding SelectionChangedCommand}" />
        </b:EventTrigger>
    </b:Interaction.Triggers>
</ComboBox>

Que puedo hacer para poder volver a hacer clic en cualquier del ComboBox y que se despliegue la lista sin perder los estilos que tengo actualmente?

De ante mano muchas gracias.

1 respuesta 1

0

Seguramente te faltó agregar elementos al template, por eso no tienes todas las funcionalidades originales.

Lo más fácil es comenzar con la plantilla original y modicar desde ahi, para esto seleccionas un combobox, click derecho -> Editar plantilla -> Editar una copia...

introducir la descripción de la imagen aquí

La copia la puedes agregar para un combobox o de forma global.

Luego para editar el corner debes buscar el estilo del ToggleButton

<Style x:Key="ComboBoxToggleButton" 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}">
                        
                <!--Aqui debes editar el CornerRadius-->
                <Border CornerRadius="10" x:Name="templateRoot" Background="{StaticResource ComboBox.Static.Background}" BorderBrush="{StaticResource ComboBox.Static.Border}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true">
                    <Border  x:Name="splitBorder" BorderBrush="Transparent" BorderThickness="1" HorizontalAlignment="Right" Margin="0" SnapsToDevicePixels="true" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
                        <Path x:Name="arrow" Data="F1 M 0,0 L 2.667,2.66665 L 5.3334,0 L 5.3334,-1.78168 L 2.6667,0.88501 L0,-1.78168 L0,0 Z" Fill="{StaticResource ComboBox.Static.Glyph}" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center"/>
                    </Border>
                </Border>
                <ControlTemplate.Triggers>
<!-- ETC -->

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.