Sdílet prostřednictvím

Vytváření datových vazeb

Pokud jste navrhli uživatelské rozhraní se zástupnými obrázky a často používaným textem, v tomto kurzu se dozvíte, jak ho připojit k reálným datům pomocí datových vazeb. Naučte se formátovat data, udržovat uživatelské rozhraní a data synchronizovaná a zlepšit udržovatelnost kódu.

V tomto kurzu se naučíte nahradit svoje šablony datovými vazbami a vytvořit další přímé vazby mezi uživatelským rozhraním a vašimi daty. Naučíte se také formátovat nebo převádět data pro zobrazení a udržovat uživatelské rozhraní a data synchronizovaná. Po dokončení tohoto kurzu můžete zlepšit jednoduchost a uspořádání kódu XAML a jazyka C#, což usnadňuje údržbu a rozšíření.

Začnete zjednodušenou verzí ukázky PhotoLabu. Tato úvodní verze obsahuje kompletní datovou vrstvu a základní rozložení stránky XAML a vypouští mnoho funkcí, aby se kód snadněji procházel. V tomto kurzu se nevytvorí kompletní aplikace, proto si nezapomeňte prohlédnout finální verzi, abyste viděli funkce, jako jsou vlastní animace a adaptivní rozložení. Konečnou verzi najdete v kořenové složce úložiště Windows-appsample-photo-lab.

Ukázková aplikace PhotoLab má dvě stránky. Hlavní stránka zobrazí zobrazení galerie fotografií spolu s některými informacemi o každém souboru obrázku.

Snímek obrazovky hlavní stránky aplikace PhotoLab zobrazující zobrazení galerie fotografií s metadaty obrázků

Na stránce podrobností se po výběru zobrazí jedna fotka. Rozbalovací nabídka pro úpravy umožňuje vám změnit, přejmenovat a uložit fotografii.

Snímek obrazovky se stránkou podrobností aplikace PhotoLab zobrazující jednu fotku s možnostmi úprav

Požadavky

Část 0: Získání počátečního kódu z GitHubu

V tomto kurzu začnete zjednodušenou verzí ukázky PhotoLabu.

  1. Přejděte na stránku GitHubu pro ukázku: https://github.com/Microsoft/Windows-appsample-photo-lab.

  2. Dále je potřeba naklonovat nebo stáhnout ukázku. Vyberte tlačítko Klone nebo stáhněte. Zobrazí se dílčí nabídka. nabídku Klonovat nebo stáhnout na stránce GitHubu s ukázkou PhotoLabu

    Pokud gitHub neznáte:

    a. Vyberte Stáhnout ZIP a uložte soubor místně. Tato akce stáhne .zip soubor, který obsahuje všechny soubory projektu, které potřebujete.

    b) Extrahujte soubor. Pomocí Průzkumníka souborů přejděte na .zip soubor, který jste právě stáhli, klikněte na něj pravým tlačítkem myši a vyberte Extrahovat vše....

    c) Přejděte na místní kopii ukázkového souboru a otevřete adresář Windows-appsample-photo-lab-master\xaml-basics-starting-points\data-binding.

    Pokud znáte GitHub:

    a. Naklonujte hlavní větev úložiště na svůj počítač.

    b) Přejděte do adresáře Windows-appsample-photo-lab\xaml-basics-starting-points\data-binding.

  3. Dvojitým kliknutím na Photolab.sln otevřete řešení v aplikaci Visual Studio.

Část 1: Nahrazení zástupných symbolů

V této části vytvoříte jednorázové vazby v xaml šablony dat, abyste místo zástupného obsahu zobrazili skutečné obrázky a metadata obrázků.

Jednorázové vazby jsou určené jen pro čtení a neměnná data. Jsou vysoce výkonné a snadno se vytvářejí, takže můžete zobrazit velké datové sady v GridView a ListView ovládacích prvcích.

