WebElektronika

SQL adatbázis tartalmának megjelenítése WPF-ben

person access_time 2014.07.18.
Egy SQL adatbázisban lévő tábla rekordjait jelenítjük meg adatkötéssel két WPF-es vezérlő külön-külön felhasználásával.


Indítsuk el a VS2012-t és hozzunk létre egy WPF-es projektet. Ebbe a projektbe vegyünk fel egy "emberek" nevű osztályt (1. ábra). Hozzunk létre egy konstruktort is, használjuk a ctor snippet-et. A konstruktortban helyet kapott egy foreach ciklus, amelynek segítségével bejárjuk a paraméterként átadott proxy osztály példányát.


1. ábra   Az "emberek" osztály
 

Ezután készítsünk egy adatbázist (adatbazis.mdf) és vegyünk fel benne egy táblát (Table). Az adatbázis készítéséhez segítség itt található.
Vegyünk fel ebben a táblában a 2. ábrán láthatóan oszlopokat és töltsük fel tetszőleges adatokkal.


2. ábra   A "Table" adattábla
 

Ezután hozzuk létre az "adatDataContext" proxy osztályt. Ezt az Add / New Item / LINQ to SQL Classes menüpont segítségével tudjuk megtenni. Ezt követően a "Server Explorer" (ingyenes VS-nél : "Data Explorer") ablakból húzzuk át a "Table" nevű adattáblát (3. ábra)


3. ábra   Az "adatDataContext" grafikus létrehozása
 

Ha ezzel végeztünk, akkor írjuk meg azt az XAML file-t (MainWindow.xaml), amely a projekt indításakor megjelenő ablak kinézetéért felel. Másoljuk be a következő teljes programot a projekt létrehozásakor kapott MainWindow.xaml file-ba.

<Window x:Class="WpfLINQBinding2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
    <Grid>
        <ListBox Name="lstBox1" Width="350" Height="200"
                 HorizontalAlignment="Center" VerticalAlignment="Center" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Width="100" Text="{Binding Path=Nev}"/>
                        <TextBlock Width="100" Text="{Binding Path=Varos}"/>
                        <TextBlock Width="130" Text="{Binding Path=Szuletes}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>

Nagyon fontos, hogy az aláhúzott sort is tegyük be, mert enélkül nem fogjuk látni az adattáblánk rekordjait. 

Felvettünk ezzel a másolással a Grid layoutvezérlőbe egy ListBox-ot és ezt a vezérlőt a felületünk közepére tettük. Adatkötés segítségével jelenítjük meg az adattáblánk néhány oszlopát, a nevet, a várost és a születési időpontot (4. ábra). Ehhez szükségünk volt három TextBlock vezérlőre is.


4. ábra   A bemásolt XAML kód hatása futás közben
 

Ahhoz, hogy a projektünk működjön, hogy a 4. ábrán lévő futási eredményt tapasztaljuk, ki kellett egészíteni a MainWindow.xaml.cs C# file-t is (5. ábra). Létrehoztunk egy "_adc" példányt és felvettünk egy "_emb" változót, illetve létrehoztunk egy "Window_Loaded" eseményt is, amelyet a MainWindow.xaml-ben hívunk meg. Ebben az eseményben történik az "emberek" osztály példányosítása, illetve attól függően, hogy hol szeretnénk megjeleníteni (ListBox vagy DataGrid), átadjuk az adott vezérlő ItemsSource-nek a létrehozott példányt.


5. ábra   Az átírt MainWindow.xaml.cs file
 

Ha csak a DataGrid-ben jelenítjük meg a táblánk tartalmát, akkor a ListBox-os sort kommenteljük ki.

 

Módosítsuk most a MainWindow.xaml file tartalmát a következő XAML kód szerint :

<Window x:Class="WpfLINQBinding2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
    <Grid>
        <DataGrid Name="dataGrid1" Width="350" Height="200"
                 HorizontalAlignment="Center" VerticalAlignment="Center" 
                  AutoGenerateColumns="False" >
            <DataGrid.Columns>
                <DataGridTemplateColumn Header="WebElektronika" Width="SizeToCells" 
                                        IsReadOnly="True">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Width="100" Text="{Binding Path=Nev}"/>
                                <TextBlock Width="100" Text="{Binding Path=Varos}"/>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

Ha ezt a módosítást elvégezzük, akkor az adattáblánk tartalmát már nem ListBox-ban, hanem DataGrid vezérlő segítségével jelenítjük meg.


6. ábra   DataGrid-ben jelenítjük meg az értékeket
 

Ismét írjuk át a MainWindow.xaml file-t :

<Window x:Class="WpfLINQBinding2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
    <Grid>
        <DataGrid Name="dataGrid1" Width="400" Height="200"
                 HorizontalAlignment="Center" VerticalAlignment="Center" 
                 AutoGenerateColumns="True" >
        </DataGrid>
    </Grid>
</Window>

Ekkor a következő futási eredményt kapjuk (7. ábra).


7. ábra   Módosított DataGrid-es megjelenítés
 

Láthatjuk azt, hogy elég volt nekünk az xaml file tartalmát átírni, és az adattáblánkban (Table) tárolt értékek megjelenítését ezzel módosítani tudtuk.

Tekintettel arra, hogy vagy DataGrid-et, vagy ListBox-ot alkalmaztunk, ezért (és csak ezért !) kellett a vezérlőcserekor módosítani a MainWindow.xaml.cs file-t is.