Fakturačný systém v C# .NET - Štýly a databinding

Minule sme v tutoriáli riešili grafické rozhranie vo WPF. Dnes naše rozhranie obohatíme o štýly a databinding.

Štýly

Štýly nám slúžia, rovnako ako v CSS, na zmenu vlastností grafických prvkov. V súbore App.xaml sa definujú štýly, ktoré platia pre celú aplikáciu. Štýly sa vkladajú do elementu Resources. Parameter TargetType definuje, pre aký objekt sa má štýl použiť. V elemente Setter v jeho parametri Property vyberieme property objektu, ktorú chceme zmeniť.

Nadefinujeme si vonkajšie okraje pre všetky tlačidlá v aplikácii.

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

</Application.Resources>

Táto zmena nám zruší okraje bunky, na ktorú sme klikli v DataGride.

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

Pridáme ďalšie štýly, ktoré nám našu aplikáciu po vzhľadovej stránke upravia.

<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šimnúť, že okamžite po pridaní štýlov sa nám aplikácia v designeri zmenila.

Po spustení vyzerá aplikácia nasledovne.

Databinding

Slúži nám na prepojenie dát s kontrolkami. Náš dataGridPersons generuje automaticky názvy stĺpčekov. Tieto názvy sa nám nepáčia a preto si ich vytvoríme sami použitím databindingu.

Najskôr v dataGridPersons nastavíme parameter AutoGenerateCo­lumns="False". Potom vložíme definíciu stĺpčekov. Okrem definície šablóny(template) názvu stĺpčeka, definujeme šablónu pre bunku, v ktorej sa nám zobrazia dáta. V tejto bunke budeme mať 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>

Úplne rovnakým spôsobom si vytvoríme ostatné stĺpce. Týmto máme dataBinding DataGridu hotový. Teraz si vytvoríme dataBinding na TextBoxy v Gride.

Nabindovanie TextBoxu.

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

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

Opäť tento binding urobíme rovnako aj pre zostávajúce TextBoxy.

Po kliknutí na záznam v DataGride "pošleme" objekt Person do Gridu, tam sa dáta zobrazia v nabindovaných Textboxoch, do ktorých nepôjde písať. Až po kliknutí na Upraviť.

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 metóda 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;
}

Rovnakým spôsobom upravíme aj InvoicesControl.

Úpravy navyše sú nasledujúce.

Zobrazenie dátumu si naformátujeme iba na samotný dátum.

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

V DataGdire chceme zobraziť odberateľov i dodávateľov. Do bunky vložíme StackPanel s nabindovanými TextBlockmi.

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

Na zobrazenie odberateľov a dodávateľov sme použili dva ComboBoxy. Ich nabindovanie by bolo obdobné ako v DataGride (viď. vyššie), ale keďže obaja budú zobrazovať rovnaké dáta, tak si vytvoríme šablónu. Táto šablóna bude použitá pri oboch ComboBoxoch. Definujeme ju v nadradenom Gride, aby mohla byť použitá v oboch ComboBoxoch.

<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 parametrov ComboBoxov zapíšeme tento parameter, čím bude použitá naša šablóna na zobrazenie dát.

ItemTemplate="{StaticResource PersonTemplate}"

Metóda pre zobrazenie dát v Gride bude vyzerať nasledovne.

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);
    }
}

Metódu Init upravíme. Po spustení programu sa naplnia dátami aj TextBoxy.

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

Záverom

Výsledkom našej dnešnej práce je naštylovanie aplikácie a nabindovanie dát.

Nabudúce si implementujeme validáciu pre TextBoxy a vytváranie nových osôb a faktúr.