Nahraďte zástupné symboly jednorázovými vazbami

  1. Otevřete složku xaml-basics-starting-points\data-binding a spusťte soubor PhotoLab.sln v sadě Visual Studio.

  2. Ujistěte se, že je platformy řešení nastavená na x86 nebo x64, nikoli arm, a pak spusťte aplikaci. Tento krok ukazuje stav aplikace se zástupnými symboly uživatelského rozhraní před přidáním vazeb.

    Spuštěná aplikace se zástupnými obrázky a textem

  3. Otevřete MainPage.xaml a vyhledejte DataTemplate s názvem ImageGridView_DefaultItemTemplate. Tuto šablonu aktualizujete tak, aby používala datové vazby.

    Před:

    <DataTemplate x:Key="ImageGridView_DefaultItemTemplate">

    x:Key hodnotu používá ImageGridView k výběru této šablony pro zobrazení datových objektů.

  4. Přidejte do šablony hodnotu x:DataType.

    Po:

    <DataTemplate x:Key="ImageGridView_DefaultItemTemplate"
              x:DataType="local:ImageFileInfo">

    x:DataType určuje, pro který typ je tato šablona určena. V tomto případě je to šablona pro třídu ImageFileInfo (kde local: označuje místní obor názvů definovaný v deklaraci xmlns v horní části souboru).

    Potřebujete x:DataType při použití x:Bind výrazů v šabloně dat, jak je popsáno dále.

  5. V DataTemplatevyhledejte prvek Image s názvem ItemImage a nahraďte jeho Source hodnotu, jak je znázorněno.

    Před:

    <Image x:Name="ItemImage"
       Source="/Assets/StoreLogo.png"
       Stretch="Uniform" />

    Po:

    <Image x:Name="ItemImage"
       Source="{x:Bind ImageSource}"
       Stretch="Uniform" />

    x:Name identifikuje prvek XAML, abyste na něj mohli odkazovat jinde v XAML a v kódu.

    výrazy poskytují hodnotu vlastnosti uživatelského rozhraní získáním hodnoty z vlastnosti datového objektu . V šablonách je uvedená vlastnost vlastností objektu, na který je x:DataType nastaveno. V tomto případě je zdrojem dat vlastnost ImageFileInfo.ImageSource.

    Poznámka:

    Hodnota x:Bind také informuje editor o datovém typu, takže místo zadávání názvu vlastnosti ve výrazu x:Bind můžete použít IntelliSense. Vyzkoušejte ho na kód, který jste právě vložili: umístěte kurzor těsně za x:Bind a stisknutím mezerníku zobrazte seznam vlastností, se kterou můžete vytvořit vazbu.

  6. Nahraďte hodnoty ostatních ovládacích prvků uživatelského rozhraní stejným způsobem. (Zkuste to udělat pomocí IntelliSense místo kopírování a vkládání.)

    Před:

    <TextBlock Text="Placeholder" ... />
<StackPanel ... >
    <TextBlock Text="PNG file" ... />
    <TextBlock Text="50 x 50" ... />
</StackPanel>
<muxc:RatingControl Value="3" ... />

    Po:

    <TextBlock Text="{x:Bind ImageTitle}" ... />
<StackPanel ... >
    <TextBlock Text="{x:Bind ImageFileType}" ... />
    <TextBlock Text="{x:Bind ImageDimensions}" ... />
</StackPanel>
<muxc:RatingControl Value="{x:Bind ImageRating}" ... />

Spusťte aplikaci a podívejte se, jak zatím vypadá. Už žádné zástupné symboly! Jsi na dobrém startu.

Spuštění aplikace se skutečnými obrázky a textem místo zástupných symbolů

Poznámka:

Pokud chcete experimentovat dál, zkuste do šablony dat přidat nový TextBlock a pomocí triku x:Bind IntelliSense vyhledejte vlastnost, která se má zobrazit.

V této části vytvoříte jednorázové vazby v XAML stránky pro připojení zobrazení galerie ke kolekci obrázků. Tyto vazby nahrazují stávající procedurální kód v části kódu za uživatelským rozhraním. Vytvoříte také tlačítko Odstranit , abyste viděli, jak se při odebrání obrázků z kolekce změní zobrazení galerie. Zároveň se naučíte, jak svázat události s obslužnými rutinami, které poskytují větší flexibilitu než tradiční obslužné rutiny.

Všechny dosud popsané vazby jsou uvnitř šablon dat a odkazují na vlastnosti třídy označené hodnotou x:DataType. A co zbytek XAML na vaší stránce?

x:Bind výrazy mimo šablony dat se vždy svazují se samotnou stránkou. To znamená, že můžete odkazovat na cokoli, co vložíte do kódu nebo deklarujete v JAZYCE XAML, včetně vlastních vlastností a vlastností jiných ovládacích prvků uživatelského rozhraní na stránce (pokud mají hodnotu x:Name).

V ukázce PhotoLabu použijete vazbu, která slouží k přímému připojení hlavního GridView ovládacího prvku ke kolekci obrázků, místo toho, abyste to prováděli v kódu na pozadí. Později uvidíte další příklady.

Vytvoření vazby hlavního ovládacího prvku GridView k kolekci Images

  1. V MainPage.xaml.cs vyhledejte metodu GetItemsAsync a odeberte kód, který nastavuje ItemsSource.

    Před:

    ImageGridView.ItemsSource = Images;

    Po:

    // Replaced with XAML binding:
