Używanie danych czasu projektowania z projektantem XAML w programie Visual Studio

Niektóre układy są trudne do wizualizacji bez danych. W tym dokumencie zapoznamy się z jednym z podejść, które deweloperzy pracujący nad projektami komputerowymi mogą używać do pozorowania danych w projektancie XAML. Ta metoda jest wykonywana przy użyciu istniejącej przestrzeni nazw „d:”, którą można zignorować. Dzięki temu podejściu można szybko dodawać dane testowe do swoich stron lub kontrolek, bez potrzeby tworzenia pełnego, symulowanego Modelu ViewModel, lub po prostu przetestować, jak zmiana właściwości może wpłynąć na aplikację, nie obawiając się, że te zmiany wpłyną na finalne kompilacje. Wszystkie dane d: są używane tylko przez projektant XAML i żadne ignorowane wartości przestrzeni nazw nie są kompilowane do aplikacji.

Podstawy danych czasu projektowania

Dane w czasie projektowania to pozorne dane ustawione w celu ułatwienia wizualizacji kontrolek w projektancie XAML. Aby rozpocząć, dodaj następujące wiersze kodu do nagłówka dokumentu XAML, jeśli nie są jeszcze obecne:

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

Po dodaniu przestrzeni nazwowych można umieścić d: przed dowolnym atrybutem lub kontrolką, aby pokazać ją tylko w edytorze XAML, ale nie w czasie wykonywania.

Możesz na przykład dodać tekst do bloku TextBlock, który zwykle ma powiązane dane.

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

W tym przykładzie bez d:Textprojektant XAML nie wyświetli niczego dla funkcji TextBlock. Zamiast tego pokazuje się "Name!", gdzie element TextBlock będzie zawierał rzeczywiste dane podczas działania.

Można użyć d: z atrybutami dla dowolnej kontrolki platformy UWP lub WPF .NET Core, takich jak kolory, rozmiary czcionek i odstępy. Możesz nawet dodać ją do samej kontrolki.

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

W tym przykładzie przycisk jest wyświetlany tylko w czasie projektowania. Użyj tej metody, aby umieścić symbol zastępczy dla kontrolki niestandardowej lub wypróbować różne kontrolki. Wszystkie atrybuty i kontrolki d: zostaną zignorowane podczas wykonywania.

Podgląd obrazów w czasie projektowania

Można ustawić źródło podczas projektowania dla obrazów, które są związane ze stroną lub ładowane dynamicznie. Dodaj obraz, który chcesz pokazać w projektancie XAML do projektu. Następnie możesz wyświetlić ten obraz w projektancie XAML w czasie projektowania:

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

Dane dotyczące czasu projektowania elementów ListView

ListViews to popularny sposób wyświetlania danych w aplikacji desktopowej. Trudno je jednak wizualizować bez żadnych danych. Możesz użyć tej funkcji, aby utworzyć inline'owe dane w czasie projektowania jako ItemSource lub Items. Projektant XAML wyświetla zawartość tej tablicy w ListView podczas projektowania.

Przykład platformy .NET Core WPF

Aby użyć typu system:String, upewnij się, że do nagłówka XAML dołączysz 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>

W tym poprzednim przykładzie pokazano element ListView z trzema TextBlockami w Projektancie XAML.

Można również utworzyć tablicę obiektów danych. Na przykład publiczne właściwości obiektu danych City można utworzyć jako dane czasu projektowania.

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

Aby użyć klasy w języku XAML, należy zaimportować przestrzeń nazw w węźle głównym.

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>

Zaletą jest możliwość powiązania kontrolek z statyczną wersją modelu w czasie projektowania.

Przykład platformy UWP

Funkcja x:Array nie jest obsługiwana w systemie UWP. W związku z tym możemy użyć <d:ListView.Items> zamiast tego. Aby użyć typu system:String, upewnij się, że do nagłówka XAML dołączysz 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>

Używanie danych podczas projektowania z niestandardowymi typami i właściwościami

Ta funkcja domyślnie działa tylko z kontrolkami i właściwościami platformy. W tej sekcji omówimy kroki niezbędne do umożliwienia używania własnych kontrolek niestandardowych jako kontrolek czasu projektowania, nowej funkcji dostępnej dla klientów przy użyciu programu Visual Studio 2019 w wersji 16.8 lub nowszej. Aby to umożliwić, należy spełnić trzy wymagania:

• Niestandardowa przestrzeń nazw xmlns

  xmlns:myControls="http://MyCustomControls"
  

• Wersja przestrzeni nazw używana podczas projektowania. Można to osiągnąć, dołączając /design na końcu.

  xmlns:myDesignTimeControls="http://MyCustomControls/design"
  

• Dodawanie prefiksu czasu projektowania do elementu mc:Ignorable

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

Po wykonaniu wszystkich tych kroków możesz użyć prefiksu myDesignTimeControls, aby utworzyć kontrolki czasu projektowania.

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

Tworzenie niestandardowej przestrzeni nazw xmlns

Aby utworzyć niestandardową przestrzeń nazw xmlns w WPF .NET Core, musisz zamapować niestandardową przestrzeń nazw XML do przestrzeni nazw CLR, w której znajdują się kontrolki. Można to zrobić, dodając atrybut XmlnsDefinition na poziomie zestawu w pliku AssemblyInfo.cs. Plik znajduje się w hierarchii głównej projektu.

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

Rozwiązywanie problemów

Jeśli wystąpi problem, który nie znajduje się na liście w tej sekcji, poinformuj nas, korzystając z narzędzia Zgłoś problem.

Projektant XAML przestał działać

Spróbuj zamknąć i ponownie otworzyć plik XAML oraz wyczyścić i ponownie skompilować projekt.

Zobacz też

• dane czasu projektowania za pomocą programu podglądu zestawu narzędzi Xamarin.Forms
• XAML w aplikacjach WPF
• XAML w aplikacjach platformy UWP
• XAML w aplikacjach platformy Xamarin.Forms
• XAML w aplikacjach MAUI platformy .NET