#

WPF: erstellen einer selektierbaren Liste

 Date 13.02.2018 Views 4.512

 

 

Das folgende Code-Beispiel zeigt, wie man in WPF eine Liste erstellen kann mit selektierbaren Zeilen.

Dabei besteht die Liste aus UserControl-Elementen, welche in einem Stackpanel gestapelt als Liste erscheinen.

Eine Liste mit eigenen Usercontrol-Zeilen ist dann sinnvoll, wenn ein Datengrid oder eine reine Tabelle oder auch ein Listenfeld nicht in Details verzweigen kann.

 

Die Schwierigkeit liegt darin, dass in der Liste mit Label und Textblock Elementen kein Focus übernommen wird. Man muss den Focus beim Mausklick auf das UserControl abfangen und auf die Keyboard-Tastatur überleiten.

 

MainWindow

Die Anwendung besteht aus dem MainWindows.xaml.

In diesem Window ist ein Grid mit zwei Zeilen. Die erste Zeile enthält ein Suche Feld und in der zweiten Reihe ist ein Stackpanel, in welches die Reihen eingefügt werden.

Stackpanel mit UserControl Elementen:

<StackPanel x:Name="listArea" Grid.Row="1"   >

    <uc:UcRowProject ID_Project="ID" .. Status="Status" Background="#CCCCCCDD" ></uc:UcRowProject>

</StackPanel>

 

 

Xaml Code des Mainwindows

<Window x:Class="Auftragsdatenbank.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:Auftragsdatenbank"

        xmlns:uc="clr-namespace:Auftragsdatenbank._Usercontrols"

        mc:Ignorable="d"

        Title="Projekte" Height="700" Width="1024" FontSize="13">

   

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition x:Name="rowSuche" Height="40"/>

            <RowDefinition x:Name="rowTabelle" Height="*"/>

        </Grid.RowDefinitions>

 

        <StackPanel Grid.Row="0" Orientation="Horizontal" Background="#EEEEEE" >

        <Label Content="Projekte:" VerticalContentAlignment="Center"  />

        <TextBox   VerticalContentAlignment="Center"   Width="200" Margin="10,3,3,3" />

        </StackPanel>

 

        <StackPanel x:Name="listArea" Grid.Row="1"   >

            <uc:UcRowProject ID_Project="ID" Datum="Datum" Kunde_Firmenname="Kunde" Bauvorhaben="Bauvorhaben" Baustelle_Adresse="Baustelle"

                             SumProjekt ="Projekt €" SumBezahlt="Bezahlt €" SumRechnung="Rechnung €" Status="Status"

                             Background="#CCCCCCDD" ></uc:UcRowProject>

        </StackPanel>

 

 

    </Grid>

</Window>

 

 

 

Codebehind zum Mainwindow

Im C# Code des Mainwindows wird von der SQL Datenbank eine Sql-DatenTabelle geladen und dann alle Recordsets einzeln durchlaufen.

Bei jeder Datensatz wird aus dem Row-Feld der Wert in ein neues UserControl übertragen.

Abschliessend wird das Usercontol in die Stack-Liste angefügt

