Fakturační systém v C# .NET - Styly a databinding

C# .NET Databáze Fakturační systém v C# .NET - Styly a databinding

Minule jsme v tutoriálu řešili grafické rozhraní ve WPF. Dnes naše rozhraní obohatíme o styly a databinding.

Styly

Styly nám slouží, stějně jako v CSS, ke změně vlastností grafických prvků. V souboru App.xaml se definují styly, které platí pro celou aplikaci. Styly se vkládají do elementu Resources. Parametrem TargetType se definuje, pro jaký objekt se má styl použít. V elementu Setter v jeho parametru Property vybereme property objektu, kterou chceme změnit.

Nadefinujeme si vnější okraje pro všechny tlačítka v aplikaci.

<Application.Resources>
    <Style TargetType="{x:Type Button}">
        <Setter Property="Margin" Value="2"/>
    </Style>

</Application.Resources>

Tato změna nám zruší okraje buňky, na kterou jsme klikli v DataGridu.

<Style  TargetType="{x:Type DataGridCell}"   >
    <Setter Property="BorderThickness" Value="0"/>
</Style>

Přidáme další styly, které nám naší aplikaci po vzhledové stránce upraví.

<Style TargetType="{x:Type Label}">
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="FontWeight" Value="Bold"/>
</Style>
<Style  TargetType="{x:Type TextBox}"   >
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="Margin" Value="0,2,35,2" />
</Style>
<Style  TargetType="{x:Type TextBlock}"   >
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
</Style>

Můžeme si všimnout, že okamžitě po přidání stylů se nám aplikace v designeru změnila.

Po spuštění vypadá aplikace následovně.

Ostylování aplikace v C# .NET WPF

Databinding

Slouží nám k propojení dat s kontrolkami. Náš dataGridPersons generuje automaticky názvy sloupečků. Tyto názvy se nám nelíbí a proto si je vytvoříme sami použitím databindingu.

Nejdříve v dataGridPersons nastavíme parametr AutoGenerateCo­lumns="False". Pak vložíme definici sloupečků. Kromě definice šablony(template) názvu sloupečku, definujeme šablonu pro buňku, ve které se nám zobrazí data. V této buňce budeme mít TextBlock s nabindovanou property Text.

<DataGrid.Columns>
    <DataGridTemplateColumn Header="Jméno" Width="SizeToCells" MinWidth="50"  IsReadOnly="True" >
        <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <TextBlock  Text="{Binding Name}" />
            </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
    <DataGridTemplateColumn Header="Příjmení" Width="SizeToCells" MinWidth="60" IsReadOnly="True">
        <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <TextBlock  Text="{Binding Surname}" />
            </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>

</DataGrid.Columns>

Úplně stejným způsobem si vytvoříme ostatní sloupce. Tímto máme dataBinding DataGridu hotov. Nyní si vytvoříme dataBinding na TextBoxy v Gridu.

Nabindování TextBoxu.

<TextBox Grid.Row="0" Grid.Column="1" Name="txtName" >
    <TextBox.Text>
        <Binding Path="Name" >

        </Binding>
    </TextBox.Text>
</TextBox>

Opět tento binding uděláme stejně i pro zbývající TextBoxy.

Po kliknutí na záznam v DataGridu "pošleme" objekt Person do Gridu, tam se data zobrazí v nabindovaných Textboxech, do kterých nepůjde psát. Až po kliknutí na Upravit.

private void dataGridPersons_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (dataGridPersons.SelectedItem is Person)
    {
        gridPerson.DataContext = (Person)dataGridPersons.SelectedItem;
        SetPersonButtons(true, true, false, true);
        SetPersonTxt(false);
    }
}

A metoda SetPersonTxt():

public void SetPersonTxt(bool enabled)
{
    txtDIC.IsEnabled = enabled;
    txtEmail.IsEnabled = enabled;
    txtICO.IsEnabled = enabled;
    txtName.IsEnabled = enabled;
    txtSurname.IsEnabled = enabled;
    txtCity.IsEnabled = enabled;
    txtStreet.IsEnabled = enabled;
    txtPSC.IsEnabled = enabled;
}

Stejným způsobem upravíme i InvoicesControl.

Účetnictví v C# .NET

Úpravy navíc jsou následující.

Zobrazení datumu si naformátujeme pouze na samotný datum.

<TextBlock Text="{Binding Date, StringFormat= dd/MM/yyyy}"  />

V DataGdiru chceme zobrazit odběratele i dodavatele. Do buňky vložíme StackPanel s nabindovanými TextBlocky.

 <DataGridTemplateColumn Header="Odběratel" Width="SizeToCells" MinWidth="80"  IsReadOnly="True" >
     <DataGridTemplateColumn.CellTemplate>
         <DataTemplate>
             <StackPanel Orientation="Horizontal">
                 <TextBlock Text="{Binding PersonCustomer.Surname}"/>
                 <TextBlock Text=" "/>
                 <TextBlock Text="{Binding PersonCustomer.Name}" />
                 <TextBlock Text=", IČO: "/>
                 <TextBlock Text="{Binding PersonCustomer.ICO}"  />
                 <TextBlock Text=", DIČ: "/>
                 <TextBlock Text="{Binding PersonCustomer.DIC}" />
             </StackPanel>
         </DataTemplate>
     </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

