Uyarlamalı Kartlar Tasarımcısı kullanarak pencere öğesi şablonu oluşturun.

Uyarı

Bazı bilgiler, ticari olarak piyasaya sürülmeden önce önemli ölçüde değiştirilebilen, önceden yayımlanan ürünle ilgilidir. Microsoft, burada sağlanan bilgilerle ilgili olarak açık veya zımni hiçbir garanti vermez.

Önemli

Bu konu başlığında açıklanan özellik, derleme 25217'den itibaren Windows Dev Channel önizleme derlemelerinde kullanılabilir. Windows önizleme derlemeleri hakkında bilgi için bkz. Windows 10 Insider Preview.

Windows Pencere Öğeleri için kullanıcı arabirimi ve etkileşim, Uyarlamalı Kartlar kullanılarak uygulanır. Her pencere öğesi bir görsel şablon ve isteğe bağlı olarak Uyarlamalı Kartlar şemasına uygun JSON belgeleri kullanılarak tanımlanan bir veri şablonu sağlar. Bu makale, basit bir pencere öğesi şablonu oluşturma adımlarını gösterir.

Sayım aracı

Bu makaledeki örnek, bir tamsayı değeri görüntüleyen ve kullanıcının pencere öğesinin kullanıcı arabirimindeki bir düğmeye tıklayarak değeri artırmasına olanak tanıyan basit bir sayma pencere öğesidir. Bu örnek şablon, kullanıcı arabirimini veri bağlamını temel alarak otomatik olarak güncelleştirmek için veri bağlamayı kullanır.

Uygulamaların pencere öğesi şablonunu ve/veya verilerini oluşturup güncelleştirmek ve bunları pencere öğesi konağına geçirmek için bir pencere öğesi sağlayıcısı uygulaması gerekir. Win32 uygulamasında pencere öğesi sağlayıcısı uygulama makalesi, aşağıdaki adımlarda oluşturacağımız sayım pencere öğesi için pencere öğesi sağlayıcısını uygulamaya yönelik adım adım yönergeler sağlar.

Uyarlamalı Kartlar Tasarımcısı

Uyarlamalı Kartlar Designer, Uyarlamalı Kartlar için JSON şablonları oluşturmayı kolaylaştıran çevrimiçi bir etkileşimli araçtır. Tasarımcıyı kullanarak, pencere öğesi şablonunuzu oluştururken işlenen görselleri ve veri bağlama davranışını gerçek zamanlı olarak görebilirsiniz. Bu kılavuzdaki tüm adımlar için kullanılacak olan tasarımcıyı açmak için bağlantıyı izleyin.

Önceden ayarlanmış bir şablondan boş şablon oluşturma

Sayfanın üst kısmındaki Konak uygulamasını seç açılır listesinden Widget Panosu'nu seçin. Bu işlem, Uyarlamalı Kartın kapsayıcı boyutunu pencere öğeleri için desteklenen bir boyuta sahip olacak şekilde ayarlar. Pencere öğelerinin küçük, orta ve büyük boyutları desteklediğini unutmayın. Varsayılan şablon ön ayarının boyutu küçük bir pencere öğesi için doğru boyuttadır. İçeriğin kenarlıkları taşması durumunda endişelenmeyin çünkü bunu pencere öğesinin içine sığacak şekilde tasarlanmış içerikle değiştireceğiz.

Sayfanın en altında üç metin düzenleyicisi vardır. Kart Yükü Düzenleyicisi etiketli olan, pencere öğenizin kullanıcı arabiriminin JSON tanımını içerir. Örnek Veri Düzenleyicisi etiketli düzenleyici, pencere öğeniz için isteğe bağlı bir veri bağlamı tanımlayan JSON içerir. Veri bağlamı, pencere öğesi işlendiğinde Uyarlamalı Kart'a dinamik olarak bağlanır. Uyarlamalı Kartlar veri bağlama hakkında daha fazla bilgi için bkz. Uyarlamalı Kartlar Şablon Dili.

Üçüncü metin düzenleyicisi Örnek Konak Veri Düzenleyicisi olarak etiketlenmiştir. Bu düzenleyicinin sayfadaki diğer iki düzenleyiciden daha aşağı daraltılabileceğini unutmayın. Öyleyse, düzenleyiciyi genişletmek için + öğesine tıklayın. Widget konak uygulamaları, geçerli özellik değerlerine bağlı olarak farklı içerikleri dinamik olarak görüntülemek amacıyla widget şablonunuzda kullanabileceğiniz konak özelliklerini belirtebilir. Pencere Öğeleri Panosu aşağıdaki ana bilgisayar özelliklerini destekler.