//< get Data >

            string sSQL = "SELECT * FROM tbl_Projekte";

            DataTable tbl = clsDB.Get_DataTable(sSQL);

            //</ get Data >

 

            //----< @Loop: Recordsets >----

            foreach (DataRow row in tbl.Rows)

            {

                //--< load Record to Row >--

                UcRowProject uc = new UcRowProject();

                uc.ID_Project = row["ID_Projekt"].ToString();

                uc.Kunde_Firmenname = row["Kunde_Firmenname"].ToString();

                 ..

                                //< add row >

                listArea.Children.Add(uc);

                //</ add row >

                //--</ load Record to Row >--

 

 

 

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

 

 

//< using >

using Auftragsdatenbank._Usercontrols;  //*Usercontrols

using System.Data;                      //*ConnectionState, DataTable

//using System.Data.SqlClient;          //*local DB

//</ using >

 

namespace Auftragsdatenbank

{

    /// <summary>

    /// Interaction logic for MainWindow.xaml

    /// </summary>

    public partial class MainWindow : Window   

    {

        //===================< class: Window >=====================

        #region Window

        //------------------< region: Window >---------------------

        public MainWindow()

        {

            InitializeComponent();

            load_Tabelle();

        }

        //------------------</ region: Window >---------------------

        #endregion /Window

 

 

 

        #region Methods

        //------------------< region: Methods >---------------------

        public void load_Tabelle()

        {

            //< get Data >

            string sSQL = "SELECT * FROM tbl_Projekte";

            DataTable tbl = clsDB.Get_DataTable(sSQL);

            //</ get Data >

 

            //----< @Loop: Recordsets >----

            foreach (DataRow row in tbl.Rows)

            {

                //--< load Record to Row >--

                UcRowProject uc = new UcRowProject();

                uc.ID_Project = row["ID_Projekt"].ToString();

                uc.Kunde_Firmenname = row["Kunde_Firmenname"].ToString();

                uc.Bauvorhaben  = row["Bauvorhaben"].ToString();

                uc.Baustelle_Adresse  = row["Baustelle_Adresse"].ToString();

                uc.Datum = DateTime.Today.ToString() ; //row["Kunde_Firmenname"].ToString();

                uc.SumProjekt = 1000.ToString();

                uc.SumRechnung = 999.ToString();

                uc.Kunde_Firmenname = row["Kunde_Firmenname"].ToString();

 

                //< add row >

                listArea.Children.Add(uc);

                //</ add row >

                //--</ load Record to Row >--

            }

            //----</ @Loop: Recordsets >----

 

        }

        //------------------</ region: Methods >---------------------

        #endregion /Methods

 

        //===================</ class: Window >=====================

    }

}

 

 

 

UserControl:

Die Selectierbaren Row Elemente in der Liste

Die Datenreihen bestehen aus ausgefüllten UserControls. Das UserControl UcRowProject.xaml besteht aus einer Zeile und mehreren Spalten.

Jede Zelle enthält ein Label, welches zur Laufzeit beschriftet wird.

<Label x:Name="lblKunde_Firmenname" Grid.Column="2" ></Label>

 

Wichtig:

Damit der Focus und das Aktivieren durch den Mausklick funktioniert, muss das Usercontrol selbst mit IsHitTestable als True markiert werden.

<UserControl ..

PreviewGotKeyboardFocus="UserControl_PreviewGotKeyboardFocus"

IsHitTestVisible="True" Focusable="True"

> 

 

Vorgelagert über alle Labels ist ein Rectangle oder Border Control, welches den Maus-Click abfängt und an das Usercontrol weitergibt.

<Rectangle x:Name="ctlBorder" Grid.Row="0"  Grid.ColumnSpan="100" Fill="Transparent"

                   IsHitTestVisible="True" Focusable="True"

                   MouseDown="ctlBorder_MouseDown"    

                ></Rectangle>

 

 

 

<UserControl x:Class="Auftragsdatenbank._Usercontrols.UcRowProject"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

             xmlns:local="clr-namespace:Auftragsdatenbank._Usercontrols"

             mc:Ignorable="d"

             d:DesignHeight="20" d:DesignWidth="1024" 

             LostFocus="UserControl_LostFocus"  PreviewGotKeyboardFocus="UserControl_PreviewGotKeyboardFocus"

             IsHitTestVisible="True" Focusable="True"

             >

 

        <Grid x:Name="GridRow" >

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="20"/>

            <ColumnDefinition Width="80"/>

            <ColumnDefinition Width="200"/>

            <ColumnDefinition Width="200"/>

            <ColumnDefinition Width="200"/>

            <ColumnDefinition Width="80"/>

            <ColumnDefinition Width="80"/>

            <ColumnDefinition Width="80"/>

            <ColumnDefinition Width="80"/>

        </Grid.ColumnDefinitions>

 

 

        <Label x:Name="lblID_Projekt" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"  ></Label>

        <Label x:Name="lblDatum" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ></Label>

        <Label x:Name="lblKunde_Firmenname" Grid.Column="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="1">

        </Label>

        <Label x:Name="lblBauvorhaben" Grid.Column="3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ></Label>

        <Label x:Name="lblBaustelle_Adresse" Grid.Column="4" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ></Label>

        <Label x:Name="lblSumme_Projekt" Grid.Column="5" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ></Label>

        <Label x:Name="lblSumme_Rechnung" Grid.Column="6" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ></Label>

        <Label x:Name="lblSumme_Bezahlt" Grid.Column="7" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ></Label>

        <Label x:Name="lblStatus" Grid.Column="8" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ></Label>

 

        <Rectangle x:Name="ctlBorder" Grid.Row="0"  Grid.ColumnSpan="100" Fill="Transparent"

                   IsHitTestVisible="True" Focusable="True"

                   MouseDown="ctlBorder_MouseDown"    

                ></Rectangle>

    </Grid>

 

</UserControl>

 

 

 

 

C# Code zum Auswählen der Reihen

Damit die Focus-Übergabe und das Selectieren funktioniert, übergibt das Border-Control beim Mausklick den Focus an das Usercontrol

private void ctlBorder_MouseDown(object sender, MouseButtonEventArgs e)

        {

            //Keyboard.Focus(ctlBorder);

            Keyboard.Focus(this);

        }

 

 

Das UserControl setzt dann sichtbar den Hintergrund, damit man erkennt, dass es markiert ist.

private void UserControl_PreviewGotKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e)

        {

            //*1.Event

            set_Selected();

        }

 

 

