Vytvoření interaktivního uživatelského rozhraní
V předchozích lekcích jste vytvořili jednoduché uživatelské rozhraní formuláře, které uživatele vyzve k zadání jména a s tlačítkem zobrazilo pozdrav. V této lekci nastavíte trochu uživatelsky přívětivější formulář tak, že zakážete nebo skryjete tlačítko Odeslat , dokud nezadáte aspoň tři znaky.
Nejprve se podíváme přesně na to, kdy MainPageLogic.UserName je hodnota nastavená prostřednictvím vazby.
1. Umístění zarážky
Otevřete MainPageLogic.cs soubor a najděte řádek, který obsahuje UserName vlastnost.
public string UserName { get; set; }
Nastavte zarážku na zarážku tak, že přesunete stříšku uvnitř set textu a stisknete klávesu F9. Toho lze dosáhnout také tak, že kliknete pravým tlačítkem myši set a vyberete Zarážku nebo vložíte zarážku.
2. Spusťte aplikaci v režimu ladění.
Potom spusťte aplikaci v režimu ladění (F5 nebo Ladění / Spustit ladění). Zadejte něco do TextBox pole a všimněte si, že se zarážka nenarazí. Pokud stisknete klávesu Tab , přesune fokus vstupu na další ovládací prvek (v našem případě tlačítko). Ztráta fokusu TextBox na aktualizaci vazby, takže se dosáhne zarážky.
3. Změňte vazbu tak, aby se aktualizovala při každém stisknutí klávesy.
Zastavte ladění stisknutím kombinace kláves Shift+F5 nebo výběrem možnosti Ladění / Zastavit ladění.
Abychom mohli poskytnout přesnou zpětnou vazbu o tom, kdy je tlačítko Odeslat povolené, nemůžeme čekat, až se fokus ztratí na tlačítku TextBox. Naštěstí existuje způsob, jak změnit chování vazby. Můžete ho vynutit, aby se aktualizovala UserName vlastnost (což je zdroj, protože hovoříme o vazbě TwoWay ), kdykoli se textová vlastnost změní. Musíme změnit UpdateSourceTrigger vazbu, která je ve výchozím nastavení nastavená LostFocus . UpdateSourceTrigger definuje okolnosti, které způsobí aktualizaci zdroje.
Otevřete Soubor MainPage.xaml a najděte TextBoxsoubor . Potom změňte vazbu přidáním UpdateSourceTrigger=PropertyChanged. Celá TextBox značka by teď měla vypadat takto:
<TextBox Name="tbUserName"
Margin="10"
Width="150"
VerticalAlignment="Center"
Text="{x:Bind Logic.UserName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
Pokud teď aplikaci ladíte, uvidíte, že se zarážka stiskne při každé stisknutí klávesy a změně textu. Výborně!
Možná si vzpomenete, že když jsme použili vazbu UI-to-UI k zobrazení pozdravu, každé stisknutí klávesy se aktivovalo z vazby. V takovém případě byla vazba definována na TextBlock, a proto zdroj byl TextBox.Text vlastnost, která se mění při každém stisknutí klávesy. UpdateSourceTrigger ovlivňuje tok dat v opačném směru. Tokuje ze zdroje vazby do ovládacího prvku, na kterém je vazba definována (cíl vazby).
5. Přidání IsSubmitAllowed vlastnosti
Dále přidáte logickou vlastnost, která označuje, zda je odeslání formuláře povoleno. Otevřete MainPageLogic.cs a přidejte do třídy novou vlastnost MainPageLogic .
public bool IsSubmitAllowed => UserName?.Trim().Length > 2;
Toto je velmi jednoduché ověření: pokud zadaný text, oříznutý počátečními a koncovými prázdnými znaky, obsahuje více než dva znaky, přijmeme ho jako uživatelské jméno.
6. Přehodnotujte IsSubmitAllowed po každé změně na UserName
Musíme rozhraní uživatelského rozhraní sdělit, kdy tuto vlastnost znovu vyhodnotit a odrážet ji v uživatelském rozhraní. Nejlepší způsob, jak toto přehodnocení aktivovat, je voláním RaisePropertyChanged do setter UserName vlastnosti. Aby bylo možné přidat kód do setteru, je potřeba ho převést na úplnou vlastnost. UserName Nahraďte vlastnost následujícím kódem:
private string _userName;
public string UserName
{
get { return _userName; }
set
{
_userName = value;
RaisePropertyChanged(nameof(IsSubmitAllowed));
}
}
Pro tuto vlastnost se nepoužívá INotifyPropertyChanged , protože ještě nemáme situaci, kdy UserName se vlastnost změnila z kódu. Pokaždé, když se ale text změní v TextBoxuživatelském rozhraní , musíme říct uživatelskému rozhraní, že IsSubmitAllowed se vlastnost mohla změnit a měla by být znovu zhodnocená.
7. Vytvořte vazbu IsSubmitAllowed vlastnosti na vlastnost tlačítka IsEnabled .
Teď jste s kódem hotovi. Vraťte se do souboru MainPage.xaml a vyhledejte tlačítko Odeslat . IsEnabled Přidejte atribut tak, aby xaml tlačítka teď vypadal takto:
<Button Margin="10"
VerticalAlignment="Center"
Click="{x:Bind Logic.Submit}"
IsEnabled="{x:Bind Logic.IsSubmitAllowed, Mode=OneWay}">Submit</Button>
8. Spusťte aplikaci.
Pokud teď aplikaci spustíte, měli byste vidět, že tlačítko Odeslat je ve výchozím nastavení zakázané. Zůstane zakázaný, pokud zadáte několik mezer a povolí se jenom v případě, že jsou zadány aspoň tři prázdné znaky.
I když tento příklad provádí určité ověření, UPW má bohatou sadu ověřovacích funkcí, které se zobrazí v pozdějším modulu.
9. Skrytí tlačítka Odeslat
Vy nebo váš návrhář se může rozhodnout přejít o krok dál a skutečně skrýt tlačítko Odeslat , dokud ho nebude možné stisknout. Jedná se o snadnou změnu, takže to teď uděláme. Stačí upravit XAML a změnit IsEnabled na Visibility.
Pokud ale zadáte několik znaků, uvidíte, že celé uživatelské rozhraní přeskočí. Je to proto, že okolí StackPanel je vodorovně zarovnané na střed (HorizontalAlignment="Center") a šířka StackPanel je menší, když Button je sbalená. Chcete-li tento problém vyřešit, můžete dát Button do 100 jednotek široké Border, jako je tento.
<Border Width="100">
<Button Margin="10"
VerticalAlignment="Center"
Click="{x:Bind Logic.Submit}"
Visibility="{x:Bind Logic.IsSubmitAllowed, Mode=OneWay}">Submit</Button>
</Border>
Když se uvnitř Border znovu objeví, StackPanel šířka se nezměníButton.
Shrnutí
V této lekci jste viděli, jak lze ladit vazbu. Seznámili jste se s UpdateSourceTrigger možností vazby a seznámili jste se s dalšími příklady datových vazeb. Viděli jste také příklad, jak se dá vzhled a chování uživatelského rozhraní změnit, aniž byste se museli dotýkat kódu jazyka C#, pokud používáte datovou vazbu správně.
V další lekci se podíváme, jak můžete pomocí datové vazby zobrazit více položek v seznamu.
V předchozích lekcích jste vytvořili jednoduché uživatelské rozhraní formuláře, které uživatele vyzve k zadání jména a s tlačítkem zobrazilo pozdrav. V této lekci nastavíte trochu uživatelsky přívětivější formulář tak, že zakážete nebo skryjete tlačítko Odeslat , dokud nezadáte aspoň tři znaky.
Nejprve se podíváme přesně na to, kdy MainWindowDataContext.UserName je hodnota nastavená prostřednictvím vazby.
1. Umístění zarážky
MainWindowDataContext.cs Otevřete soubor a najděte řádek, který obsahuje UserName vlastnost.
public string UserName { get; set; }
Nastavte zarážku na zarážku tak, že přesunete stříšku uvnitř set textu a stisknete klávesu F9. Toho lze dosáhnout také tak, že kliknete pravým tlačítkem a setvyberete Zarážku / Vložit zarážku.
2. Spusťte aplikaci v režimu ladění.
Potom spusťte aplikaci v režimu ladění (F5 nebo Ladění / Spustit ladění). Zadejte něco do TextBox pole a všimněte si, že se zarážka nedorazí. Pokud stisknete klávesu Tab, přesune fokus vstupu na další ovládací prvek (v našem případě tlačítko). Ztráta fokusu TextBox na aktualizaci vazby, takže se dosáhne zarážky.
3. Změňte vazbu tak, aby se aktualizovala při každém stisknutí klávesy.
Zastavte ladění stisknutím kombinace kláves Shift+F5 nebo výběrem možnosti Ladění / Zastavit ladění.
Abychom mohli poskytnout přesnou zpětnou vazbu o tom, kdy je tlačítko Odeslat povolené, nemůžeme čekat, až se fokus ztratí na tlačítku TextBox. Naštěstí existuje způsob, jak změnit chování vazby. Můžete ho vynutit, aby se aktualizovala UserName vlastnost (což je zdroj, protože hovoříme o vazbě TwoWay ), kdykoli se textová vlastnost změní. Musíme změnit UpdateSourceTrigger vazbu, která je ve výchozím nastavení nastavená LostFocus . UpdateSourceTrigger definuje okolnosti, které způsobí aktualizaci zdroje.
Otevřete MainWindow.xamla najděte .TextBox Potom změňte vazbu přidáním UpdateSourceTrigger=PropertyChanged. Celá TextBox značka by teď měla vypadat takto:
<TextBox Name="tbName"
Margin="10"
Width="150"
VerticalAlignment="Center"
Text="{Binding UserName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
Pokud teď aplikaci ladíte, uvidíte, že se zarážka stiskne při každé stisknutí klávesy a změně textu. Výborně!
Můžete si vzpomenout, že když jsme použili vazbu UI-to-UI k zobrazení pozdravu, každé stisknutí klávesy aktivovalo vazbu. V takovém případě byla vazba definována na TextBlock, a proto zdroj byl TextBox.Text vlastnost, která se mění při každém stisknutí klávesy. UpdateSourceTrigger ovlivňuje tok dat v opačném směru. Tokuje ze zdroje vazby do ovládacího prvku, na kterém je vazba definována (cíl vazby).
5. Přidání IsSubmitAllowed vlastnosti
Dále přidáte logickou vlastnost, která označuje, zda je odeslání formuláře povoleno. Otevřete MainWindowDataContext.cs a přidejte do třídy novou vlastnost MainWindowDataContext .
public bool IsSubmitAllowed => !string.IsNullOrWhiteSpace(UserName);
Tato vlastnost provádí jednoduché ověření. Pokud zadaný text nemá hodnotu null, prázdný nebo výhradně prázdný znak, přijmeme ho jako uživatelské jméno.
6. Přehodnotujte IsSubmitAllowed po každé změně na UserName
Musíme poradit rozhraní uživatelského rozhraní, kdy tuto vlastnost znovu vyhodnotit a odrážet ji v uživatelském rozhraní. Nejlepší způsob, jak toto přehodnocení aktivovat, je voláním RaisePropertyChanged do setter UserName vlastnosti. Aby bylo možné přidat kód do setteru, je potřeba ho převést na úplnou vlastnost. UserName Nahraďte vlastnost následujícím kódem:
private string? _userName;
public string? UserName
{
get { return _userName; }
set
{
_userName = value;
RaisePropertyChanged(nameof(IsSubmitAllowed));
}
}
Pro tuto vlastnost se nepoužívá INotifyPropertyChanged , protože nemáme situaci, kdy UserName se vlastnost změní z kódu. Pokaždé, když se ale text změní v TextBoxuživatelském rozhraní , musíme říct uživatelskému rozhraní, že IsSubmitAllowed se vlastnost mohla změnit a měla by být znovu zhodnocená.
7. Vytvořte vazbu IsSubmitAllowed vlastnosti na vlastnost tlačítka IsEnabled .
Teď jste s kódem hotovi. Vraťte se a MainWindow.xaml najděte tlačítko Odeslat . IsEnabled Přidejte atribut tak, aby xaml tlačítka teď vypadal takto:
<Button Margin="10"
VerticalAlignment="Center"
Click="OnSubmitClicked"
IsEnabled="{Binding IsSubmitAllowed}">Submit</Button>
8. Spusťte aplikaci.
Pokud teď aplikaci spustíte, měli byste vidět, že tlačítko Odeslat je ve výchozím nastavení zakázané. Povolí se, jakmile do něj něco napíšete.
I když tento příklad provádí některé základní ověřování, WPF má bohatou sadu ověřovacích funkcí, které budou demonstrována v dalším modulu.
Shrnutí
V této lekci jste viděli, jak lze ladit vazby. Seznámili jste se s UpdateSourceTrigger možností vazby a seznámili jste se s dalšími příklady datových vazeb. Viděli jste také příklad, jak, pokud používáte datovou vazbu správně, vzhled a chování uživatelského rozhraní se dá změnit bez zásahu do kódu jazyka C#.
V další lekci se podíváme, jak můžete pomocí datové vazby zobrazit více položek v seznamu.