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

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

Štýly

Štýly nám slúži, rovnako ako v CSS, ku zmene vlastností grafických prvkov. V súbore App.xaml sa definujú štýly, ktoré platí pre celú aplikáciu. Štýly sa vkladajú do elementu Resources. Parametrom TargetType sa definuje, pre aký objekt sa má štýl použiť. V elementu 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 údajová mriežka.

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

Po spustení vyzerá aplikácie nasledovne.

DataBinding

Slúži nám k prepojeniu dát s kontrolkami. Náš dataGridPersons generuje automaticky názvy stĺpcov. Tieto názvy sa nám nepáči a preto si ich vytvoríme sami použitím DataBinding.

Najskôr v dataGridPersons nastavíme parameter AutoGenerateColumns = "False". Potom vložíme definíciu stĺpcov. Okrem definície šablóny (template) názvu stĺpčeku, definujeme šablónu pre bunku, v ktorej sa nám zobrazia dáta. V tejto bunke budeme mať TextBlock s nabindování 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 DataGrid hotový. Teraz si vytvoríme DataBinding na textbox v Gridu.

Nabindování textbox.

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

Po kliknutí na záznam v údajová mriežka "pošleme" objekt Person do Gridu, tam sa dáta zobrazia v nabindovaných textbox, 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 DataGdiru chceme zobraziť odberateľa i dodávateľa. Do bunky 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>

Pre zobrazenie odberateľov a dodávateľov sme použili dva ComboBox. Ich nabindování by bolo podobné ako v údajová mriežka (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á u oboch ComboBox. Definujeme ju v nadradenom Gridu, aby mohla byť použitá v oboch ComboBox.

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

ItemTemplate="{StaticResource PersonTemplate}"

Metóda pre zobrazenie dát v Gridu 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 naplní dátami aj textbox.

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 nastylování aplikácie a nabindování dát.

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