Comment basculer la visibilité d'une colonne de grille WPF

Question

J'ai quelques problèmes pour que cela fonctionne dans une application WPF sur laquelle je travaille. En gros, ce que je recherche, c'est quelque chose comme le volet des tâches dans une console MMC:

• L'application comporte trois colonnes dans la partie principale de l'écran. J'ai besoin d'une colonne sur le côté droit qui est redimensionnable. Je suppose que cela signifie qu’il faut utiliser une grille avec un séparateur de grille, mais tout ce qui fonctionne fera l'affaire.
• Je veux pouvoir enregistrer la largeur de la colonne de droite lors de la fermeture de l'application et la charger à l'ouverture de l'application, mais il doit s'agir d'une taille initiale: l'utilisateur doit pouvoir la redimensionner.
• Lorsque je redimensionne la fenêtre, je souhaite que les colonnes de gauche et de droite conservent la même taille et que la colonne du milieu soit redimensionnée avec la largeur de la fenêtre.
• Les colonnes de gauche et de droite doivent avoir une largeur minimale. Lorsque je redimensionne la colonne de droite, je souhaite que la colonne centrale soit plus petite mais pas la colonne de gauche.
• Je souhaite également pouvoir basculer la visibilité de la colonne de droite à l'aide d'un bouton de basculement situé en dehors de la colonne. Lorsqu'il redevient visible, je souhaite une largeur identique à celle qu'il était avant.

J'essaie de faire le plus possible en XAML et avec la liaison.

Et puis-je l'avoir garni de crème, de glace et de pépites de chocolat, s'il vous plaît? : -)

Answer 1

En lisant vos exigences, au lieu de penser à une grille , je pense à un DockPanel .

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

Si vous faites en sorte de redimensionner à droite , alors au milieu changera à mesure que à droite sera redimensionné. Si vous redimensionnez la fenêtre, seul middle sera modifié. Stocker et définir le Width de right vous appartient, mais ne devrait pas être compliqué.

Pour permettre à l'utilisateur de redimensionner right , cela sera un peu plus compliqué, mais j'ai trouvé cet article qui devrait aider. Cet autre article pourrait être encore plus utile.

Pour la visibilité de right , vous pouvez définir son Visibilité sur Réduit pour le masquer et le restaurer en le définissant sur . Visible .

Remarque: Les panneaux à l'intérieur ne doivent pas obligatoirement être Grid , mais vous voudrez utiliser une sorte de Panneau pour chacun. Tout ce que vous avez dans vos colonnes Grid actuelles devrait fonctionner correctement.

Answer 2

J'ai utilisé une grille avec GridSplitters car cela simplifiait vraiment le redimensionnement de la colonne du milieu tout en conservant la largeur des colonnes de gauche et de droite.

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

Lorsque je cache la colonne de droite, je règle simplement la largeur de la colonne sur 0 car les colonnes de la grille n'ont pas de propriété de 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;
    }
}

En ce qui concerne la sauvegarde et la restauration des largeurs de colonne au démarrage, je voudrais simplement stocker les variables de largeur dans un fichier de paramètres, puis les appliquer à la réouverture de votre application.

Answer 3

Définissez la définition de colonne Width sur Auto, placez un contrôle à l'intérieur de cette colonne et attribuez Star aux autres colonnes. Lorsque vous souhaitez masquer la colonne avec le contenu, définissez le paramètre control.Visibility = Réduit et, dans la mesure où la largeur de la colonne est définie sur Auto, vous ne verrez pas cette colonne et les colonnes restantes occuperont l'espace.

Answer 4

Trois ans plus tard, vous pouvez trouver une autre approche sur CodeProject.

http://www.codeproject.com/ Articles / 437237 / WPF-Grid-Column-and-Row-Hiding

Il ajoute un " Visible " propriété à des définitions de colonnes personnalisées.