Část 2: Přidání ovládacího prvku InkCanvas pro UPW pomocí ostrůvků XAML

Toto je druhá část kurzu, která ukazuje, jak modernizovat ukázkovou desktopovou aplikaci WPF s názvem Contoso Expenses. Přehled kurzu, předpokladů a pokynů ke stažení ukázkové aplikace najdete v tématu Kurz: Modernizace aplikace WPF. Tento článek předpokládá, že jste už dokončili část 1.

Ve fiktivním scénáři tohoto kurzu chce vývojový tým Společnosti Contoso do aplikace Contoso Expenses přidat podporu digitálních podpisů. Ovládací prvek UWP InkCanvas je skvělou volbou pro tento scénář, protože podporuje digitální inkoust a funkce založené na umělé inteligenci, jako je schopnost rozpoznat text a obrazce. K tomu použijete ovládací prvek UWP InkCanvas zabalený v sadě Windows Community Toolkit. Tento ovládací prvek zabalí rozhraní a funkce ovládacího prvku UWP InkCanvas pro použití v aplikaci WPF. Další podrobnosti o zabalených ovládacích prvcích UPW najdete v tématu Hostovat ovládací prvky UPW XAML v desktopových aplikacích (ostrovy XAML).

Konfigurace projektu pro použití ostrůvků XAML

Než budete moct do aplikace Contoso Expenses přidat ovládací prvek InkCanvas , musíte nejprve nakonfigurovat projekt tak, aby podporoval UWP XAML Islands.

1. V sadě Visual Studio 2019 klikněte pravým tlačítkem na projekt ContosoExpenses.Core v Průzkumníku řešení a zvolte Spravovat balíčky NuGet.

   

2. V okně Správce balíčků NuGet klikněte na Procházet. Vyhledejte Microsoft.Toolkit.Wpf.UI.Controls balíček a nainstalujte verzi 6.0.0 nebo novější.

   Poznámka:

   Tento balíček obsahuje veškerou potřebnou infrastrukturu pro hostování souborů XAML UPW v aplikaci WPF, včetně InkCanvas zabaleného ovládacího prvku UPW. Podobný balíček s názvem Microsoft.Toolkit.Forms.UI.Controls je k dispozici pro aplikace Windows Forms.

3. Klikněte pravým tlačítkem na projekt ContosoExpenses.Core v Průzkumníku řešení a zvolte Přidat –> Nová položka.

4. Vyberte soubor manifestu aplikace, pojmenujte ho app.manifesta klikněte na Přidat. Další informace o manifestech aplikace najdete v tomto článku.

5. V souboru manifestu odkomentujte následující <supportedOS> prvek pro Windows 10.

   <!-- Windows 10 -->
   <supportedOS Id="{8e0f7a12-bfb3-4fe8-b9a5-48fd50a15a9a}" />
   

6. V souboru manifestu vyhledejte následující komentář <application> elementu.

   <!--
   <application xmlns="urn:schemas-microsoft-com:asm.v3">
     <windowsSettings>
       <dpiAware xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">true</dpiAware>
     </windowsSettings>
   </application>
   -->
   

7. Odstraňte tento oddíl a nahraďte ho následujícím kódem XML. Tím se aplikace nakonfiguruje tak, aby věděla DPI a lépe zvládla různé faktory škálování podporované systémem Windows 10.

   <application xmlns="urn:schemas-microsoft-com:asm.v3">
     <windowsSettings>
         <dpiAware xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">true/PM</dpiAware>
         <dpiAwareness xmlns="http://schemas.microsoft.com/SMI/2016/WindowsSettings">PerMonitorV2, PerMonitor</dpiAwareness>
     </windowsSettings>
   </application>
   

8. Uložte a zavřete app.manifest soubor.

9. V Průzkumníku řešení klikněte pravým tlačítkem na projekt ContosoExpenses.Core a zvolte Vlastnosti.

10. V části Zdroje na kartě Aplikace se ujistěte, že rozevírací seznam Manifest je nastaven na app.manifest.

    

11. Uložte změny vlastností projektu.

