Come attivare / disattivare la visibilità di una colonna della griglia WPF

Question

Ho dei problemi a farlo funzionare in un'app WPF su cui sto lavorando. Fondamentalmente, quello che sto cercando è qualcosa di simile al riquadro Attività in un MMC:

• L'app ha tre colonne nella parte principale del display. Ho bisogno di una colonna sul lato destro che sia ridimensionabile. Presumo che questo significhi utilizzare una griglia con un GridSplitter ma tutto ciò che funziona farà.
• Voglio essere in grado di salvare la larghezza della colonna di destra quando l'app è chiusa e caricarla quando l'app è aperta ma questa dovrebbe essere una dimensione iniziale: l'utente dovrebbe essere in grado di ridimensionarla.
• Quando ridimensiono la finestra, voglio che le colonne sinistra e destra mantengano le stesse dimensioni e che la colonna centrale venga ridimensionata con la larghezza della finestra.
• Le colonne sinistra e destra devono avere una larghezza minima. Quando ridimensiono la colonna sul lato destro, voglio che la colonna centrale si riduca ma non la colonna sul lato sinistro.
• Voglio anche essere in grado di attivare / disattivare la visibilità della colonna di destra con un pulsante di attivazione che si trova all'esterno della colonna e quando ritorna alla visibilità, voglio che abbia la stessa larghezza di prima.

Sto cercando di fare il più possibile in XAML e con il binding.

E posso farcirlo con panna, gelato e gocce di cioccolato, per favore? : -)

Answer 1

Mentre leggo i tuoi requisiti, invece di pensare a un Grid , penso a un DockPanel .

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

Se crei un modo per ridimensionare right , middle cambierà quando viene ridimensionato right . Se ridimensionate la finestra, cambierà solo middle . Memorizzare e impostare Width di right dipende da te, ma non dovrebbe essere difficile.

Per quanto riguarda consentire all'utente di ridimensionare right , sarà un po 'più complicato, ma ho trovato questo articolo che dovrebbe aiutare. Questo altro articolo potrebbe aiutare ancora di più.

Per la visibilità di right , puoi impostare Visibility su Collaps per nasconderlo e ripristinarlo impostandolo su visibile .

Nota: i pannelli all'interno non devono essere Grid , ma dovrai usare una sorta di Panel per ciascuno. Qualunque cosa tu abbia all'interno delle tue attuali colonne Grid dovrebbe funzionare bene.

Answer 2

Ho usato una griglia con GridSplitters poiché questo ha reso davvero facile ridimensionare la colonna centrale mantenendo le larghezze delle colonne sinistra e destra.

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>

codice sottostante

Quando nascondo la colonna di destra, ho appena impostato la larghezza della colonna su 0 poiché le colonne della griglia non hanno una proprietà di visibilità.

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;
    }
}

Per quanto riguarda il salvataggio e il ripristino delle larghezze di colonna all'avvio, vorrei solo memorizzare le variabili di larghezza in un file di impostazioni e quindi applicarle quando la tua app viene riaperta.

Answer 3

Imposta la larghezza di definizione della colonna su Auto e metti un controllo all'interno di quella colonna e dai la stella alle altre colonne. Ogni volta che vuoi nascondere la colonna con il contenuto, imposta control.Visibility = Compresso e poiché la larghezza della colonna è Auto, non vedrai quella colonna e le colonne rimanenti occuperanno lo spazio.

Answer 4

3 anni dopo puoi trovare un altro approccio su CodeProject.

http://www.codeproject.com/ articoli / 437.237 / WPF-Grid-Colonna-e-Row-Nascondere

Aggiunge un " Visibile " proprietà per le definizioni delle colonne personalizzate.