Mülkiyet	Değer	Açıklama
host.widgetSize	"küçük", "orta" veya "büyük"	Sabitlenmiş pencere öğesinin boyutu.
host.hostTheme	"açık" veya "koyu"	Araçlar Panosu'nun görüntülendiği cihazdaki mevcut tema.
host.isSettingsPayload	doğru veya yanlış	Bu değer doğru olduğunda, kullanıcı pencere öğesi bağlam menüsündeki Pencere öğesini özelleştir düğmesine tıklamıştır. Özelleştirme ayarları kullanıcı arabirimi öğelerini görüntülemek için bu özellik değerini kullanabilirsiniz. Bu, pencere öğesi sağlayıcısı uygulamasında JSON yükünü değiştirmek için IWidgetProvider2.OnCustomizationRequested kullanmanın alternatif bir yöntemidir. Daha fazla bilgi için bkz. Widget özelleştirmesinin uygulanması.
host.isHeaderSupported	doğru veya yanlış	Bu değer true olduğunda üst bilgi özelleştirmesi desteklenir. Daha fazla bilgi için bkz. isHeaderSupported.
host.isHeader	doğru veya yanlış	Bu değer doğru olduğunda, sunucu özellikle pencere öğesi üst bilgisinin işlenmesi için bir yük talep eder.
host.isWebSupported	doğru veya yanlış	Bu değer false olduğunda, sunucu şu anda bir pencere öğesinin web içeriğini yüklemeyi desteklemez. Bu durumda, web pencere öğeleri pencere öğesi sağlayıcısı tarafından sağlanan geri dönüş JSON yükünü görüntüler, ancak bu değer içeriği daha fazla özelleştirmek için kullanılabilir. Daha fazla bilgi için bkz . Web pencere öğesi sağlayıcıları
host.isUserContextAuthenticated	doğru veya yanlış	Bu değer false olduğunda, desteklenen tek eylem Action.OpenUrl'dir. IsUserContextAuthenticated değeri, etkileşim sınırlamaları göz önünde bulundurularak pencere öğesi içeriğini uygun şekilde ayarlamak için kullanılabilir.

Sayfanın üst kısmındaki Konak uygulamasını seçin açılan listesinin yanındaki Kapsayıcı boyutu ve Tema açılan listesi, düzenleyicide örnek ana bilgisayar JSON'unu el ile düzenlemeden bu özellikleri ayarlamanıza olanak sağlar.

Yeni kart oluşturma

Sayfanın sol üst köşesinde Yeni kart'a tıklayın. Oluştur iletişim kutusunda Boş Kart'ı seçin. Artık boş bir Uyarlamalı Kart görmeniz gerekir. Örnek veri düzenleyicisindeki JSON belgesinin boş olduğunu da fark edeceksiniz.

Oluşturacağımız sayma pencere öğesi çok basittir, yalnızca 4 TextBlock öğesinden ve pencere öğesinin düğmesini tanımlayan Action.Execute türünde bir eylemden oluşur.

TextBlock öğeleri ekleme

Dört TextBlock öğesini sayfanın sol tarafındaki Kart öğeleri bölmesinden önizleme bölmesindeki boş uyarlamalı karta sürükleyerek ekleyin. Bu noktada pencere öğesi önizlemesi aşağıdaki görüntü gibi görünmelidir. İçerik yeniden pencere öğesi kenarlıklarının dışına taşıyor, ancak bu sorun aşağıdaki adımlarda düzeltilecektir.

Üzerinde çalışılan uyarlamalı bir kart. Yeni TextBlock metnini içeren dört satırlık bir widget gösterir. Dört metin satırı, widget'ın alt kenarını taşır.

Koşullu düzen uygulama

Kart Yükü Düzenleyicisi, eklediğimiz TextBlock öğelerini yansıtacak şekilde güncelleştirildi. Gövde nesnesi için JSON dizesini aşağıdakilerle değiştirin:

"body": [
    {
        "type": "TextBlock",
        "text": "You have clicked the button ${count} times"
    },
    {
        "type": "TextBlock",
        "text": "Rendering only if medium",
        "$when": "${$host.widgetSize==\"medium\"}"
    },
    {
        "type": "TextBlock",
        "text": "Rendering only if small",
        "$when": "${$host.widgetSize==\"small\"}"
    },
    {
        "type": "TextBlock",
        "text": "Rendering only if large",
        "$when": "${$host.widgetSize==\"large\"}"
    }
]

Uyarlamalı Kartlar Şablon Dili'nde $when özelliği, ilişkili değer true olarak değerlendirildiğinde içeren öğenin görüntüleneceğini belirtir. Değer false olarak değerlendirilirse, içeren öğe görüntülenmez. Örneğimizdeki gövde öğesinde, özelliğin değerine bağlı olarak üç TextBlock öğesinden biri gösterilir ve diğer ikisi gizlenir $host.widgetSize . Uyarlamalı Kartlar'da desteklenen koşullu ifadeler hakkında daha fazla bilgi için bkz. $when ile Koşullu Yerleşim.

Şimdi önizleme aşağıdaki görüntü gibi görünmelidir:

Koşullu deyimlerin önizlemeye yansıtılmadığını unutmayın. Bunun nedeni, tasarımcının pencere öğesi konağının davranışını simüle etmemesidir. Benzetimi başlatmak için sayfanın üst kısmındaki Önizleme modu düğmesine tıklayın. Pencere öğesi önizlemesi artık aşağıdaki görüntüye benzer:

Kapsayıcı boyutu açılan listesinden "Orta" öğesini seçin ve önizlemenin yalnızca orta büyüklükteki TextBlock'u gösterecek şekilde geçiş yaptığına dikkat edin. Önizlemedeki kapsayıcının boyutu da değişir ve kullanıcı arabiriminizin desteklenen her boyut için pencere öğesi kapsayıcısına sığdığından emin olmak için önizlemeyi nasıl kullanabileceğinizi gösterir.

Veri bağlamına bağla

Örnek pencere öğemiz "count" adlı özel durum özelliğini kullanacaktır. Geçerli şablonda, ilk TextBlock değerinin değişken başvurusu $countiçerdiğini görebilirsiniz. Pencere öğesi Pencere Öğeleri Panosu'nda çalışırken, pencere öğesi sağlayıcısı veri yükünü bir araya getirmekten ve pencere öğesi konağına geçirmekten sorumludur. Tasarım zamanında Örnek Veri Düzenleyicisi'ni kullanarak veri yükünüzün prototipini oluşturabilir ve farklı değerlerin pencere öğesinizin görünümünü nasıl etkilediğini görebilirsiniz. Boş veri yükünü aşağıdaki JSON ile değiştirin.

{"count": "2"}

Önizlemenin artık count özelliği için belirtilen değeri ilk TextBlock metnine eklediğini unutmayın.

Düğme ekle

Sonraki adım pencere öğesimize bir düğme eklemektir. Widget ana bilgisayarında, kullanıcı düğmeye tıkladığında ana bilgisayar pencere öğesi sağlayıcısına bir istekte bulunur. Bu örnekte pencere öğesi sağlayıcısı sayım değerini artırır ve güncelleştirilmiş bir veri yükü döndürür. Bu işlem bir pencere öğesi sağlayıcısı gerektirdiğinden, bu davranışı Uyarlamalı Kartlar Tasarımcısı'nda görüntüleyemezsiniz, ancak kullanıcı arabiriminizdeki düğmenizin düzenini ayarlamak için tasarımcıyı kullanmaya devam edebilirsiniz.

Uyarlamalı Kartlar ile etkileşimli öğeler action öğeleriyle tanımlanır. Aşağıdaki JSON bloğunu doğrudan kart yükü düzenleyicisindeki gövde öğesinin arkasına ekleyin. Gövde öğesinin kapatma köşeli ayracından (]) sonra virgül eklediğinizden emin olun; aksi takdirde tasarımcı biçimlendirme hatası bildirecektir.

,
"actions": [                                                      
    {                                                               
        "type": "Action.Execute",                               
        "title": "Increment",                                   
        "verb": "inc"                                           
    }                                                               
]

Bu JSON dizesinde type özelliği, temsil edilen eylem türünü belirtir. Pencere öğeleri yalnızca "Action.Execute" eylem türünü destekler. Başlık, eylemin düğmesinde görüntülenen metni içerir. fiil özelliği, eylemle ilişkili amacı iletmek üzere araç ana bilgisayarının araç sağlayıcısına göndereceği uygulama tanımlı bir dizedir. Bir pencere öğesinin birden çok eylemi olabilir ve pencere öğesi sağlayıcı kodu, hangi eylemin gerçekleştirileceğini belirlemek için istekteki fiilin değerini denetler.

Tamamlanmış pencere öğesi şablonu

Aşağıdaki kod listesi JSON yükünün son sürümünü gösterir.

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.6",
    "body": [
    {
      "type": "TextBlock",
      "text": "You have clicked the button ${count} times"
    },
    {
      "type": "TextBlock",
       "text": "Rendering Only if Small",
      "$when": "${$host.widgetSize==\"small\"}"
    },
    {
      "type": "TextBlock",
      "text": "Rendering Only if Medium",
      "$when": "${$host.widgetSize==\"medium\"}"
    },
    {
      "type": "TextBlock",
      "text": "Rendering Only if Large",
      "$when": "${$host.widgetSize==\"large\"}"
    }
    ],
   "actions": [
    {
      "type": "Action.Execute",
      "title": "Increment",
      "verb": "inc"
    }
  ]
}

Konfigürasyon yükü örneği

Aşağıdaki kod listesinde, kullanıcı Pencere öğesini özelleştir düğmesine tıkladığında farklı içeriği görüntülemek için host.isSettingsPayload özelliğini kullanan basit bir JSON yükü örneği gösterilmektedir.

{
    "type": "AdaptiveCard",
    "body": [
    {
        "type": "Container",
        "items":[
            {
                "type": "TextBlock",
                "text": "Content payload",
                "$when": "${!$host.isSettingsPayload}"
            }
        ]
    },
    {
        "type": "Container",
        "items":[
            {
                "type": "TextBlock",
                "text": "Settings payload",
                "$when": "${$host.isSettingsPayload}"
            }
        ]
    }
],
"actions": [
    {
    "type": "Action.Submit",
    "title": "Increment",
    "verb": "inc",
    "$when": "${!$host.isSettingsPayload}"
    },
    {
    "type": "Action.Submit",
    "title": "Update Setting",
    "verb": "setting",
    "$when": "${$host.isSettingsPayload}"
    }
],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.6"
}