// ImageGridView.ItemsSource = Images;

  2. V souboru MainPage.xaml vyhledejte GridView s názvem ImageGridView a přidejte atribut ItemsSource. Pro hodnotu použijte výraz x:Bind, který odkazuje na vlastnost Images implementovanou v code-behind.

    Před:

    <GridView x:Name="ImageGridView"

    Po:

    <GridView x:Name="ImageGridView"
          ItemsSource="{x:Bind Images}"

    Vlastnost Images je typu ObservableCollection<ImageFileInfo>, takže jednotlivé položky zobrazené v GridView jsou typu ImageFileInfo. Tento typ odpovídá hodnotě x:DataType popsané v části 1.

Všechny vazby, které jste viděli dříve, jsou jednorázové vazby jen pro čtení, což je výchozí chování pro prosté x:Bind výrazy. Data se načítají pouze při inicializaci, což umožňuje vysoce výkonné vazby – ideální pro podporu více složitých zobrazení velkých datových sad.

I vazba ItemsSource, kterou jste právě přidali, je jednorázová, pouze pro čtení na neměnnou hodnotu vlastnosti, ale je třeba zde důležité rozlišit. Neměnná hodnota vlastnosti Images je jedna konkrétní instance kolekce inicializovaná jednou, jak je znázorněno zde.

private ObservableCollection<ImageFileInfo> Images { get; }
    = new ObservableCollection<ImageFileInfo>();

Hodnota Images vlastnosti se nikdy nezmění, ale protože vlastnost je typu ObservableCollection<T>, obsah kolekce se může změnit a vazba automaticky zaznamená změny a aktualizuje uživatelské rozhraní.

Chcete-li toto chování otestovat, dočasně přidejte tlačítko, které odstraní aktuálně vybraný obrázek. Toto tlačítko není v konečné verzi, protože výběrem obrázku přejdete na stránku podrobností. Nicméně chování ObservableCollection<T> je stále důležité v konečné ukázce PhotoLab, protože XAML se inicializuje v konstruktoru stránky (prostřednictvím volání InitializeComponent metody), ale kolekce Images je naplněna později v metodě GetItemsAsync.

Přidání tlačítka pro odstranění

  1. V souboru MainPage.xaml najděte CommandBar s názvem MainCommandBar a před tlačítko lupy přidejte nové tlačítko. (Ovládací prvky lupy zatím nefungují. Ty připojíte v další části kurzu.)

    <AppBarButton Icon="Delete"
              Label="Delete selected image"
              Click="{x:Bind DeleteSelectedImage}" />

    Pokud už xaml znáte, může tato Click hodnota vypadat neobvykle. V předchozích verzích XAML jste museli tuto metodu nastavit na metodu s konkrétním podpisem obslužné rutiny události, obvykle včetně parametrů pro odesílatele události a objekt argumentů specifických pro událost. Tuto techniku můžete použít i v případě, že potřebujete argumenty události, ale s x:Bind, můžete se připojit i k jiným metodám. Pokud například nepotřebujete data události, můžete se připojit k metodám, které nemají žádné parametry, jako tady.

  2. Do MainPage.xaml.cs přidejte metodu DeleteSelectedImage.

    private void DeleteSelectedImage() =>
    Images.Remove(ImageGridView.SelectedItem as ImageFileInfo);

    Tato metoda jednoduše odstraní vybraný obrázek z kolekce Images.

Teď spusťte aplikaci a pomocí tlačítka odstraňte několik obrázků. Jak vidíte, uživatelské rozhraní se automaticky aktualizuje díky datové vazbě a typu ObservableCollection<T>.

Poznámka:

Tento kód odstraní pouze instanci ImageFileInfo z kolekce Images ve spuštěné aplikaci. Neodstraní soubor obrázku z počítače.

Část 3: Nastavení posuvníku lupy

V této části vytvoříte jednosměrné vazby z ovládacího prvku v šabloně dat na posuvník lupy, který je mimo šablonu. Dozvíte se také, že datovou vazbu můžete používat s mnoha vlastnostmi ovládacího prvku, nejen s nejobyklejšími vlastnostmi, jako jsou TextBlock.Text a Image.Source.

Propojte šablonu dat obrázku s posuvníkem lupy

  • Najděte DataTemplate pojmenované ImageGridView_DefaultItemTemplate a nahraďte hodnoty **Height** a Width ovládacího prvku Grid v horní části šablony.

    před

    <DataTemplate x:Key="ImageGridView_DefaultItemTemplate"
              x:DataType="local:ImageFileInfo">
    <Grid Height="200"
          Width="200"
          Margin="{StaticResource LargeItemMargin}">

    po

    <DataTemplate x:Key="ImageGridView_DefaultItemTemplate"
              x:DataType="local:ImageFileInfo">
    <Grid Height="{Binding Value, ElementName=ZoomSlider}"
          Width="{Binding Value, ElementName=ZoomSlider}"
          Margin="{StaticResource LargeItemMargin}">

