Přenos dat pomocí datové vazby
V této lekci se podíváme, jak můžete použít datovou vazbu pro zadávání dat, zobrazení a skrytí částí uživatelského rozhraní na základě stavu aplikace. Seznámíte se také s celým INotifyPropertyChanged vzorem.
Pojďme naši stávající ukázku rozšířit přátelským pozdravem, který vypadá takto.
Když vyberete tlačítko Odeslat , aplikace zobrazí v horní části jednoduchý pozdrav.
1. Otevřete řešení.
Pokud nemáte sadu Visual Studio otevřenou s projektem, který jste vytvořili během poslední lekce, otevřete ho teď.
2. Vytvoření uživatelského rozhraní pro zadávání dat
Uživatelské rozhraní pro zadávání dat je jednoduché: pouze TextBlockv TextBoxButtonjednom vodorovném rozložení uprostřed obrazovky. Nejjednodušší způsob, jak vodorovně umístit ovládací prvky, je použít , StackPaneljako je tato.
<StackPanel HorizontalAlignment="Center"
VerticalAlignment="Center"
Orientation="Horizontal">
<TextBlock Margin="10"
VerticalAlignment="Center"
Text="Enter your name: "/>
<TextBox Name="tbUserName"
Margin="10"
Width="150"
VerticalAlignment="Center"/>
<Button Margin="10"
VerticalAlignment="Center" >Submit</Button>
</StackPanel>
Zkopírujte předchozí kód a vložte ho do Grid značky MainPage.xaml pod hodiny TextBlock.
3. Implementace a vytvoření vazby vlastnosti UserName
Pojďme se zaměřit na kód. Otevřete Soubor MainPage.xaml.cs (stisknutím klávesy F7 můžete přepnout na kód na pozadí a Shift+F7 a přepnout zpět na XAML). Vytvořte jednoduchou vlastnost s názvem UserName.
public string UserName { get; set; }
Když se vrátíme do souboru MainPage.xaml, můžeme vytvořit datovou vazbu mezi touto nově vytvořenou vlastností a ovládacím TextBox prvku. TextBox Změňte ovládací prvek přidáním atributu Text takto:
<TextBox Name="tbUserName"
Margin="10"
Width="150"
VerticalAlignment="Center"
Text="{x:Bind UserName, Mode=TwoWay}"/>
Poznámka:
Nezapomeňte si zmást a TextBlockTextBox ovládací prvky zde. Vypadají ve formátu XAML velmi podobně, ale pokud vytvoříte vazbu na UserNameTextBlocktextovou vlastnost místo objektu TextBox, aplikace nebude fungovat.
V předchozím kódu jsme vytvořili obousměrnou vazbu mezi Text vlastností TextBox objektu a UserName vlastností v kódu. To znamená, že kdykoli uživatel zadá text (a přesune fokus mimo TextBox), UserName vlastnost v kódu se změní. TextBoxText 's je také nastaven na hodnotu uloženou UserName ve vlastnosti při spuštění aplikace nebo kdykoliv vyvoláme NotifyPropertyChanged událost s parametrem propertyName"UserName". (V této lekci to neuděláme.)
4. Vytvoření obslužné rutiny kliknutí na tlačítko Odeslat
V návrhové ploše poklikejte na tlačítko Odeslat . Tím se automaticky vytvoří a otevře Button_Click událost v kódu. Button_Click není zvlášť dobrý název, takže změňte název metody na výraznější OnSubmitClicked. Až psaní dokončíte, klikněte na žárovku OnSubmitClicked vedle čáry. V nabídce vyberte Přejmenovat Button_Clicked na OnSubmitClicked . Vraťte se do XAML a zkontrolujte, jestli teď xaml tlačítka vypadá takto.
<Button Margin="10"
VerticalAlignment="Center"
Click="OnSubmitClicked">Submit</Button>
Když se vrátíme k kódu za kódem, zobrazíme po stisknutí tlačítka jednoduché dialogové okno. Do metody OnSubmitClicked přidejte následující kód:
var dlg = new Windows.UI.Popups.MessageDialog($"Hello {UserName}!");
_ = dlg.ShowAsync();
Pokud syntaxi neznáte $"Hello {Username}" , je to ekvivalent nebo "Hello " + UserName + "!"String.Format("Hello {0}!", UserName). Tato stručnější a čitelnější funkce se nazývá interpolace řetězců a byla zavedena v jazyce C# 6.
Jedná se _ o proměnnou zahození . Slouží k označení, že návratová ShowAsync hodnota metody se nepoužívá. Metoda ShowAsync vrátí Task objekt, což je zástupný symbol pro úkol, který bude dokončen v budoucnu. V našem případě nemusíme čekat na dokončení úkolu, abychom mohli vrátit vrácenou hodnotu.
5. Spuštění aplikace
Pojďme se podívat, co jsme zatím udělali! Spusťte aplikaci stisknutím klávesY F5 nebo Ctrl+F5. Zadejte své jméno, vyberte tlačítko Odeslat a dialogové okno by vás mělo pozdravit.
6. Implementace IsNameNeeded vlastnosti
Pokud dialogové okno zavřete, zobrazí se položka názvu zobrazená v uživatelském rozhraní. Tohle není to, co chceme. Formulář musíme po úspěšném vyplnění skrýt. Pojďme to tedy udělat jako další krok pomocí datové vazby.
Otevřete MainPage.xaml.cs a vytvořte vlastnost, která indikuje, zda je stále nutné zadat jméno uživatele. Do třídy přidejte následující kód MainPage :
private bool _isNameNeeded = true;
public bool IsNameNeeded
{
get { return _isNameNeeded; }
set
{
if (value != _isNameNeeded)
{
_isNameNeeded = value;
PropertyChanged?.Invoke(
this, new PropertyChangedEventArgs(nameof(IsNameNeeded)));
}
}
}
Jedná se o poměrně standardní logickou vlastnost s backing polem a výchozí hodnotou true, dokud se nedostaneme k setter. Vlastnost setter nejprve ověří, zda je nová hodnota stejná jako stará hodnota. Pokud ano, nemusíte nic dělat. Pokud se nic nezměnilo, nechcete se vydat na zdlouhavý proces přepočítání rozložení a překreslování ovládacích prvků. Pokud se však hodnota vlastnosti změnila , musíte o tom PropertyChanged pomocí události informovat uživatelské rozhraní.
V předchozím kódu můžete vidět standardní vzor INotifyPropertyChanged rozhraní:
- Ověřte, jestli se hodnota změnila.
- Pokud ano, nastavte novou hodnotu.
- Upozorněte uživatelské rozhraní.
Jakmile uživatelské rozhraní oznámíte (za předpokladu, že je režim vazby nastavený na OneWay nebo TwoWay), zavolá getter vlastnosti, přijme novou hodnotu a odpovídajícím způsobem změní uživatelské rozhraní.
7. Skrytí formuláře po výběru tlačítka Odeslat
V našem případě chceme, aby formulář pro zadání názvu byl viditelný pouze do doby, než bude vybráno tlačítko Odeslat . Pak by měla zmizet ve stejnou dobu, kdy se zobrazí zpráva s pozdravem. Pojďme metodu OnSubmitClicked změnit přidáním tohoto kódu na začátek:
if (string.IsNullOrEmpty(UserName))
{
return;
}
IsNameNeeded = false;
Nejprve se provede rychlá kontrola, protože tady už nepřijímáme prázdné uživatelské jméno. Po zadání IsNameNeeded jména je nastavena na falsehodnotu a aplikace pokračuje zobrazením dialogového okna zprávy. Nastavení hodnoty IsNameNeeded vyvolá NotifyPropertyChanged událost a upozorní uživatelské rozhraní.
Teď jsme hotovi s kódem pro skrytí uživatelského rozhraní. Pojďme se vrátit k XAML!
Na straně XAML musíme skrýt TextBlock, TextBox, a Button kdy IsNameNeeded je false. Nebo můžeme jen skrýt jejich kontejner, v StackPaneljednom kroku. Stačí přidat Visibility atribut do tohoto atributu StackPanel:
Visibility="{x:Bind IsNameNeeded, Mode=OneWay}"
Spusťte aplikaci, zadejte své jméno do TextBoxpole a ověřte, že vstupní formulář skutečně zmizí, když vyberete tlačítko Odeslat .
8. Zobrazení pozdravu pomocí vazby ui-to-UI
Pojďme nahradit MessageDialog trvalejší zobrazení: v TextBlock levém horním rohu. Přidejte nový TextBlock do hlavního Grid ovládacího prvku v XAML.
<TextBlock Text="{x:Bind sys:String.Format('Hello {0}!', tbUserName.Text), Mode=OneWay}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10"/>
Tady se děje spousta nových věcí. Pojďme rozptýlit vazbu atributu Text !
K vyhodnocení hodnoty Text vlastnosti TextBlockv systému volá integrovanou String.Format metodu s formátovacím řetězcem "Hello {0}". Objekt, který se má formátovat, Text bude tbUserName.Text (jinými slovy, vlastnost tbUserName ovládacího prvku). Režim vazby je definován jako OneWay, což znamená, že TextBlock bude přijímat data z TextBoxvlastnosti 's Text .
Tomu se říká vazba UI-to-UI, protože zdroj datové vazby i cíl jsou v uživatelském rozhraní. Abyste ho sys viděli v akci, musíte definovat obor názvů (který obsahuje metodu System.Format ). Do kořenové Page značky v XAML přidejte následující řádek:
xmlns:sys="using:System"
Když teď spustíte aplikaci, uvidíte, že se pozdrav aktualizuje pomocí každého keypressu. Ani nemusíte odebrat fokus z TextBox tlačítka Odeslat nebo ho vybrat.
V reálné aplikaci by se zobrazením jména uživatele nestalo prostřednictvím vazby uživatelského rozhraní na uživatelské rozhraní. Pravděpodobně byste sváželi DisplayName vlastnost třídy nebo něco podobného User .
9. Skrytí pozdravu, dokud není vybráno odeslat
Stejně cool, jak vypadá, že při psaní má aktualizace pozdravu , "Dobrý den!" Text při spuštění se může zobrazit jako neprofesionální. Bylo by vhodnější, aby pozdrav TextBlock zůstal neviditelný, dokud není vybráno tlačítko Odeslat .
Chcete-li vypočítat, zda je pozdrav viditelný, použijte metodu s názvem GetGreetingVisibilitya přidejte ji do MainPage třídy.
public Visibility GetGreetingVisibility()
{
return IsNameNeeded ? Visibility.Collapsed : Visibility.Visible;
}
Můžete si všimnout, že při skrytí StackPaneljsme vytvořili vazbu bool hodnoty na Visibility vlastnost (která má typ UIElement.Visibility). Visibility Vazba na bool hodnotu je tak běžná, že Microsoft vytvořil výchozí převod mezi těmito dvěma hodnotami, a proto jsme dříve nezískuli žádné chyby převodu typů. Tento automatický převod však funguje pouze pro vlastnosti, takže GetGreetingVisibility() metoda musí vrátit UIElement.Visibility místo logické hodnoty.
Stejně jako u vlastností musíme událost použít PropertyChanged k upozorňovat uživatelské rozhraní, když chceme, aby se metoda znovu vyhodnotila. Pojďme tedy tento řádek přidat na konec OnSubmitClicked metody.
PropertyChanged?.Invoke(this,
new PropertyChangedEventArgs(nameof(GetGreetingVisibility)));
Jako poslední krok ve skutečnosti proveďte vazbu přidáním Visibility atributu do pozdravu TextBlock. V souboru MainPage.xaml upravte TextBlock tak, aby vypadal takto:
<TextBlock Text="{x:Bind sys:String.Format('Hello {0}!', tbUserName.Text), Mode=OneWay}"
Visibility="{x:Bind GetGreetingVisibility(), Mode=OneWay}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10"/>
Všimněte si, že jsme do volání nemuseli přidávat žádné odkazy na GetGreetingVisibility() obor názvů, protože je členem MainPage samotné třídy.
Nakonec, pokud chcete přestat zobrazovat MessageDialog, okomentujte následující řádky z OnSubmitClicked metody.
// var dlg = new Windows.UI.Popups.MessageDialog($"Hello {UserName}!");
// dlg.ShowAsync();
Teď jste připraveni spustit aplikaci a užívat si pozdravné zprávy.
Shrnutí
V této lekci jste viděli, jak datová vazba usnadňuje přenos dat mezi uživatelským rozhraním a kódem nebo mezi dvěma prvky uživatelského rozhraní. Napsat však bylo hodně kódu, zejména při vyvolání PropertyChanged události v setters vlastnosti. V další lekci vytvoříte pomocnou třídu, která zjednoduší používání INotifyPropertyChanged vzoru.
V této lekci se podíváme, jak můžete pro zadávání dat použít datovou vazbu a jak zobrazit a skrýt oddíly uživatelského rozhraní na základě stavu aplikace. Seznámíte se také s úplným INotifyPropertyChanged vzorem a dozvíte se více o DataContext.
Pojďme naši stávající ukázku rozšířit přátelským pozdravem, který vypadá takto.
Když vyberete tlačítko Odeslat , aplikace zobrazí v horní části jednoduchý pozdrav.
1. Vytvoření objektu DataContext na úrovni okna
Pokud nemáte sadu Visual Studio otevřenou s projektem, který jste vytvořili během poslední lekce, otevřete ho teď.
V předchozí lekci jsme vytvořili vyhrazenou Clock třídu, která se vytvořila v rámci TextBlock zobrazené hodiny. Tato Clock třída obsahovala obchodní logiku pro samotné hodiny. Často však potřebujete pro obrazovku zahrnout mnohem více funkcí a bylo by zdlouhavé nastavit DataContext pro každý ovládací prvek v uživatelském rozhraní.
Naštěstí je navržený tak, DataContext abyste ho mohli použít na celý strom XAML – nebo jen na jeho část. Klíčovým atributem DataContext je, že je zděděný v rámci stromu XAML, ale může být přepsán v libovolném bodě pro konkrétní podstrom.
Podívejme se na to v praxi. Vytvořte novou třídu s názvem MainWindowDataContexta ujistěte se, že třída a jeho konstruktor jsou veřejné:
namespace DatabindingSampleWPF
{
public class MainWindowDataContext
{
public MainWindowDataContext()
{
}
}
}
Nyní nastavte instanci této třídy tak, aby byla DataContext pro celý Window. V souboru MainWindow.xaml přidejte tento kód hned za levou Window značku:
<Window.DataContext>
<local:MainWindowDataContext />
</Window.DataContext>
V tomto okamžiku sada Visual Studio může znamenat, že třída DatabindingSampleWPF.MainWindowDataContext neexistuje. Důvodem je to, že projekt nebyl zkompilován od přidání této třídy. Tuto chybu můžete opravit kompilací projektu.
Pojďme se podívat, co jsme zatím udělali. Je DataContext nastavená Window na úrovni (root). Tato instance objektu DataContext bude pro každý ovládací prvek uvnitř Window. Jedinou výjimkou je TextBlock zobrazení hodin, které již má vlastní DataContext sadu, a tím přepsání zděděného globálního DataContextsouboru . Pokud by to TextBlock mělo v hierarchii další ovládací prvky, ty by také dědily Clock objekt nastavený na objektu TextBlockDataContext .
2. Vytvoření uživatelského rozhraní pro zadávání dat
Uživatelské rozhraní pro zadávání dat je jednoduché: pouze TextBlockjedno , TextBoxa a Button v jednom vodorovném rozložení uprostřed obrazovky. Nejjednodušší způsob, jak vodorovně umístit ovládací prvky, je použít , StackPaneljako je tato.
<StackPanel HorizontalAlignment="Center"
VerticalAlignment="Center"
Orientation="Horizontal">
<TextBlock Margin="10"
VerticalAlignment="Center"
Text="Enter your name:"/>
<TextBox Name="tbName"
Margin="10"
Width="150"
VerticalAlignment="Center"/>
<Button Margin="10"
VerticalAlignment="Center">Submit</Button>
</StackPanel>
Zkopírujte předchozí kód a vložte ho do Grid značky MainPage.xaml pod hodiny TextBlock.
3. Implementace a vytvoření vazby vlastnosti UserName
Pojďme se zaměřit na kód. Otevřete MainWindowDataContext.csa vytvořte novou vlastnost s názvem UserName.
public string? UserName { get; set; }
Vrátíme se zpět MainWindow.xaml, můžeme vytvořit datová vazba mezi UserName vlastností a ovládacím TextBox prvku. TextBox Změňte ovládací prvek přidáním atributu Text takto:
<TextBox Name="tbUserName"
Margin="10"
Width="150"
VerticalAlignment="Center"
Text="{Binding UserName, Mode=TwoWay}"/>
Poznámka:
Nezapomeňte si zmást a TextBlockTextBox ovládací prvky zde. Vypadají ve formátu XAML velmi podobně, ale pokud vytvoříte vazbu na UserNameTextBlocktextovou vlastnost místo objektu TextBox, aplikace nebude fungovat.
S předchozím kódem jsme vytvořili obousměrnou vazbu mezi Text vlastností TextBox a UserName vlastností v kódu. To znamená, že kdykoli uživatel zadá text (a přesune fokus mimo TextBox), UserName vlastnost v kódu se změní. TextBoxText 's bude také nastaven na hodnotu uloženou UserName ve vlastnosti při spuštění aplikace, nebo kdykoli vyvoláme NotifyPropertyChanged událost s parametrem propertyName"UserName". (V této lekci to neuděláme.)
Poznámka:
Ve WPF je režim vazby automaticky určen pro nejběžnější situace. Pokud například provádíte vazbu na Text vlastnost , TextBoxWPF nastaví režim TwoWay vazby ve výchozím nastavení. To znamená, že jsme mohli dokonce přeskočit určení režimu vazby zde a mohli jsme právě napsat Text={Binding UserName}. Další informace o režimech vazeb najdete tady.
4. Vytvoření obslužné rutiny kliknutí na tlačítko Odeslat
V návrhové ploše poklikejte na tlačítko Odeslat . Tím se automaticky vytvoří událost MainWindow.xaml.cs a Button_Click soubor se otevře. Button_Click není velmi popisný název, proto změňte název metody na OnSubmitClicked. Až psaní dokončíte, klikněte na špičku šroubováku vedle OnSubmitClicked čáry a v nabídce vyberte Přejmenovat "Button_Clicked" na "OnSubmitClicked". Vraťte se do XAML a zkontrolujte, že xaml tlačítka teď vypadá takto:
<Button Margin="10"
VerticalAlignment="Center"
Click="OnSubmitClicked">Submit</Button>
Když se vrátíme k kódu za kódem, zobrazíme po stisknutí tlačítka jednoduché dialogové okno. Přidejte vlastnost pohodlí do horní části MainWindow třídy, která nám umožňuje snadný přístup k MainWindowDataContext objektu, který je nastaven jako DataContext celek MainWindow.
private MainWindowDataContext DC => (MainWindowDataContext)DataContext;
Dále do metody přidejte následující kód OnSubmitClicked :
MessageBox.Show($"Hello {DC.UserName}!");
Hodnota textu zadaného v objektu TextBox je uložena MainWindowDataContext.UserName ve vlastnosti. První řádek ukládá odkaz na MainWindowDataContext objekt v dočasné proměnné. Druhý řádek zobrazí pole se zprávou s pozdravem.
Pokud syntaxi neznáte $"Hello {Username}" , je to ekvivalent nebo "Hello " + UserName + "!"String.Format("Hello {0}!", UserName). Tato stručnější a čitelnější syntaxe se nazývá interpolace řetězců a byla zavedena v jazyce C# 6.
5. Spuštění aplikace
Pojďme si vyzkoušet, co jsme zatím udělali! Spusťte aplikaci stisknutím klávesY F5 nebo Ctrl+F5. Zadejte své jméno, vyberte tlačítko Odeslat a dialogové okno by vás mělo pozdravit.
6. Implementace IsNameNeeded vlastnosti
Všimněte si, že část uživatelského rozhraní pro zadání názvu se po stisknutí tlačítka Odeslat stále zobrazuje. Formulář musíme po úspěšném vyplnění skrýt. Pojďme to tedy udělat jako další krok pomocí datové vazby.
Nejprve Otevřete MainWindowDataContext.cs a proveďte MainWindowDataContext dědění z INotifyPropertyChanged, stejně jako jsme to udělali s Clock třídou.
using System.ComponentModel;
public class MainWindowDataContext : INotifyPropertyChanged
{
public event PropertyChangedEventHandler? PropertyChanged;
Dále vytvořte vlastnost, která určuje, jestli je stále nutné zadat jméno uživatele. Do třídy přidejte následující kód MainWindowDataContext :
private bool _isNameNeeded = true;
public bool IsNameNeeded
{
get { return _isNameNeeded; }
set
{
if (value != _isNameNeeded)
{
_isNameNeeded = value;
PropertyChanged?.Invoke(
this, new PropertyChangedEventArgs(nameof(IsNameNeeded)));
}
}
}
Jedná se o poměrně standardní logickou vlastnost s backing polem a výchozí hodnotou true, dokud se nedostaneme k setter. Vlastnost setter nejprve ověří, zda je nová hodnota stejná jako stará hodnota. Pokud ano, nemusíte nic dělat. Pokud se nic nezměnilo, nechcete se vydat na zdlouhavý proces přepočítání rozložení a překreslování ovládacích prvků. Pokud se však hodnota vlastnosti změnila , musíte o tom PropertyChanged pomocí události informovat uživatelské rozhraní.
V předchozím kódu můžete vidět standardní vzor INotifyPropertyChanged rozhraní:
- Ověřte, jestli se hodnota změnila.
- Pokud ano, nastavte novou hodnotu.
- Upozorněte uživatelské rozhraní.
Jakmile uživatelské rozhraní oznámíte (za předpokladu, že je režim vazby nastavený na OneWay nebo TwoWay), zavolá getter vlastnosti, přijme novou hodnotu a odpovídajícím způsobem změní uživatelské rozhraní.
7. Skrytí formuláře po výběru tlačítka Odeslat
V našem případě chceme, aby formulář pro zadání názvu byl viditelný pouze do doby, než bude vybráno tlačítko Odeslat . Pak by měla zmizet ve stejnou dobu, kdy se zobrazí zpráva s pozdravem. Pojďme metodu OnSubmitClicked změnit přidáním tohoto kódu na začátek:
if (string.IsNullOrWhiteSpace(DC.UserName))
{
return;
}
DC.IsNameNeeded = false;
Nejprve se provede rychlá kontrola, protože tady už nepřijímáme prázdné uživatelské jméno. Po zadání IsNameNeeded jména je nastavena na falsehodnotu a aplikace pokračuje zobrazením dialogového okna zprávy. Nastavení hodnoty IsNameNeeded vyvolá NotifyPropertyChanged událost a upozorní uživatelské rozhraní.
Teď jsme hotovi s kódem pro skrytí uživatelského rozhraní. Pojďme se vrátit k XAML!
Na straně XAML musíme skrýt TextBlock, TextBox, a Button kdy IsNameNeeded je false. Nebo můžeme jen skrýt jejich kontejner, v StackPaneljednom kroku. Přidejte atribut do tohoto atributu VisibilityStackPanel:
Visibility="{Binding IsNameNeeded, Converter={StaticResource BooleanToVisibilityConverter}}"
Tato vazba se skládá ze dvou částí. První část určuje cestu vazby, která odkazuje na IsNameNeeded vlastnost objektu MainWindowDataContext , který je nastaven jako DataContext celý Window.
IsNameNeeded Vlastnost je ale logická hodnota, zatímco Visibility je typu System.Windows.Visibility, což je .enum Musíme provést převod mezi těmito dvěma. Tento převod je tak běžný, WPF má integrovanou pomocnou třídu s názvem BooleanToVisibilityConverter. Potřebujeme vytvořit instanci této třídy a odkazovat na ni z deklarace vazby.
Vytvoříme instanci této třídy v XAML jako prostředek objektu Window . Každá FrameworkElement může mít svou vlastní kolekci prostředků s klíčem identifikujícím každý prostředek v kolekci. V BooleanToVisibilityConverter předchozí vazbě je tento klíč odkazující na BooleanToVisibilityConverter objekt uvnitř kolekce prostředků. Kolekci prostředků můžete definovat přidáním následujícího kódu do Windowpočáteční značky:
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</Window.Resources>
Spusťte aplikaci, zadejte své jméno do TextBoxpole a ověřte, že vstupní formulář skutečně zmizí, když vyberete tlačítko Odeslat .
8. Zobrazení pozdravu pomocí vazby ui-to-UI
Pojďme nahradit MessageDialog trvalejší zobrazení: v TextBlock levém horním rohu. Přidejte nový TextBlock do hlavního Grid ovládacího prvku v XAML.
<TextBlock Text="{Binding Text, ElementName=tbName, StringFormat='Hello {0}!'}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10"/>
V této nové TextBlockverzi je zavedeno několik nových věcí . Pojďme rozptýlit vazbu atributu Text !
Chcete-li vyhodnotit hodnotu Text vlastnosti TextBlockna , systém volá předdefinované String.Format metoda s formátovací řetězec "Hello {0}". Objekt, který se má formátovat, Text bude tbName.Text (jinými slovy, vlastnost tbName ovládacího prvku). Režim vazby je automaticky definován jako OneWay, což znamená, že TextBlock bude přijímat data z TextBoxvlastnosti ' Text s.
Tomu se říká vazba UI-to-UI, protože zdroj datové vazby i cíl jsou v uživatelském rozhraní. Pokud ji chcete zobrazit v akci, stačí aplikaci spustit. Všimněte si, jak se pozdrav aktualizuje pomocí každého keypressu. Ani nemusíte odebrat fokus z TextBox tlačítka Odeslat nebo ho vybrat.
V reálné aplikaci by se zobrazením jména uživatele nestalo prostřednictvím vazby uživatelského rozhraní na uživatelské rozhraní. Pravděpodobně byste se sváželi s DisplayName vlastností User třídy nebo jiným podobným přístupem.
9. Skrytí pozdravu, dokud není vybráno odeslat
Stejně cool, jak vypadá, že při psaní má aktualizace pozdravu , "Dobrý den!" Text při spuštění se může zobrazit jako neprofesionální. Bylo by vhodnější, aby pozdrav TextBlock zůstal neviditelný, dokud není vybráno tlačítko Odeslat .
Chcete-li vypočítat, zda je pozdrav viditelný, použijte vlastnost s názvem GreetingVisibilitya přidejte jej do MainWindowDataContext třídy.
public Visibility GreetingVisibility => IsNameNeeded ? Visibility.Collapsed : Visibility.Visible;
Budete muset přidat System.Windows také obor názvů do usings in MainWindowDataContext .
Můžete si vzpomenout, že dříve, když jsme schovávali StackPanel, jsme sváželi bool hodnotu s Visibility vlastností (která má typ System.Windows.Visibility). Pokud je však zdroj vazby již správným datovým typem, můžeme přeskočit BooleanToVisibilityConverter .
Stejně jako předtím musíme událost použít PropertyChanged k upozorňovat uživatelské rozhraní, když chceme, aby znovu vyhodnocovala GreetingVisibility. Pojďme tedy tento řádek přidat na konec if bloku v setteru IsNameNeeded .
PropertyChanged?.Invoke(
this, new PropertyChangedEventArgs(nameof(GreetingVisibility)));
Tím se zajistí, že při každé IsNameNeeded změně budou vyvolány dvě PropertyChanged události: jedna pro samotnou vlastnost a jedna pro IsNameNeeded počítanou vlastnost GreetingVisibility, která závisí na IsNameNeeded.
Jako poslední krok proveďte vazbu přidáním Visibility atributu do pozdravu TextBlock. Upravte MainWindow.xamlho TextBlock tak, aby vypadal takto:
<TextBlock Text="{Binding Text, ElementName=tbName, StringFormat='Hello {0}!'}"
Visibility="{Binding GreetingVisibility}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10"/>
Nakonec, chcete-li ukončit zobrazení MessageBox, okomentovat následující řádek z OnSubmitClicked metody v MainWindow.xaml.cs.
// MessageBox.Show($"Hello {DC.UserName}!");
Teď jste připraveni spustit aplikaci a užívat si pozdravné zprávy.
Shrnutí
V této lekci jste viděli, jak datová vazba usnadňuje přenos dat mezi uživatelským rozhraním a kódem nebo mezi dvěma prvky uživatelského rozhraní. Napsat však bylo hodně kódu, zejména při vyvolání PropertyChanged události v setters vlastnosti. V další lekci vytvoříte pomocnou třídu, která zjednoduší používání INotifyPropertyChanged vzoru.