Pro zobrazení odběratelů a dodavatelů jsme použili dva ComboBoxy. Jejich nabindování by bylo obdobné jako v DataGridu(viz. výše), ale jelikož oba budou zobrazovat stejná data, tak si vytvoříme šablonu. Tato šablona bude použita u obou ComboBoxů. Definujeme ji v nadřazeném Gridu, aby mohla být použita v obou ComboBoxech.

<Grid.Resources>
   <DataTemplate x:Key="PersonTemplate">
      <StackPanel Orientation="Horizontal">
          <TextBlock Text="{Binding Surname}"/>
          <TextBlock Text=" "/>
          <TextBlock Text="{Binding Name}" />
          <TextBlock Text=", IČO: "/>
          <TextBlock Text="{Binding ICO}"  />
          <TextBlock Text=", DIČ: "/>
          <TextBlock Text="{Binding DIC}"  />
      </StackPanel>
   </DataTemplate>
</Grid.Resources>

Do parametrů ComboBoxů zapíšeme tento parametr, čímž bude použita naše šablona pro zobrazení dat.

ItemTemplate="{StaticResource PersonTemplate}"

Metoda pro zobrazení dat v Gridu bude vypadat následovně.

private void dataGridInvoices_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (dataGridInvoices.SelectedItem is Invoice)
    {
        Invoice selectedInvoice = (Invoice)dataGridInvoices.SelectedItem;
        gridInvoice.DataContext = selectedInvoice;
        cmbCustomer.SelectedItem = selectedInvoice.PersonCustomer;
        cmbSupplier.SelectedItem = selectedInvoice.PersonSupplier;
        SetInvoiceButtons(true, false, true);
        SetInvoiceTxt(false);
    }
}

Metodu Init upravíme. Po spuštění programu se naplní daty i TextBoxy.

public void Init(DataManager manager)
{
    this.manager = manager;
    dataGridInvoices.ItemsSource = manager.Invoices;
    cmbCustomer.ItemsSource = manager.Persons;
    cmbSupplier.ItemsSource = manager.Persons;
}

Závěrem

Výsledkem naší dnešní práce je nastylování aplikace a nabindování dat.

Styly a binding v C# .NET WPF

Příště si implementujeme validace pro TextBoxy a vytváření nových osob a faktur.


 

Stáhnout

Staženo 442x (13.3 MB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

  Aktivity (1)

Článek pro vás napsal Petr Domes (petrds)
Avatar
Programuji v .NET. Ovládám C#, .ASP, WF, WPF, SQL

Jak se ti líbí článek?
Celkem (6 hlasů) :
55555


 


Miniatura
Všechny články v sekci
Databáze v C# - ADO.NET

 

 

Komentáře

Avatar
tobadal
Člen
Avatar
tobadal:

Dobrý den,

chtěl bych se zeptat zda tento seriál "Fakturační systém" má pokračování

Děkuji

 
Odpovědět 23.3.2015 10:49
Avatar
Vít Ježek
Člen
Avatar
Vít Ježek:

to tobadal: nejspíš ne :-)

 
Odpovědět 24.7.2015 14:06
Avatar
Odpovídá na Vít Ježek
Libor Šimo (libcosenior):

Citujem poslednú vetu z článku:
"Příště si implementujeme validace pro TextBoxy a vytváření nových osob a faktur."

Kedy to bude?

Odpovědět 19.8.2015 7:39
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Odpovídá na Libor Šimo (libcosenior)
Petr Domes (petrds):

při troše dobré vůle příští týden :)

 
Odpovědět 4.9.2015 9:29
Avatar
johr
Člen
Avatar
johr:

Který týden bude ten příští ? Seriál je perfekní, ale ten konec tomu opravdu chybí, kdyby tak alespoň ve zkratce ...

 
Odpovědět 26.10.2015 14:14
Avatar
Petr Domes (petrds):

no jo, bohužel, práce je práce. Článek mám rozpracován = validace a editace.

 
Odpovědět 5.11.2015 19:05
Avatar
Odpovídá na Petr Domes (petrds)
Martin Turner:

Díky za pěkný tutoriál.
Už se těším na pokračování. :-)

 
Odpovědět 9. března 9:46
Avatar
Petr Domes (petrds):

Chtěl by mi někdo pomoct s otestováním/do­děláním ? Validace a přidávání/edi­tace/mazání záznamů mám už hotovo. Pište PM.

Editováno 24. září 16:51
 
Odpovědět 24. září 16:51
Avatar
joon5
Člen
Avatar
joon5:

Velmi dobry tutorial, diky. Tesim sa na pokracovanie.

 
Odpovědět 3. prosince 17:43
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.