Všimli jste si, že se jedná o výrazy Binding, a ne x:Bind výrazy? Jedná se o starý způsob vytváření datových vazeb a většinou je zastaralý. x:Bind dělá skoro všechno, co Binding dělá, a další. Pokud však použijete x:Bind v šabloně dat, vytvoří vazbu na typ deklarovaný v hodnotě x:DataType. Jak tedy vytvoříte vazbu v šabloně na něco na stránce XAML nebo v kódu? Musíte použít výraz ve starém stylu Binding.

Binding výrazy nerozpoznávají x:DataType hodnotu, ale tyto výrazy Binding mají ElementName hodnoty, které fungují téměř stejně. Tyto příkazy říkají modulu vazby, že hodnota vazby je vázána na vlastnost Value zadaného prvku na stránce, což je prvek s hodnotou x:Name. Pokud chcete vytvořit vazbu na vlastnost v kódu na pozadí, vypadalo by něco jako {Binding MyCodeBehindProperty, ElementName=page}, kde page odkazuje na hodnotu x:Name nastavenou v elementu Page XAML.

Poznámka:

Ve výchozím nastavení jsou výrazy Binding jednosměrně, což znamená, že se uživatelské rozhraní automaticky aktualizuje, když se změní hodnota vázané vlastnosti.

Naopak, výchozí nastavení pro x:Bind je jednorázové, což znamená, že se ignorují všechny změny vázané vlastnosti. Toto je výchozí nastavení, protože se jedná o nejvýkonnější možnost a většina vazeb se používá ke statickým datům jen pro čtení.

Tady je lekce, že pokud používáte x:Bind s vlastnostmi, které mohou změnit jejich hodnoty, nezapomeňte přidat Mode=OneWay nebo Mode=TwoWay. Příklady najdete v další části.

Spusťte aplikaci a pomocí posuvníku změňte rozměry šablony obrázků. Jak vidíte, efekt je poměrně výkonný, aniž byste potřebovali mnoho kódu.

Běžící aplikace se zobrazeným posuvníkem lupy

Poznámka:

Pro výzvu zkuste vytvořit vazbu dalších vlastností uživatelského rozhraní na vlastnost posuvníku lupy Value nebo na jiné posuvníky, které přidáte po posuvníku lupy. Můžete například svázat vlastnost FontSizeTitleTextBlock s novým posuvníkem s výchozí hodnotou 24. Nezapomeňte nastavit přiměřené minimální a maximální hodnoty.

Část 4: Vylepšení prostředí lupy

V této části přidáte vlastní vlastnost ItemSize do kódu a vytvoříte jednosměrné vazby ze šablony obrázku do nové vlastnosti. Hodnotu ItemSize aktualizuje posuvník lupy a další faktory, jako je přepínač Přizpůsobit obrazovce, a velikost okna, což zajišťuje lepší zážitek.

Na rozdíl od předdefinovaných vlastností ovládacího prvku vaše vlastní vlastnosti automaticky neaktualizují uživatelské rozhraní ani s jednosměrnými a obousměrnými vazbami. Fungují dobře s jednorázovýmipřiřazeními, ale pokud chcete, aby se změny vlastností ve vašem uživatelském rozhraní skutečně projevily, bude třeba něco udělat.