Přidání ovládacího prvku InkCanvas do aplikace

Teď, když jste nakonfigurovali projekt k použití UWP XAML Islands, jste připraveni přidat do aplikace zabalený ovládací prvek UWP InkCanvas.

1. V Průzkumníku řešenírozbalte složku Zobrazení projektu ContosoExpenses.Core a poklikejte na soubor ExpenseDetail.xaml.

2. Do elementu Window v horní části souboru XAML přidejte následující atribut. Odkazuje na obor názvů XAML pro InkCanvas zabaleného ovládacího prvku UPW.

   xmlns:toolkit="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls"
   

   Po přidání tohoto atributu by teď měl element Window vypadat takto.

   <Window x:Class="ContosoExpenses.Views.ExpenseDetail"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           xmlns:toolkit="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls"
           xmlns:converters="clr-namespace:ContosoExpenses.Converters"
           DataContext="{Binding Source={StaticResource ViewModelLocator}, Path=ExpensesDetailViewModel}"
           xmlns:local="clr-namespace:ContosoExpenses"
           mc:Ignorable="d"
           Title="Expense Detail" Height="500" Width="800"
           Background="{StaticResource HorizontalBackground}">
   

3. V souboru ExpenseDetail.xaml vyhledejte uzavírací </Grid> značku, která bezprostředně předchází <!-- Chart --> komentáři. Přidejte následující kód XAML těsně před uzavírací značku </Grid>. Tento XAML přidá ovládací prvek InkCanvas (s předponou toolkit, což je klíčové slovo, které jste dříve definovali jako obor názvů) a jednoduchý TextBlock, který slouží jako záhlaví ovládacího prvku.

   <TextBlock Text="Signature:" FontSize="16" FontWeight="Bold" Grid.Row="5" />
   
   <toolkit:InkCanvas x:Name="Signature" Grid.Row="6" />
   

4. Uložte soubor ExpenseDetail.xaml .

5. Stiskněte klávesu F5 pro spuštění aplikace v ladicím nástroji.

6. Vyberte zaměstnance ze seznamu a pak zvolte jednu z dostupných výdajů. Všimněte si, že stránka podrobností výdajů obsahuje místo pro ovládací prvek InkCanvas .

   

   Pokud máte zařízení, které podporuje digitální pero, jako je Surface, a používáte toto cvičení na fyzickém počítači, pokračujte a zkuste ho použít. Na obrazovce se objeví digitální inkoust. Pokud ale nemáte zařízení podporující pero a pokusíte se podepsat myší, nic se nestane. K tomu dochází, protože ovládací prvek InkCanvas je ve výchozím nastavení povolený jenom pro digitální pera. Toto chování ale můžeme změnit.

7. Zavřete aplikaci a poklikejte na soubor ExpenseDetail.xaml.cs ve složce Views projektu ContosoExpenses.Core.

8. Do horní části třídy přidejte následující deklaraci oboru názvů:

   using Microsoft.Toolkit.Win32.UI.Controls.Interop.WinRT;
   

9. Vyhledejte konstruktor ExpenseDetail().

10. Za metodu InitializeComponent() přidejte následující řádek kódu a uložte soubor kódu.

    Signature.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Pen;
    

    Pomocí objektu InkPresenter můžete přizpůsobit výchozí prostředí rukopisu. Tento kód používá vlastnost InputDeviceTypes ke zpracování vstupu z myši i pera.

11. Opět stiskněte klávesu F5, abyste znovu sestavili a spustili aplikaci v ladicím programu. Vyberte zaměstnance ze seznamu a pak zvolte jednu z dostupných výdajů.

12. Zkuste teď nakreslit něco v podpisovém prostoru myší. Tentokrát se na obrazovce zobrazí inkoust.

    

Další kroky

V tomto bodě tutoriálu jste úspěšně přidali ovládací prvek InkCanvas do aplikace Contoso Expenses ve formátu UWP. Nyní jste připraveni na část 3: Přidejte ovládací prvek CalendarView UWP pomocí XAML Islands.