Beim Verlassen wird der Hintergrund wieder auf Transparent geschaltet.

private void UserControl_LostFocus(object sender, RoutedEventArgs e)

        {

            Set_Unselected();

        }

 

 

 

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

 

namespace Auftragsdatenbank._Usercontrols

{

    /// <summary>

    /// Interaction logic for UcRowProject.xaml

    /// </summary>

    public partial class UcRowProject : UserControl

    {

        //===================< class: Usercontrol >=====================

        #region Usercontrol

        //------------------< region: Usercontrol >---------------------

        public UcRowProject()

        {

            InitializeComponent();

        }

        private void UserControl_PreviewGotKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e)

        {

            //*1.Event

            set_Selected();

        }

        private void UserControl_LostFocus(object sender, RoutedEventArgs e)

        {

            Set_Unselected();

        }

        //------------------</ region: Usercontrol >---------------------

        #endregion Usercontrol

 

 

 

        #region Properties

        //-----------------------------------------< region: Properties >-----------------------------------------

        public string ID_Project

        {

            get { return lblID_Projekt.Content.ToString(); }

            set { lblID_Projekt.Content = value.ToString(); }

        }

 

        public string Kunde_Firmenname

        {

            get { return lblKunde_Firmenname.Content.ToString(); }

            set { lblKunde_Firmenname.Content = value.ToString(); }

        }

 

        public string Bauvorhaben

        {

            get { return lblBauvorhaben.Content.ToString(); }

            set { lblBauvorhaben.Content = value.ToString(); }

        }

 

        public string Baustelle_Adresse

        {

            get { return lblBaustelle_Adresse.Content.ToString(); }

            set { lblBaustelle_Adresse.Content = value.ToString(); }

        }

        public string Datum

        {

            get { return lblDatum.Content.ToString(); }

            set { lblDatum.Content = value.ToString(); }

        }

        public string SumProjekt

        {

            get { return lblSumme_Projekt.Content.ToString(); }

            set { lblSumme_Projekt.Content = value.ToString(); }

        }

        public string SumRechnung

        {

            get { return lblSumme_Rechnung.Content.ToString(); }

            set { lblSumme_Rechnung.Content = value.ToString(); }

        }

        public string SumBezahlt

        {

            get { return lblSumme_Bezahlt.Content.ToString(); }

            set { lblSumme_Bezahlt.Content = value.ToString(); }

        }

        public string Status

        {

            get { return lblStatus.Content.ToString(); }

            set { lblStatus.Content = value.ToString(); }

        }

 

 

        //-----------------------------------------</ region: Properties >-----------------------------------------

        #endregion /Properties

 

 

        #region Controls

        //-----------------------------------------< region: Controls >-----------------------------------------

        private void ctlBorder_MouseDown(object sender, MouseButtonEventArgs e)

        {

            //Keyboard.Focus(ctlBorder);

            Keyboard.Focus(this);

        }

        //-----------------------------------------</ region: Controls >-----------------------------------------

        #endregion / Controls

 

 

 

 

 

        #region Methods

        //-----------------------------------------< region: Methods >-----------------------------------------

        public void set_Selected()

        {

            Background = System.Windows.SystemColors.MenuHighlightBrush;

        }

        public void Set_Unselected()

        {

            Background = Brushes.Transparent;

        }

        //-----------------------------------------</ region: Methods >-----------------------------------------

        #endregion / Methods

 

        //===================</ class: Usercontrol >=====================

    }

}

 

 

Mobile

.
123movies