Vytvořte vlastnost ItemSize tak, aby aktualizovala uživatelské rozhraní.

  1. V MainPage.xaml.cs změňte podpis třídy MainPage tak, aby implementuje rozhraní INotifyPropertyChanged.

    Před:

    public sealed partial class MainPage : Page

    Po:

    public sealed partial class MainPage : Page, INotifyPropertyChanged

    To informuje systém vazeb, že MainPage má událost PropertyChanged (přidána následně), které mohou vazby použít ke aktualizaci uživatelského rozhraní.

  2. Přidejte událost PropertyChanged do třídy MainPage.

    public event PropertyChangedEventHandler PropertyChanged;

    Tato událost poskytuje úplnou implementaci vyžadovanou rozhraním INotifyPropertyChanged. Aby však měla jakýkoli účinek, musíte událost explicitně vyvolat ve vlastním nastavení.

  3. Přidejte vlastnost ItemSize a v jejím setteru vyvolejte událost PropertyChanged.

    public double ItemSize
{
    get => _itemSize;
    set
    {
        if (_itemSize != value)
        {
            _itemSize = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ItemSize)));
        }
    }
}
private double _itemSize;

    Vlastnost ItemSize zveřejňuje hodnotu soukromého pole _itemSize. Použití záložního pole, jako je toto, umožňuje vlastnosti zkontrolovat, zda je nová hodnota stejná jako stará hodnota předtím, než vyvolá potenciálně nepotřebné PropertyChanged události.

    Událost samotná je vyvolána metodou Invoke. Otazník zkontroluje, jestli PropertyChanged událost má hodnotu null – to znamená, jestli byly ještě přidány nějaké obslužné rutiny událostí. Každá jednosměrná nebo obousměrná vazba přidá obslužnou rutinu události na pozadí, ale pokud nikdo neposlouchá, nic dalšího by se zde nestalo. Pokud však PropertyChanged není null, Invoke se volá s odkazem na zdroj události (samotná stránka reprezentovaná klíčovým slovem this) a event-args objekt, který označuje název vlastnosti. Díky tomuto informacím budou jakékoli jednosměrné nebo obousměrné vazby na vlastnost ItemSize informovány o jakýchkoli změnách, aby mohly aktualizovat vázané uživatelské rozhraní.

  4. V souboru MainPage.xaml najděte DataTemplate s názvem ImageGridView_DefaultItemTemplate a nahraďte hodnoty Height a Width ovládacího prvku Grid, který je umístěn v horní části šablony. (Pokud jste provedli vazbu control-to-control v předchozí části tohoto kurzu, jedinými změnami je nahradit ValueItemSize a ZoomSliderpage. Nezapomeňte to udělat pro Height i pro Width!)

    před

    <DataTemplate x:Key="ImageGridView_DefaultItemTemplate"
              x:DataType="local:ImageFileInfo">
    <Grid Height="{Binding Value, ElementName=ZoomSlider}"
        Width="{Binding Value, ElementName=ZoomSlider}"
        Margin="{StaticResource LargeItemMargin}">

    po

    <DataTemplate x:Key="ImageGridView_DefaultItemTemplate"
              x:DataType="local:ImageFileInfo">
    <Grid Height="{Binding ItemSize, ElementName=page}"
          Width="{Binding ItemSize, ElementName=page}"
          Margin="{StaticResource LargeItemMargin}">

Nyní, když uživatelské rozhraní může reagovat na změny ItemSize, musíte skutečně provést nějaké změny. Jak už bylo zmíněno dříve, hodnota ItemSize se počítá z aktuálního stavu různých ovládacích prvků uživatelského rozhraní, ale výpočet se musí provést při každé změně stavu těchto ovládacích prvků. K tomu použijete připojení k událostem, aby určité změny v uživatelském rozhraní vyvolaly pomocnou metodu, která aktualizuje ItemSize.

Aktualizace hodnoty vlastnosti ItemSize

  1. Přidejte metodu DetermineItemSize do MainPage.xaml.cs.

    private void DetermineItemSize()
{
    if (FitScreenToggle != null
        && FitScreenToggle.IsOn == true
        && ImageGridView != null
        && ZoomSlider != null)
    {
        // The 'margins' value represents the total of the margins around the
        // image in the grid item. 8 from the ItemTemplate root grid + 8 from
        // the ItemContainerStyle * (Right + Left). If those values change,
        // this value needs to be updated to match.
        int margins = (int)this.Resources["LargeItemMarginValue"] * 4;
        double gridWidth = ImageGridView.ActualWidth -
            (int)this.Resources["DefaultWindowSidePaddingValue"];
        double ItemWidth = ZoomSlider.Value + margins;
        // We need at least 1 column.
        int columns = (int)Math.Max(gridWidth / ItemWidth, 1);

        // Adjust the available grid width to account for margins around each item.
        double adjustedGridWidth = gridWidth - (columns * margins);

        ItemSize = (adjustedGridWidth / columns);
    }
    else
    {
        ItemSize = ZoomSlider.Value;
    }
}

  2. Na začátku souboru MainPage.xaml přidejte vazbu události SizeChanged k prvku Page.

    Před:

    <Page x:Name="page"

    Po:

    <Page x:Name="page"
      SizeChanged="{x:Bind DetermineItemSize}"

  3. Najděte Slider pojmenované ZoomSlider (v části Page.Resources) a přidejte vazbu události ValueChanged.

    Před:

    <Slider x:Name="ZoomSlider"

    Po:

    <Slider x:Name="ZoomSlider"
        ValueChanged="{x:Bind DetermineItemSize}"

  4. Najděte ToggleSwitch pojmenované FitScreenToggle a přidejte vazbu události Toggled.

    Před:

    <ToggleSwitch x:Name="FitScreenToggle"

    Po:

    <ToggleSwitch x:Name="FitScreenToggle"
              Toggled="{x:Bind DetermineItemSize}"

