Do nového roku jako lepší programátoři? Znovu otevíráme večerní školu programování. Nette framework, návrhové vzory, testování nebo vůbec poprvé kurzy ASP.NET dostupné odkudkoli v republice.

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

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

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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 458x (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 (7 hlasů) :
55555


 


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

 

 

Komentáře
Zobrazit starší komentáře (4)

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.3.2016 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.9.2016 16:51
 
Odpovědět 24.9.2016 16:51
Avatar
joon5
Člen
Avatar
joon5:

Velmi dobry tutorial, diky. Tesim sa na pokracovanie.

 
Odpovědět 3.12.2016 17:43
Avatar
slezak-petr
Člen
Avatar
slezak-petr:

Ahoj po stažení ukázkové aplikace a spuštění aplikace, mi vyskočilo hlášení, které (podle mne) říká, že projekt má propojení (referenci) na web "http://petrds­.visualstudio­.com/defaultco­llection"
Co s tím? Podle mne chybka, nejde zobrazit "Design" ...

Chybová hláška:
The solution you are openinig is bound to source control on following Team Foundation Server:
http://petrds.visualstudio.com/…ltcollection
Would you like to contact this server to try to enable source control integration?

Odpovědět 15. ledna 19:16
Čím víc se učím, tím víc mi přijde, že toho ještě mnoho neumím
Avatar
Jan Vargovský
Redaktor
Avatar
Odpovídá na slezak-petr
Jan Vargovský:

To není žádná chybová hláška, ale normální otázka...

 
Odpovědět 15. ledna 19:42
Avatar
slezak-petr
Člen
Avatar
Odpovídá na Jan Vargovský
slezak-petr:

Každopádně ani jedna odpověď nevede k zobrazení View:

The following error was encountered: TF400813: Resource not available for anonymous access. Client authentication required.

Odpovědět 15. ledna 19:45
Čím víc se učím, tím víc mi přijde, že toho ještě mnoho neumím
Avatar
Jan Vargovský
Redaktor
Avatar
Odpovídá na slezak-petr
Jan Vargovský:

Prostě tam dej v tom dialogu "ne".

Má to propojené s TFS, ten tam má jako součást projektu i url k tomu serveru a ptá se tě, jestli se chceš připojit k němu.

Editováno 15. ledna 22:05
 
Odpovědět 15. ledna 22:04
Avatar
slezak-petr
Člen
Avatar
slezak-petr:

Odpovídám na Jan Vargovský (dal jsem chybně "odpovědět"?)
Ano s tím bych souhlasil, a na přístup do jeho TFS nemám jako "noname" přístup ...

Navíc jsem zapomněl, že mám na NTB novou instalaci a ještě jsem neměl nainstalovaný SQL server
takže z toho další chyby, typu connection error
Takže až rozjedu server, tak se uvidí co dál

Editováno 16. ledna 7:56
Odpovědět 16. ledna 7:53
Čím víc se učím, tím víc mi přijde, že toho ještě mnoho neumím
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 10 zpráv z 14. Zobrazit vše