Cómo alternar la visibilidad de una columna WPF Grid

Question

Tengo problemas para hacer que esto funcione en una aplicación WPF en la que estoy trabajando. Básicamente, lo que busco es algo así como el panel de tareas en una MMC:

• La aplicación tiene tres columnas en la parte principal de la pantalla. Necesito una columna en el lado derecho que sea redimensionable. Supongo que esto significa usar un Grid con un GridSplitter, pero todo lo que funcione funcionará.
• Quiero poder guardar el ancho de la columna del lado derecho cuando la aplicación está cerrada y cargarla cuando se abre la aplicación, pero este debería ser un tamaño inicial: el usuario debería poder cambiar su tamaño.
• Cuando cambio el tamaño de la ventana, quiero que las columnas de los lados izquierdo y derecho tengan el mismo tamaño y que la columna del medio cambie de tamaño con el ancho de la ventana.
• Las columnas de los lados izquierdo y derecho deben tener un ancho mínimo. Cuando cambio el tamaño de la columna del lado derecho, quiero que la columna central se haga más pequeña pero no la columna del lado izquierdo.
• También quiero poder alternar la visibilidad de la columna del lado derecho con un botón de alternar que está fuera de la columna y cuando vuelva a la visibilidad quiero que tenga el mismo ancho que antes.

Estoy tratando de hacer todo lo posible en XAML y con enlace.

¿Y puedo tenerlo cubierto con crema, helado y chispas de chocolate, por favor? :-)

Answer 1

Mientras leo sus requisitos, en lugar de pensar en una Grid , pienso en un DockPanel .

<DockPanel>
    <Grid Name="right"
        DockPanel.Dock="Right" MinWidth="100" />
    <Grid Name="Left"
        DockPanel.Dock="Left" MinWidth="100" />
    <Grid Name="middle" />
</DockPanel>

Si realiza una forma de cambiar el tamaño de right , entonces middle cambiará a medida que right cambie de tamaño. Si cambia el tamaño de la ventana, solo middle cambiará. El almacenamiento y la configuración del Width de right depende de usted, pero no deberían ser difíciles.

En cuanto a permitir al usuario cambiar el tamaño de right , eso será un poco más complicado, pero encontré este artículo que debería ayudar. Este otro artículo podría ayudar aún más.

Para la visibilidad de right , puede establecer su Visibility en Collapsed para ocultarlo y restaurarlo configurándolo en Visible .

Nota: Los paneles en el interior no tienen que ser Grid s, pero querrá usar algún tipo de Panel para cada uno. Lo que tenga dentro de sus columnas actuales Grid debería funcionar bien.

Answer 2

Utilicé una cuadrícula con GridSplitters ya que esto hizo que fuera muy fácil cambiar el tamaño de la columna central mientras se mantenían los anchos de las columnas izquierda y derecha.

XAML:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="MainWindow"
    Title="Main Window"
    Width="640" Height="480">

    <Grid>
        <Grid.ColumnDefinitions>
            <!-- Left column -->
                <ColumnDefinition Width="200" MinWidth="100"/>
                <!-- Left GridSplitter column -->
                <ColumnDefinition Width="5"/>
                <!-- Center column. A width of * means the column will fill
                     any remaining space. -->
                <ColumnDefinition Width="*"/>
                <!-- Right GridSplitter column -->
                <ColumnDefinition x:Name="RightSplitterColumn" Width="5"/>
                <!-- Right column -->
                <ColumnDefinition x:Name="RightColumn" Width="200"
                                  MinWidth="100"/>
                </Grid.ColumnDefinitions>
                <GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" />
                <GridSplitter Grid.Column="3" HorizontalAlignment="Stretch" />
                <Button x:Name="ToggleButton" Grid.Column="2"
                        Content="Toggle Right Column" Width="150" Height="25"
                        Click="ToggleButton_Click" />
    </Grid>
</Window>

Code-Behind

Al ocultar la columna derecha, simplemente configuro el ancho de la columna en 0 ya que las columnas de la cuadrícula no tienen una propiedad de visibilidad.

public partial class MainWindow : Window
{
    private double rightColumnWidth;
    private double rightColumnMinWidth;
    private bool rightColumnHidden;

    public MainWindow()
    {
        this.InitializeComponent();
    }

    private void ToggleButton_Click(object sender, RoutedEventArgs e)
    {
        if (rightColumnHidden)
        {
            // Restore the widths.
            RightColumn.MinWidth = rightColumnMinWidth;
            RightColumn.Width = new GridLength(rightColumnWidth);
            RightSplitterColumn.Width = new GridLength(5);
        }
        else
        {
            // Remember the user-set widths for the columns.
            rightColumnWidth = RightColumn.Width.Value;
            rightColumnMinWidth = RightColumn.MinWidth;

            // Remember to set the minimum width to 0 before changing the actual
            // width.
            RightColumn.MinWidth = 0;
            RightColumn.Width = new GridLength(0);
            RightSplitterColumn.Width = new GridLength(0);
        }

        rightColumnHidden = !rightColumnHidden;
    }
}

En cuanto a guardar y restaurar los anchos de columna en el inicio, simplemente almacenaría las variables de ancho en un archivo de configuración y luego las aplicaría cuando se vuelva a abrir su aplicación.

Answer 3

Establezca el ancho de definición de columna en Automático y coloque un control dentro de esa columna y dé la Estrella para las otras columnas. Siempre que desee ocultar la columna con contenido, configure el control. Visibilidad = Contraído y dado que el ancho de columna es Automático, no verá esa columna y las columnas restantes ocuparán el espacio.

Answer 4

3 años después, puede encontrar otro enfoque en CodeProject.

http://www.codeproject.com/ Artículos / 437237 / WPF-Grid-Column-and-Row-Hiding

Agrega un " Visible " propiedad de definiciones de columna personalizadas.