Spusťte aplikaci a pomocí posuvníku lupy a přepínače Přizpůsobit obrazovce upravte rozměry šablony obrázků. Jak vidíte, nejnovější změny umožňují upřesnit prostředí pro zvětšení a změnu velikosti a zároveň udržovat kód dobře uspořádaný.

Běžící aplikace s povoleným přizpůsobením na obrazovku

Poznámka:

V případě výzvy zkuste za TextBlock přidat ZoomSlider a svázat vlastnost Text s vlastností ItemSize. Protože se nejedná o šablonu dat, můžete místo x:Bind jako v předchozích vazbách Binding použít ItemSize.

Část 5: Povolení úprav uživatelů

Tady vytvoříte obousměrné vazby, které uživatelům umožní aktualizovat hodnoty, včetně názvu obrázku, hodnocení a různých vizuálních efektů.

Abyste toho dosáhli, aktualizujete existující DetailPage, který poskytuje prohlížeč s jedním obrázkem, ovládací prvek lupy a uživatelské rozhraní pro úpravy.

Nejdřív ale musíte připojit DetailPage, aby na ni aplikace přešla, když uživatel klikne na obrázek v zobrazení galerie.

Připojení aplikace DetailPage

  1. V souboru MainPage.xaml vyhledejte GridView s názvem ImageGridView. Pokud chcete nastavit, aby položky byly kliknutelné, nastavte IsItemClickEnabled na True a přidejte obslužnou rutinu události ItemClick.

    Návod

    Pokud místo kopírování a vkládání zadáte následující změnu, zobrazí se automaticky otevírané okno IntelliSense s textem "<nová obslužná rutina události>". Pokud stisknete klávesu Tab, hodnota se vyplní výchozím jménem obslužné funkce a automaticky vytvoří základní strukturu metody uvedené v dalším kroku. Poté můžete stisknutím klávesy F12 přejít na metodu v části code-behind.

    Před:

    <GridView x:Name="ImageGridView">

    Po:

    <GridView x:Name="ImageGridView"
          IsItemClickEnabled="True"
          ItemClick="ImageGridView_ItemClick">

    Poznámka:

    Místo výrazu x:Bind zde používáme standardní obslužnou rutinu události. Je to proto, že potřebujeme vidět data události, jak je znázorněno dále.

  2. V MainPage.xaml.cs přidejte obslužnou rutinu události (nebo ji doplňte, pokud jste použili tip z posledního kroku).

    private void ImageGridView_ItemClick(object sender, ItemClickEventArgs e)
{
    this.Frame.Navigate(typeof(DetailPage), e.ClickedItem);
}

    Tato metoda jednoduše přejde na stránku podrobností a předá kliknutou položku, což je ImageFileInfo objekt používaný DetailPage.OnNavigatedTo pro inicializaci stránky. Tuto metodu nebudete muset v tomto kurzu implementovat, ale můžete se podívat, co to dělá.

  3. (Volitelné) Odstraňte nebo okomentujte všechny ovládací prvky, které jste přidali v předchozích play-bodech, které fungují s aktuálně vybraným obrázkem. Když je necháte být, ničemu to neublíží, ale je teď mnohem těžší vybrat obrázek, aniž byste museli přejít na stránku podrobností.

Teď, když jste obě stránky propojili, spusťte aplikaci a prohlédněte si ji. Všechno funguje s výjimkou ovládacích prvků v podokně pro úpravy, které nereagují při pokusu o změnu hodnot.

Jak vidíte, textové pole nadpisu zobrazuje název a umožňuje zadávat změny. Abyste změny mohli potvrdit, musíte změnit fokus na jiný ovládací prvek, ale název v levém horním rohu obrazovky se ještě neaktualizuje.

Všechny ovládací prvky jsou již vázány pomocí prostých x:Bind výrazů, které jsme probrali v části 1. Pokud si vzpomenete, znamená to, že jsou všechny jednorázové vazby, což vysvětluje, proč se změny hodnot nezaregistrují. Abychom to vyřešili, stačí je převést na obousměrné vazby.

Interaktivní vytváření ovládacích prvků pro úpravy

  1. V souboru DetailPage.xaml vyhledejte TextBlock s názvem TitleTextBlock a ovládací prvek RatingControl, který je za ním, a aktualizujte jejich výrazy x:Bind tak, aby zahrnovaly Mode=TwoWay.

    Před:

    <TextBlock x:Name="TitleTextBlock"
           Text="{x:Bind item.ImageTitle}"
           ... >
<muxc:RatingControl Value="{x:Bind item.ImageRating}"
                        ... >

    Po:

    <TextBlock x:Name="TitleTextBlock"
           Text="{x:Bind item.ImageTitle, Mode=TwoWay}"
           ... >
