Fakturačný systém v C# .NET - WPF a User Control

Minule sme v tutoriáli riešili lokálnu databázu a objektový prístup do nej cez Entity Framework. Dnes vytvoríme grafické rozhranie vo WPF. Použijeme dataGridy a comboBoxy. Je vyžadovaná základná znalosť WPF a XAML.

Do našej Solution pridáme projekt WPF s menom View. Bude obsahovať užívateľské rozhranie a nastavíme ho ako StartUp. Ďalej nastavíme referenciu na DB projekt, v ktorom bude okrem DB aj logická vrstva programu.

Návrh formulára Persons

Budeme vytvárať dva takmer totožné formuláre s väčším počtom textboxov. Pre prehľadnosť a prípadné ďalšie využitie na inom mieste v programe si tieto dva formuláre uložíme zvlášť ako User Control.

Do projektu pridáme nový item User Control.

Celé okno si pomocou koreňového gridu rozdelíme na dva stĺpce v pomere 5:3. Do ľavého vložíme dataGrid a do pravého nový grid pre formulár. DataGrid aj grid si pomenujeme.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="5*"/>
        <ColumnDefinition Width="3*"/>
    </Grid.ColumnDefinitions>

    <DataGrid Name="dataGridPersons"
    </DataGrid>

    <Grid Name="gridPerson"  Grid.Column="1">
    </Grid>

</Grid>

V gridPerson vytvoríme 2 stĺpce s 10 riadkami. Do nich vložíme popisky (label) a textBoxy. Do posledného riadku vložíme nový grid s tlačidlami.

Celý kód vyzerá nasledovne.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="5*"/>
        <ColumnDefinition Width="3*"/>
    </Grid.ColumnDefinitions>

    <DataGrid Name="dataGridPersons" SelectionMode="Single" SelectionUnit="FullRow" IsReadOnly="True" >
    </DataGrid>

    <Grid Name="gridPerson" Grid.Column="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition  Height="auto"/>
            <RowDefinition  Height="auto"/>
            <RowDefinition  Height="auto"/>
            <RowDefinition  Height="auto"/>
            <RowDefinition  Height="auto"/>
            <RowDefinition  Height="auto"/>
            <RowDefinition  Height="auto"/>
            <RowDefinition  Height="auto"/>
            <RowDefinition  />
            <RowDefinition  Height="auto"/>
        </Grid.RowDefinitions>

        <Label Grid.Row="0" >Jméno</Label>
        <Label Grid.Row="1" >Příjmení (firma)</Label>
        <Label Grid.Row="2">IČO</Label>
        <Label Grid.Row="3">DIČ</Label>
        <Label Grid.Row="4">Ulice</Label>
        <Label Grid.Row="5">Město</Label>
        <Label Grid.Row="6">PSČ</Label>
        <Label Grid.Row="7">Email</Label>


        <TextBox Grid.Row="0" Grid.Column="1" Name="txtName" >
        </TextBox>

        <TextBox Grid.Row="1" Grid.Column="1" Name="txtSurname" >
        </TextBox>

        <TextBox Grid.Row="2" Grid.Column="1" Name="txtICO" >
        </TextBox>

        <TextBox Grid.Row="3" Grid.Column="1" Name="txtDIC" >
        </TextBox>

        <TextBox Grid.Row="4" Grid.Column="1" Name="txtStreet" >
        </TextBox>

        <TextBox Grid.Row="5" Grid.Column="1" Name="txtCity" >
        </TextBox>

        <TextBox Grid.Row="6" Grid.Column="1" Name="txtPSC" >
        </TextBox>

        <TextBox Grid.Row="7" Grid.Column="1" Name="txtEmail">
        </TextBox>

        <Grid Name="btns" Grid.Row="10" Grid.Column="0" Grid.ColumnSpan="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <Button Grid.Column="0" Name="btnNew" >Nový</Button>
            <Button Grid.Column="1" Name="btnEdit" >Upravit</Button>
            <Button Grid.Column="2" Name="btnSave" >Uložit</Button>
            <Button Grid.Column="3" Name="btnDel" >Smazat</Button>
        </Grid>
    </Grid>
</Grid>

