es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo eliminar el color del marco exterior de un botón.

30 Jul, 2023 Programación

Utilizo ListBox en mi aplicación WPF. El código es el siguiente.
En el ItemTemplate del ListBox hay un botón.

Cuando utilizo el mouse para pasar por encima de cada botón, hay un color azul casi en el marco exterior del botón (no en la parte interna). Como puedes ver, lo marco con una línea roja.
No sé cómo eliminarlo o hacerlo padre.

He puesto mi código de demostración en Github:
https://github.com/tomxue/RemoveColor2.git

enter image description here

       <ListBox Name="ListBox" 
                 Grid.Row="0"
                 Background="#40475F"
                 BorderThickness="0"
                 HorizontalAlignment="Center" 
                 Margin="0,9,0,0" 
                 Width="336"
                 Height="492"
                 VerticalAlignment="Top"                      
                 ScrollViewer.CanContentScroll="True"
                 ScrollViewer.VerticalScrollBarVisibility="Auto"
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled">

        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical" Background="Transparent">
                    <Button Name="ItemButton"  BorderThickness="0" Padding="-2" Background="#40475F" Margin="0" Height="50">
                    </Button>

                    <Border Width="360" Margin="-10,0,-10,0" Height="1" Background="#383F55"/>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para eliminar el color azul en el marco exterior del botón al pasar el mouse por encima, es necesario modificar la plantilla de control del botón. La plantilla de control predeterminada del botón en WPF incluye un desencadenador que cambia el color del borde cuando el mouse está sobre el botón. Para eliminar este desencadenador, puedes copiar la plantilla de control predeterminada del botón y eliminar los desencadenadores relevantes.

    Aquí están los pasos para eliminar el color azul en el marco exterior:

    1. En tu proyecto de WPF, haz clic derecho en la carpeta “Resources” y selecciona “Agregar nuevo elemento”.
    2. Selecciona “Resource Dictionary” y nómbralo “ButtonStyles.xaml”.
    3. Abre el archivo “ButtonStyles.xaml” y agrega el siguiente código:
    <resourcedictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <controltemplate x:key="FlatButtonTemplate" targettype="{x:Type Button}">
        <border x:name="border" borderbrush="{TemplateBinding BorderBrush}" borderthickness="{TemplateBinding BorderThickness}" background="{TemplateBinding Background}" padding="{TemplateBinding Padding}" snapstodevicepixels="true">
            <contentpresenter horizontalalignment="{TemplateBinding HorizontalContentAlignment}" margin="{TemplateBinding Padding}" verticalalignment="{TemplateBinding VerticalContentAlignment}" recognizesaccesskey="True"></contentpresenter>
        </border>
        <controltemplate.triggers>
            <trigger property="IsMouseOver" value="True">
                <setter targetname="border" property="BorderBrush" value="#FF007ACC"></setter>
            </trigger>
            <trigger property="IsPressed" value="True">
                <setter targetname="border" property="Background" value="#FF007ACC"></setter>
                <setter targetname="border" property="BorderBrush" value="#FF007ACC"></setter>
            </trigger>
            <trigger property="IsEnabled" value="False">
                <setter targetname="border" property="BorderBrush" value="#FFB9B9B9"></setter>
                <setter targetname="border" property="Background" value="#FFF4F4F4"></setter>
                <setter property="Foreground" value="#FFB9B9B9"></setter>
            </trigger>
        </controltemplate.triggers>
    </controltemplate>

    <style x:key="FlatButtonStyle" targettype="{x:Type Button}">
        <Setter Property="Template" Value="{StaticResource FlatButtonTemplate}" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="FontFamily" Value="Segoe UI" />
        <Setter Property="FontSize" Value="16" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="Padding" Value="10,0" />
        <Setter Property="Margin" Value="0" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Background" Value="Transparent" />
    </style>

</resourcedictionary>
    1. En tu ListBox, agrega la siguiente referencia al diccionario de recursos “ButtonStyles.xaml”:
    <listbox.resources>
    <resourcedictionary>
        <resourcedictionary.mergeddictionaries>
            <resourcedictionary source="ButtonStyles.xaml"></resourcedictionary>
        </resourcedictionary.mergeddictionaries>
    </resourcedictionary>
</listbox.resources>
    1. Reemplaza el botón en el DataTemplate de tu ListBox con esto:
    <button name="ItemButton" style="{StaticResource FlatButtonStyle}">
    1. Ejecuta tu aplicación y pasa el mouse por encima de los botones en el ListBox. El color azul en el marco exterior ya no debería aparecer.

    Ten en cuenta que puedes modificar los estilos en el archivo “ButtonStyles.xaml” para cambiar la apariencia de los botones. El código anterior define un estilo de botón plano con un borde gris de forma predeterminada.

Comments are closed.