<muxc:RatingControl Value="{x:Bind item.ImageRating, Mode=TwoWay}"
                        ... >

  2. Udělejte totéž pro všechny efektové posuvníky umístěné za ovládacím prvkem hodnocení.

    <Slider Header="Exposure"    ... Value="{x:Bind item.Exposure, Mode=TwoWay}" ...
<Slider Header="Temperature" ... Value="{x:Bind item.Temperature, Mode=TwoWay}" ...
<Slider Header="Tint"        ... Value="{x:Bind item.Tint, Mode=TwoWay}" ...
<Slider Header="Contrast"    ... Value="{x:Bind item.Contrast, Mode=TwoWay}" ...
<Slider Header="Saturation"  ... Value="{x:Bind item.Saturation, Mode=TwoWay}" ...
<Slider Header="Blur"        ... Value="{x:Bind item.Blur, Mode=TwoWay}" ...

Obousměrný režim, jak můžete očekávat, znamená, že se data přesunou v obou směrech, kdykoli na obou stranách dojde ke změnám.

Stejně jako jednosměrné vazby, které jsme probírali dříve, tyto obousměrné vazby nyní aktualizují uživatelské rozhraní při každé změně vázaných vlastností díky implementaci INotifyPropertyChanged ve třídě ImageFileInfo. S obousměrnou vazbou se však hodnoty také přesunou z uživatelského rozhraní na vázané vlastnosti při každé interakci uživatele s ovládacím prvku. Na straně XAML není potřeba nic dalšího.

Spusťte aplikaci a vyzkoušejte ovládací prvky pro úpravy. Jak vidíte, když provedete změnu, ovlivní teď hodnoty obrázků a tyto změny se zachovají, když přejdete zpět na hlavní stránku.

Část 6: Formátování hodnot prostřednictvím vazby funkce

Jeden poslední problém zůstává. Když přesunete posuvníky efektu, popisky vedle nich se nezmění.

Posuvníky efektu s výchozími hodnotami popisků

Poslední částí tohoto kurzu je přidání vazeb, které formátují hodnoty posuvníku pro zobrazení.

Propojte popisky posuvníku efektů a naformátujte hodnoty pro zobrazení

  1. Vyhledejte TextBlock za posuvníkem Exposure a nahraďte hodnotu Text výrazem vazby, který je zde uvedený.

    Před:

    <Slider Header="Exposure" ... />
<TextBlock ... Text="0.00" />

    Po:

    <Slider Header="Exposure" ... />
<TextBlock ... Text="{x:Bind item.Exposure.ToString('N', culture), Mode=OneWay}" />

    Tomu se říká vazba funkce, protože vytváříte vazbu na návratovou hodnotu metody. Metoda musí být přístupná prostřednictvím kódu na pozadí stránky nebo typu x:DataType, pokud jste v šabloně dat. V tomto případě je metoda .NET ToString, která je dobře známá, přístupná prostřednictvím vlastnosti položky na stránce a pak prostřednictvím vlastnosti Exposure položky. (To ukazuje, jak se můžete propojit s metodami a vlastnostmi, které jsou hluboce vnořené do řetězu připojení.)

    Vazba funkce je ideální způsob, jak formátovat hodnoty pro zobrazení, protože můžete předávat další zdroje vazby jako argumenty metody a vazební výraz bude naslouchat změnám těchto hodnot podle očekávání v jednosměrném režimu. V tomto příkladu je argument kultura odkazem na neměnné pole implementované v kódu, ale mohlo by to být stejně snadno vlastnost, která vyvolává PropertyChanged událost. V takovém případě by všechny změny hodnoty vlastnosti způsobily, že výraz x:Bind zavolá ToString s novou hodnotou a pak aktualizuje uživatelské rozhraní s výsledkem.

  2. Proveďte totéž pro TextBlocks, které označují posuvníky ostatních efektů.

    <Slider Header="Temperature" ... />
<TextBlock ... Text="{x:Bind item.Temperature.ToString('N', culture), Mode=OneWay}" />

<Slider Header="Tint" ... />
<TextBlock ... Text="{x:Bind item.Tint.ToString('N', culture), Mode=OneWay}" />

<Slider Header="Contrast" ... />
<TextBlock ... Text="{x:Bind item.Contrast.ToString('N', culture), Mode=OneWay}" />

<Slider Header="Saturation" ... />
<TextBlock ... Text="{x:Bind item.Saturation.ToString('N', culture), Mode=OneWay}" />

<Slider Header="Blur" ... />
<TextBlock ... Text="{x:Bind item.Blur.ToString('N', culture), Mode=OneWay}" />

Když teď aplikaci spustíte, všechno funguje, včetně popisků posuvníku.

Posuvníky efektu s pracovními popisky

Rozdíly mezi Binding a x:Bind

