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.

  • es.davy.ai/
  • Programación /
  • Cómo eliminar los márgenes de las esquinas de una casilla de verificación en un cuadro de lista.

Cómo eliminar los márgenes de las esquinas de una casilla de verificación en un cuadro de lista.

01 Aug, 2023 Programación

Ver descripción de la imagen aquí
Por favor, verifica la imagen.

Hay una casilla de verificación en la plantilla en el cuadro de lista, y le puse el color de fondo rojo.

Cuando hago clic en la casilla de verificación roja, funciona bien.

Pero cuando hago clic en la flecha negra de la imagen, no se marca la casilla de verificación.

¿Cómo puedo eliminar el espaciado en blanco y sincronizarlo con la casilla de verificación?

Intenté ajustar el margen y el relleno, pero no pude resolverlo.

    <ListBox x:Name="xList" Grid.Row="1" HorizontalContentAlignment="Stretch">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Vertical" IsItemsHost="True" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>

        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid Background="red">
                <CheckBox IsChecked="{Binding IsVisible, Mode=TwoWay}"
                          VerticalContentAlignment="Center" 
                          Content="{Binding Header}"
                          Height="28" />
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Gracias por ayudarme.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema está con el contenedor ListBoxItem. Por defecto, ListBoxItem tiene un margen que hace que el checkbox no llene todo el espacio. Puedes eliminar este margen estableciendo Padding=”0″ en el ListBox o creando un estilo personalizado de ListBoxItem que establezca Padding=”0″. Aquí tienes un ejemplo de cómo crear un estilo personalizado para ListBoxItem:

    <listbox x:name="xList" grid.row="1" horizontalcontentalignment="Stretch">
    <listbox.resources>
        <style targettype="ListBoxItem">
            <Setter Property="Padding" Value="0" />
        </style>
    </listbox.resources>
    <listbox.itemspanel>
        <itemspaneltemplate>
            <wrappanel orientation="Vertical" isitemshost="True"></wrappanel>
        </itemspaneltemplate>
    </listbox.itemspanel>

    <listbox.itemtemplate>
        <datatemplate>
            <grid background="red">
                <checkbox ischecked="{Binding IsVisible, Mode=TwoWay}" verticalcontentalignment="Center" content="{Binding Header}" height="28"></checkbox>
            </grid>
        </datatemplate>
    </listbox.itemtemplate>
</listbox>

    Esto debería eliminar el espacio en blanco alrededor del checkbox y sincronizarlo con el color de fondo rojo.

Comments are closed.