BlackCoin's Corner

und noch ein Blog

ListView Spalten Aus und wieder Einblenden

Vor einigen Tagen wurde ich von einem Entwickler gefragt, wie er es einem Anwender, in einer WPF Anwendung, am besten ermöglichen könnte, festgelegte ListView Spalten über einen Menü Punkt ein und wieder auszublenden. Kurzerhand erstellten wir, diesen einfachen XAML Ausschnitt.

Eine einfaches ListView mit 4 Spalten.

    <Window.Resources> 
        <XmlDataProvider Source="Contact.xml" x:Key="data" XPath="contacts/*"/> 
    </Window.Resources> 

        <Grid> 
            <ListView DataContext="{StaticResource data}" ItemsSource="{Binding}"> 
                <ListView.View> 
                    <GridView> 
                        <GridViewColumn DisplayMemberBinding="{Binding XPath=FirstName}"> 
                            <GridViewColumnHeader Content="Vorname"/> 
                        </GridViewColumn> 
                        <GridViewColumn DisplayMemberBinding="{Binding XPath=LastName}"> 
                            <GridViewColumnHeader Content="Nachname"/> 
                        </GridViewColumn> 
                        <GridViewColumn DisplayMemberBinding="{Binding XPath=Phone}"> 
                            <GridViewColumnHeader Content="Telefon"/> 
                        </GridViewColumn> 
                        <GridViewColumn DisplayMemberBinding="{Binding XPath=EmailAddress}"> 
                            <GridViewColumnHeader Content="E-Mail"/> 
                        </GridViewColumn> 
                    </GridView> 
                </ListView.View> 
            </ListView> 
        </Grid> 

Das Dummy Programm erhält ein Checkable MenuItem, welches wir an ein Boolsches Property Binden. Damit der Anwender die Spalten ein und ausblenden kann.

<DockPanel> 
        <Menu DockPanel.Dock="Top"> 
            <MenuItem Header="Extras"> 
                <MenuItem IsCheckable="True" Header="ShowAll" IsChecked="{Binding Path=ShowAll}"/> 
            </MenuItem> 
        </Menu>



        <Grid> 
            <ListView DataContext="{StaticResource data}" ItemsSource="{Binding}">


            <!—Wie oben-->


           </ListView>


        </Grid>


    </DockPanel>

Um nun unserem Ziel ein Stück näher zu kommen, benötigen wir  zusätzlich einen DataTrigger, der auf Veränderungen, des am MenuItem gebundenen Boolschen Proerty wartet. Diesem in einem Style verpackten DataTrigger, hängen wir nun an den GridViewColumnHeader, der sobald der Anwender auf das MenuItem Klickt, ausgeblendet werden soll.

<GridViewColumn DisplayMemberBinding="{Binding XPath=Phone}"> 
    <GridViewColumnHeader Content="Telefon"> 
          <GridViewColumnHeader.Style> 
                 <Style> 
                        <Setter Property="GridViewColumnHeader.Visibility" Value="Visible"/> 
                        <Style.Triggers> 
                                <DataTrigger Binding="{Binding Path=DataContext.ShowAll, ElementName=main}" Value="false"> 
                                     <Setter Property="GridViewColumnHeader.Visibility" Value="Collapsed"/> 
                                </DataTrigger> 
                        </Style.Triggers> 
                  </Style> 
          </GridViewColumnHeader.Style> 
     </GridViewColumnHeader> 
</GridViewColumn>

Was haben wir bisher erreicht?

Bei einem Klick auf den Menüpunkt, wird derzeit aufgrund des DataTriggers,leider nur der Spalten Kopf ausgeblendet. Hmm, dass ist noch nicht das was wir wollen

ListNotFinished

Aber auch dieses kleine Problem konnten wir schnell Lösen, wir hingen uns schnell an das Event IsVisibleChanged des GridViewColumnHeadeer und Implementierten kurzerhand diese paar Code Zeilen.

private void GridViewColumnHeader_IsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e) 
{ 
    GridViewColumnHeader header = (sender as GridViewColumnHeader); 
    if (header != null) 
        if (header.Visibility == Visibility.Collapsed) 
            header.Column.Width = 0; 
        else 
            //ClearValue(GridViewColumn.WidthProperty) ist an dieser Stelle identisch mit Width="Auto" in XAML 
            header.Column.ClearValue(GridViewColumn.WidthProperty); 
} 

listfertig

Und zu guterletzt wieder an die Datenschützer: Diese Daten sind keine Realdaten sondern stammen aus einer von Microsoft erstellten Beispiel Datenbank. Ähnlichkeiten mit real existierenden Personen sind eher zufälliger Natur und nicht beabsichtigt.


Posted: Dez 30 2009, 06:39 von Lars Schmitt | mit no comments
Abgelegt unter: ,

Kommentare

Keine Kommentare

Kommentar abgeben

(verpflichtend) 

(verpflichtend) 

(optional)

(verpflichtend)