Při vytváření datových vazeb v XAML ve vašich aplikacích pro UWP si můžete vybrat mezi Binding a x:Bind. Tady jsou hlavní rozdíly:

  • x:Bind: Poskytuje ověřování v době kompilace, lepší výkon a je silně typovaný. Je nejvhodnější pro scénáře, ve kterých je datová struktura známá v době kompilace.
  • Binding: Nabízí vyhodnocení za běhu a větší flexibilitu pro dynamické scénáře, například při stanovení datové struktury za běhu.

Scénáře, které x:Bind nepodporuje

I když x:Bind je vysoce efektivní, má v určitých scénářích omezení:

  • Dynamické datové struktury: x:Bind Nelze použít, pokud je datová struktura určena za běhu.
  • Vazba mezi elementy: Přímé vazby mezi dvěma prvky uživatelského rozhraní nejsou podporovány x:Bind.
  • Dědičnost DataContext: Na rozdíl od Binding, x:Bind nedědí automaticky DataContext nadřazeného prvku.
  • Obousměrné vazby: x:Bind podporuje obousměrné vazby, což umožňuje změny toku z uživatelského rozhraní zpět do zdrojové vlastnosti. Aby se uživatelské rozhraní aktualizovalo při změně zdrojové vlastnosti (u jednosměrné nebo obousměrné vazby), musíte na datových objektech implementovat INotifyPropertyChanged.

Další podrobnosti a příklady najdete v následujících zdrojích informací:

Závěr

V tomto kurzu jste získali úvod do datové vazby a byly vám představeny některé z dostupných funkcí. Jedno upozornění před zakončením: ne všechno je spojitelné a někdy hodnoty, ke kterým se pokoušíte připojit, nejsou kompatibilní s vlastnostmi, které se pokoušíte svázat. V vazbě je hodně flexibility, ale v každé situaci to nebude fungovat.

Jedním z příkladů problému, který není vyřešen vazbou, je, že ovládací prvek nemá žádné vhodné vlastnosti pro vytvoření vazby, stejně jako u funkce přiblížení stránky podrobností. Tento posuvník lupy musí pracovat s ScrollViewer, který zobrazuje obrázek, ale ScrollViewer je možné aktualizovat pouze metodou ChangeView. V tomto případě používáme konvenční obslužné rutiny událostí k udržení ScrollViewer a posuvníku přiblížení synchronizovaných; podrobnosti najdete v metodách ZoomSlider_ValueChanged a MainImageScroll_ViewChanged v DetailPage.

Vazba je ale výkonný a flexibilní způsob zjednodušení kódu a oddělení logiky uživatelského rozhraní od datové logiky. To vám usnadní úpravu obou stran tohoto dělení a zároveň sníží riziko zavedení chyb na druhé straně.

Jedním z příkladů oddělení uživatelského rozhraní a dat je vlastnost ImageFileInfo.ImageTitle. Tato vlastnost (a vlastnost ImageRating) se mírně liší od vlastnosti ItemSize, kterou jste vytvořili v části 4, protože hodnota je uložena v metadatech souboru (vystavená prostřednictvím typu ImageProperties) místo v poli. Kromě toho ImageTitle vrátí hodnotu ImageName (nastavenou na název souboru), pokud v metadatech souboru neexistuje žádný název.

public string ImageTitle
{
    get => String.IsNullOrEmpty(ImageProperties.Title) ? ImageName : ImageProperties.Title;
    set
    {
        if (ImageProperties.Title != value)
        {
            ImageProperties.Title = value;
            var ignoreResult = ImageProperties.SavePropertiesAsync();
            OnPropertyChanged();
        }
    }
}

Jak vidíte, funkce setter aktualizuje vlastnost ImageProperties.Title a potom volá SavePropertiesAsync, aby se nová hodnota zapisuje do souboru. (Toto je asynchronní metoda, ale nemůžeme použít klíčové slovo await ve vlastnosti – a nechcete, protože metody getters a setter by se měly dokončit okamžitě. Místo toho byste volali metodu a ignorovali Task objekt, který vrací.)

Pokračovat dále

Teď, když jste dokončili toto cvičení, máte dostatečné znalosti, abyste mohli sami řešit problém.

Jak jste si možná všimli, když změníte úroveň přiblížení na stránce podrobností, obnoví se automaticky, když přejdete zpět, a pak znovu vyberete stejný obrázek. Můžete zjistit, jak zachovat a obnovit úroveň přiblížení jednotlivých obrázků? Hodně zdaru!

V tomto kurzu byste měli mít všechny informace, které potřebujete, ale pokud potřebujete další pokyny, dokumenty k datovým vazbám jsou dostupné jen jedním kliknutím. Začněte tady:

  • Last updated on