Ontwerptijdgegevens gebruiken met de XAML Designer in Visual Studio
Sommige indelingen zijn moeilijk te visualiseren zonder gegevens. In dit document bespreken we een van de benaderingen die ontwikkelaars, die aan desktopprojecten werken, kunnen gebruiken om gegevens te simuleren in de XAML-ontwerper. Deze methode wordt uitgevoerd met behulp van de bestaande negeerbare naamruimte 'd:'. Met deze methode kunt u snel ontwerptijdgegevens toevoegen aan uw pagina's of besturingselementen zonder dat u een volledig viewModel hoeft te maken of gewoon kunt testen hoe een eigenschapswijziging van invloed kan zijn op uw toepassing zonder dat u zich zorgen hoeft te maken dat deze wijzigingen van invloed zijn op uw release-builds. Alle d: gegevens worden alleen gebruikt door de XAML Designer en er worden geen negeerbare naamruimtewaarden gecompileerd in de toepassing.
Notitie
Als u Xamarin.Forms gebruikt, raadpleegt u Xamarin.Forms Design Time Data
Ontwerptijdgegevens zijn gesimuleerde gegevens die u instelt om uw besturingselementen gemakkelijker te visualiseren in de XAML Designer. Als u wilt beginnen, voegt u de volgende coderegels toe aan de koptekst van uw XAML-document als deze nog niet aanwezig zijn:
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Nadat u de naamruimten hebt toegevoegd, kunt u d: vóór een kenmerk of besturingselement plaatsen om deze alleen weer te geven in de XAML Designer, maar niet tijdens runtime.
U kunt bijvoorbeeld tekst toevoegen aan een TextBlock waaraan meestal gegevens zijn gebonden.
<TextBlock Text="{Binding Name}" d:Text="Name!" />
In dit voorbeeld, zonder d:Text, zou de XAML Designer niets weergeven voor de TextBlock. In plaats daarvan wordt 'Name!' weergegeven waar de TextBlock tijdens runtime echte gegevens bevat.
U kunt d: gebruiken met kenmerken voor elk UWP- of WPF .NET Core-besturingselement, zoals kleuren, tekengrootten en afstand. U kunt het zelfs toevoegen aan het besturingselement zelf.
<d:Button Content="Design Time Button" />
In dit voorbeeld wordt de knop alleen weergegeven tijdens het ontwerp. Gebruik deze methode om een tijdelijke aanduiding in te stellen voor een aangepast besturingselement of om verschillende besturingselementen uit te proberen. Alle d: kenmerken en besturingselementen worden tijdens runtime genegeerd.
U kunt een bron tijdens ontwerptijd instellen voor afbeeldingen die aan de pagina zijn gebonden of dynamisch worden geladen. Voeg de afbeelding toe die u wilt weergeven in de XAML Designer aan uw project. U kunt die afbeelding vervolgens weergeven in de XAML Designer tijdens het ontwerp:
<Image Source={Binding ProfilePicture} d:Source="DesignTimePicture.jpg" />
Notitie
De afbeelding in dit voorbeeld moet aanwezig zijn in de oplossing.
ListViews zijn een populaire manier om gegevens weer te geven in uw bureaublad-app. Ze zijn echter moeilijk te visualiseren zonder gegevens. U kunt deze functie gebruiken om een inline ontwerpgegevensbron of gegevensitems te maken. In de XAML Designer wordt weergegeven wat er in die matrix in uw ListView staat op het moment van ontwerp.
Als u het type system:String wilt gebruiken, moet u xmlns:system="clr-namespace:System;assembly=mscorlib opnemen in de XAML-header.
<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>
In dit vorige voorbeeld ziet u een ListView met drie TextBlocks in de XAML Designer.
U kunt ook een matrix met gegevensobjecten maken. Bijvoorbeeld, openbare eigenschappen van een City gegevensobject kunnen worden samengesteld als ontwerptijd gegevens.
namespace Cities.Models
{
public class City
{
public string Name { get; set; }
public string Country { get; set; }
}
}
Als u de klasse in XAML wilt gebruiken, moet u de naamruimte in het hoofdknooppunt importeren.
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>
Het voordeel hier is dat u uw besturingselementen kunt binden aan een statische ontwerpversie van uw model.
x:Array wordt niet ondersteund in UWP. Daarom kunnen we in plaats daarvan <d:ListView.Items> gebruiken. Als u het type system:String wilt gebruiken, moet u http://schemas.microsoft.com/winfx/2009/xaml opnemen in de XAML-header.
<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>
Deze functie werkt standaard alleen met platformbesturingselementen en -eigenschappen. In deze sectie gaan we verder met de stappen die nodig zijn om u in staat te stellen uw eigen aangepaste besturingselementen te gebruiken als ontwerptijdbesturingselementen, een nieuwe mogelijkheid die beschikbaar is voor klanten die Visual Studio 2019 versie 16.8 of hoger gebruiken. Er zijn drie vereisten om dit in te schakelen:
Een aangepaste XMLNS-naamruimte
xmlns:myControls="http://MyCustomControls"Een ontwerptijdversie van uw naamruimte. Dit kan worden bereikt door gewoon aan het einde /design toe te voegen.
xmlns:myDesignTimeControls="http://MyCustomControls/design"Uw design-time-voorvoegsel toevoegen aan mc:Ignorable
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d myDesignTimeControls"
Nadat u al deze stappen hebt uitgevoerd, kunt u uw myDesignTimeControls voorvoegsel gebruiken om uw ontwerptijd controles te maken.
<myDesignTimeControls:MyButton>I am a design time Button</myDesignTimeControls:MyButton>
Als u een aangepaste XMLNS-naamruimte in WPF .NET Core wilt maken, moet u uw aangepaste XML-naamruimte toewijzen aan de CLR-naamruimte waarin uw besturingselementen zich bevinden. U kunt dit doen door het kenmerk XmlnsDefinition assemblyniveau toe te voegen aan uw AssemblyInfo.cs bestand. Het bestand bevindt zich in de hoofdhiërarchie van uw project.
[assembly: XmlnsDefinition("http://MyCustomControls", "MyViews.MyButtons")]
Als u een probleem ondervindt dat niet in deze sectie wordt vermeld, laat het ons dan weten met behulp van het hulpprogramma Een probleem melden.
Voor ontwerptijdgegevens is Visual Studio 2019-versie 16.7 of hoger vereist.
Ondersteunt Windows-bureaubladprojecten die gericht zijn op Windows Presentation Foundation (WPF) voor .NET Core en UWP. Deze functie is ook beschikbaar voor .NET Framework in het Preview-kanaal. Als u dit wilt inschakelen, gaat u naar Tools>Options>Environment>Preview Features, selecteert u New WPF XAML Designer for .NET Framework en start u Visual Studio opnieuw.
Vanaf Visual Studio 2019 versie 16.7 werkt deze functie met alle in-the-box-besturingselementen van WPF- en UWP-frameworks. Ondersteuning voor besturingselementen van derden is nu beschikbaar in de versie 16.8.
Sluit het XAML-bestand en open het opnieuw, en schoon het project op en bouw het opnieuw.