Funkčnosť tlačidiel

Vytvoríme metódu SetPersonButtons, ktorá nám bude zakazovať alebo povoľovať tlačidlá.

private void SetPersonButtons(bool newPerson, bool edit, bool save, bool delete)
{
    btnNew.IsEnabled = newPerson;
    btnEdit.IsEnabled = edit;
    btnSave.IsEnabled = save;
    btnDel.IsEnabled = delete;
}

Všetkým tlačidlám registrujeme udalosť pre kliknutie a voláme metódu SetPersonButtons.

private void btnNew_Click(object sender, RoutedEventArgs e)
{
    SetPersonButtons(false, false, true, false);
}

private void btnEdit_Click(object sender, RoutedEventArgs e)
{
    SetPersonButtons(false, false, true, false);
}

private void btnSave_Click(object sender, RoutedEventArgs e)
{
    SetPersonButtons(true, true, false, true);
}

private void btnDel_Click(object sender, RoutedEventArgs e)
{
    SetPersonButtons(true, true, false, false);
}

Logika dát

V projekte View si vytvoríme triedu Manager. Bude nám slúžiť na správu dát z databázy. Obsahuje kolekciu osôb typu ObservableCollec­tion. Zmeny v tejto kolekcii sa nám automaticky prejavia v datagride. (pre správnu funkčnosť je nutné mať v dataGride parameter IsReadOnly="True")

public class Manager
{
    private DbInvoiceEntities db = new DbInvoiceEntities();
    private ObservableCollection<Person> persons = new ObservableCollection<Person>();
public ObservableCollection<Person> Persons { get { return persons; } }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        persons.Init(manager);
    }
}

Visual štúdio nám podčiarklo premennú db a vypísalo chybu o chýbajúcej referencii na Entity Framework. Cestu k chýbajúcim DLL nastavíme rovnakú, akú máme v DB projekte v zložke packages.

Ďalej musíme v súbore App.config pridať connection string. Nájdeme ho v DB projekte.

<connectionStrings>
  <add name="DbInvoiceEntities" connectionString="metadata=res://*/ModelInvoice.csdl|res://*/ModelInvoice.ssdl|res://*/ModelInvoice.msl;provider=System.Data.SqlClient;provider connection string=&quot;data source=(LocalDB)\v11.0;attachdbfilename=|DataDirectory|\DbInvoice.mdf;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework&quot;" providerName="System.Data.EntityClient" />
</connectionStrings>

Hlavné okno

Do hlavného okna (MainWindow) vložíme TabControl, ktorý nám vytvorí záložky.

<Window x:Class="View.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:localUC="clr-namespace:View"
        Title="InvoiceSys" Height="350" Width="700
        ">
    <TabControl HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" >
        <TabItem Header="Osoby">
            <localUC:PersonsControl x:Name="persons" />
        </TabItem>

        <TabItem Header="Faktury">

        </TabItem>
    </TabControl>
</Window>

Do prvej záložky "Osoby" vložíme náš UserControl pomocou nami definovaného namespace. Vďaka tomu designer vidí nami vytvorený UC.

xmlns:localUC="clr-namespace:View"

Nezabudneme náš PersonsControl pomenovať.

V MainWindow si vytvoríme inštanciu triedy Manager. V udalosti Loaded zavoláme metódu Init.

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    persons.Init(manager);
}

Metóda Init v PersonsControl vyzerá nasledovne. DataGridu sa nastaví zdroj dát.

public void Init(Manager manager)
{
    this.manager = manager;
    dataGridPersons.ItemsSource = manager.Persons;
}

Návrh formulára Invoices

Návrh bude v podstate totožný. Postupujte rovnako ako v prípade PersonsControl.

Záverom

Naša dnešná práca by mala vyzerať takto.

Vytvorili sme si dva UserControly, ktoré sme si pridali do hlavného okna. Dáta z databázy sme si zobrazili v DataGridoch. V budúcom diele sa dostaneme k štylovaniu formulárov, dataBindingu a validácii dát v TextBoxoch.

Než vyjde budúci diel, môžete si vyskúšať implementovať zobrazenie dát v TextBoxoch po kliknutí na riadok v DataGride.