Použití dat času návrhu v návrháři XAML v sadě Visual Studio

Článek
03/07/2025

Některá rozložení se obtížně vizualizují bez dat. V tomto dokumentu si projdeme jeden z přístupů, které můžou vývojáři pracující na desktopových projektech použít k napodobení dat v návrháři XAML. Tento přístup se provádí pomocí existujícího oboru názvů Ignorable "d:". Pomocí tohoto přístupu můžete rychle přidat návrhová data na své stránky nebo ovládací prvky, aniž byste museli vytvářet úplné napodobení ViewModelu. Můžete také otestovat, jak změna vlastnosti může ovlivnit vaši aplikaci, aniž byste se museli obávat, že tyto změny ovlivní vaše finální sestavení. Veškerá data d: používá pouze Návrhář XAML a žádné ignorovatelné hodnoty oboru názvů se nekompilují do aplikace.

Poznámka

Pokud používáte Xamarin.Forms, podívejte se na návrhová data Xamarin.Forms.

Základy dat v době návrhu

Data v době návrhu jsou napodobená daty, která nastavíte, aby se ovládací prvky snadněji vizualizovaly v Návrháři XAML. Začněte tím, že do záhlaví dokumentu XAML přidáte následující řádky kódu, pokud ještě nejsou k dispozici:

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"

Po přidání oborů názvů můžete umístit d: před libovolný atribut nebo ovládací prvek, aby se zobrazil pouze v Návrháři XAML, ale ne při běhu programu.

Můžete například přidat text do textového bloku, který má obvykle svázaná data.

<TextBlock Text="{Binding Name}" d:Text="Name!" />

V tomto příkladu bez d:Textnávrhář XAML nezobrazí nic pro TextBlock. Místo toho se zobrazí "Name!" a TextBlock bude za běhu obsahovat skutečná data.

Pro jakýkoli ovládací prvek UPW nebo WPF .NET Core můžete použít d: s atributy, jako jsou barvy, velikosti písma a mezery. Můžete ho dokonce přidat do samotného ovládacího prvku.

<d:Button Content="Design Time Button" />

V tomto příkladu se tlačítko zobrazí pouze v době návrhu. Tato metoda slouží k vložení zástupného symbolu pro vlastní ovládací prvek nebo k vyzkoušení různých ovládacích prvků. Všechny atributy a ovládací prvky d: budou během běhu ignorovány.

Náhled obrázků v době návrhu

Můžete nastavit zdroj určený v době návrhu pro obrázky, které jsou spojeny se stránkou nebo načteny dynamicky. Přidejte do projektu obrázek, který chcete zobrazit v Návrháři XAML. Tento obrázek pak můžete zobrazit v Návrháři XAML v době návrhu:

<Image Source={Binding ProfilePicture} d:Source="DesignTimePicture.jpg" />

Poznámka

Obrázek v tomto příkladu musí existovat v řešení.

Data v době návrhu pro ListViews

ListViews představují oblíbený způsob zobrazení dat v desktopové aplikaci. Je ale obtížné je vizualizovat bez jakýchkoli dat. Tuto funkci můžete použít k vytvoření řádkového datového zdroje nebo položek během návrhu. Návrhář XAML zobrazí, co je v daném poli v objektu ListView v době návrhu.

Příklad WPF .NET Core

Pokud chcete použít typ system:String, nezapomeňte do hlavičky XAML zahrnout xmlns:system="clr-namespace:System;assembly=mscorlib.

<StackPanel>
    <ListView ItemsSource="{Binding Items}">
        <d:ListView.ItemsSource>
            <x:Array Type="{x:Type system:String}">
                <system:String>Item One</system:String>
                <system:String>Item Two</system:String>
                <system:String>Item Three</system:String>
            </x:Array>
        </d:ListView.ItemsSource>
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding ItemName}" d:Text="{Binding .}" />
        </DataTemplate>
    </ListView.ItemTemplate>
   </ListView>
</StackPanel>

Tento předchozí příklad ukazuje ListView se třemi textovými bloky v návrháři XAML.

Můžete také vytvořit pole datových objektů. Veřejné vlastnosti City datového objektu lze například vytvořit jako data v době návrhu.

