CodeDocu.com

 

 

The following code example shows how to create a list in WPF with selectable rows.

The list consists of UserControl elements, which appear stacked in a stack panel as a list.

A list with its own user control lines makes sense if a data grid or a pure table or even a list box can not branch into details.

 

The difficulty lies in the fact that in the list with label and text block elements no focus is taken over. You have to catch the focus when clicking on the UserControl and transfer it to the keyboard keyboard.

WPF: create a selectable list

 

Main Window

The application consists of the MainWindows.xaml.

In this window is a grid with two lines. The first row contains a search field and the second row is a stack panel into which the rows are inserted.

Stackpanel with UserControl elements:

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

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

</StackPanel>

WPF: create a selectable list

 

 

Xaml code of 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 the Mainwindow

In the C # code of the mainwindows, the SQL database loads a sql data table and then iterates through each set of records.

For each record, the value is transferred from the row field to a new UserControl.

Finally, the usercontol is added to the stack list

//< 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 >--

 

 

 

WPF: create a selectable list

 

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 >=====================

    }

}

 

 

 

User Control:

The Selectable Row items in the list

The data series consist of completed UserControls. The UserControl UcRowProject.xaml consists of one row and several columns.

Each cell contains a label, which is labeled at runtime.

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

 

Important:

For the focus and the activation to work with the mouse click, the user control itself must be marked as True with IsHitTestable.

<UserControl ..

PreviewGotKeyboardFocus="UserControl_PreviewGotKeyboardFocus"

IsHitTestVisible="True" Focusable="True"

> 

 

In front of all labels is a Rectangle or Border Control, which intercepts the mouse-click and passes it on to the Usercontrol.

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

                   IsHitTestVisible="True" Focusable="True"

                   MouseDown="ctlBorder_MouseDown"    

                ></Rectangle>

 

 

WPF: create a selectable list

 

<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 to select the rows

In order for the focus transfer and the selection to work, the border control transfers the focus to the user control when the mouse is clicked

private void ctlBorder_MouseDown(object sender, MouseButtonEventArgs e)

        {

            //Keyboard.Focus(ctlBorder);

            Keyboard.Focus(this);

        }

 

 

The UserControl then visibly sets the background, so that one recognizes that it is marked.

private void UserControl_PreviewGotKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e)

        {

            //*1.Event

            set_Selected();

        }

 

 

When leaving the background is switched back to transparent.

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 >=====================

    }

}

 

 


Software Entwicklung Stuttgart NĂ¼rtingen
Suche Projekte C#, WPF, Windows App,ASP.Net, vb.Net, WinForms, SQL Server, Access, Excel