namespace Cities.Models
{
    public class City
    {
        public string Name { get; set; }
        public string Country { get; set; }
    }
}

Abyste mohli použít třídu v XAML, musíte v kořenovém uzlu importovat obor názvů.

xmlns:models="clr-namespace:Cities.Models"

<StackPanel>
    <ListView ItemsSource="{Binding Items}">
        <d:ListView.ItemsSource>
            <x:Array Type="{x:Type models:City}">
                <models:City Name="Seattle" Country="United States"/>
                <models:City Name="London" Country="United Kingdom"/>
                <models:City Name="Panama City" Country="Panama"/>
            </x:Array>
        </d:ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate>
                 <StackPanel Orientation="Horizontal" >
                    <TextBlock Text="{Binding Name}" Margin="0,0,5,0" />
                    <TextBlock Text="{Binding Country}" />
                 </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackPanel>

Výhodou je, že ovládací prvky můžete svázat se statickou verzí modelu v době návrhu.

Příklad UWP

X:Array není podporováno v UPW. Proto můžeme místo toho použít <d:ListView.Items>. Pokud chcete použít typ system:String, nezapomeňte do hlavičky XAML zahrnout http://schemas.microsoft.com/winfx/2009/xaml.

    <StackPanel>
        <ListView>
            <d:ListView.Items>
                <system:String>Item One</system:String>
                <system:String>Item Two</system:String>
                <system:String>Item Three</system:String>
            </d:ListView.Items>
        </ListView>
    </StackPanel>

Použití dat v době návrhu s vlastními typy a vlastnostmi

Tato funkce ve výchozím nastavení funguje jenom s ovládacími prvky a vlastnostmi platformy. V této části si projdeme kroky potřebné k tomu, abyste jako ovládací prvky v době návrhu mohli používat vlastní ovládací prvky, což je nová funkce dostupná zákazníkům, kteří používají Visual Studio 2019 verze 16.8 nebo novější. Existují tři požadavky, které je potřeba povolit:

Vlastní názvový prostor xmlns

xmlns:myControls="http://MyCustomControls"

Návrhová verze vašeho prostoru jmen Toho lze dosáhnout jednoduchým připojením /design na konci.
```
xmlns:myDesignTimeControls="http://MyCustomControls/design"
```

Přidání návrhové předpony k mc:Ignorable

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d myDesignTimeControls"

Po provedení všech těchto kroků můžete pomocí předpony myDesignTimeControls vytvořit ovládací prvky v době návrhu.

<myDesignTimeControls:MyButton>I am a design time Button</myDesignTimeControls:MyButton>

Vytvoření vlastního oboru názvů xmlns

Pokud chcete vytvořit vlastní obor názvů xmlns ve WPF .NET Core, musíte vlastní obor názvů XML namapovat na obor názvů CLR, ve které jsou vaše ovládací prvky. Můžete to udělat tak, že do souboru AssemblyInfo.cs přidáte atribut na úrovni sestavení XmlnsDefinition. Soubor se nachází v kořenové hierarchii projektu.

[assembly: XmlnsDefinition("http://MyCustomControls", "MyViews.MyButtons")]

Řešení problémů

Pokud narazíte na problém, který není uvedený v této části, dejte nám vědět pomocí nástroje Nahlásit problém.

Požadavky

Data v době návrhu vyžadují visual Studio 2019 verze 16.7 nebo novější.
Podporuje desktopové projekty Windows, které cílí na Windows Presentation Foundation (WPF) pro .NET Core a UPW. Tato funkce je také k dispozici pro rozhraní .NET Framework v kanálu Preview . Pokud ho chcete povolit, přejděte na Nástroje>Možnosti>Prostředí>funkce Preview, vyberte Nový návrhář WPF XAML pro rozhraní .NET Framework a restartujte Visual Studio.
Od sady Visual Studio 2019 verze 16.7 tato funkce funguje se všemi zabudovanými ovládacími prvky z frameworků WPF a UWP. Podpora ovládacích prvků třetích stran je nyní k dispozici ve verzi 16.8.

Návrhář XAML přestal fungovat.

Zkuste zavřít a znovu otevřít soubor XAML a vyčistit a znovu sestavit projekt.

Sdílet prostřednictvím