Aracılığıyla paylaş

Öğretici: Windows uygulamanızda Surface Dial'ı (ve diğer tekerlek cihazlarını) destekleme

Surface Studio ile Surface Dial görüntüsü
Surface Studio ve Surface Kalemi ile Surface Dial ( Microsoft Store'da satın alınabilir).

Bu öğretici, Surface Dial gibi tekerlek cihazları tarafından desteklenen kullanıcı etkileşim deneyimlerini özelleştirme adımlarını gösterir. Her adımda ele alınan çeşitli özellikleri ve ilişkili RadialController API'lerini göstermek için GitHub'dan indirebileceğiniz örnek bir uygulamadan kod parçacıkları kullanırız (örnek koda bakın).

Aşağıdakilere odaklanıyoruz:

  • RadialController menüsünde hangi yerleşik araçların görüntüleneceğini belirtme
  • Menüye özel araç ekleme
  • Dokunsal geri bildirimleri denetleme
  • Tıklama etkileşimlerini özelleştirme
  • Döndürme etkileşimlerini özelleştirme

Bu ve diğer özellikleri uygulama hakkında daha fazla bilgi için bkz. Windows uygulamalarında Surface Dial etkileşimleri.

Giriş

Surface Dial, kullanıcıların kalem, dokunma veya fare gibi birincil giriş cihazıyla birlikte kullanıldığında daha üretken olmasına yardımcı olan ikincil bir giriş cihazıdır. İkincil giriş cihazı olarak, Dial genellikle hem sistem komutlarına hem de diğer, daha bağlamsal araçlara ve işlevlere erişim sağlamak için baskın olmayan elle kullanılır.

Dial üç temel hareketi destekler:

  • Yerleşik komut menüsünü görüntülemek için basılı tutun.
  • Bir menü öğesini vurgulamak (menü etkinse) veya uygulamadaki geçerli eylemi (menü etkin değilse) değiştirmek için döndürün.
  • Vurgulanan menü öğesini seçmek için (menü etkinse) veya uygulamadaki bir komutu (menü etkin değilse) çağırmak için tıklayın.

Önkoşullar

Cihazlarınızı ayarlama

  1. Windows cihazınızın açık olduğundan emin olun.
  2. Başlangıç'a gidin, Ayarlar>Cihazlar>Bluetooth ve diğer cihazlar'ı seçin ve Bluetooth'u açın.
  3. Pil bölmesini açmak için Surface Dial'ın alt kısmını çıkarın ve içinde iki AAA pil olduğundan emin olun.
  4. Tuş takımının alt kısmında pil sekmesi varsa, bu sekmeyi kaldırın.
  5. Bluetooth ışığı yanıp sönene kadar pillerin yanındaki küçük, yerleşik düğmesini basılı tutun.
  6. Windows cihazınıza geri dönün ve Bluetooth veya başka bir cihaz ekle'yi seçin.
  7. Cihaz ekle iletişim kutusunda Bluetooth>Surface Dial'ı seçin. Surface Dial'ınızın artık bağlanması ve Bluetooth ve diğer cihazlar ayarları sayfasındaki Fare, klavye ve kalem altındaki cihazlar listesine eklenmesi gerekir.
  8. Yerleşik menüyü görüntülemek için tuşa basıp birkaç saniye basılı tutarak Dial'ı test edin.
  9. Menü ekranınızda görüntülenmiyorsa (Dial da titreşmelidir), Bluetooth ayarlarına geri dönün, cihazı kaldırın ve cihazı yeniden bağlamayı deneyin.

Uyarı

Tekerlek cihazları Tekerlek ayarları aracılığıyla yapılandırılabilir:

  1. Başlat menüsünde Ayarlar'ı seçin.
  2. Cihazlar>Tekerleği seçin.
    Tekerlek ayarları ekranı

Artık bu öğreticiye başlamaya hazırsınız.

Örnek kodu

Bu öğretici boyunca, ele alınan kavramları ve işlevleri göstermek için örnek bir uygulama kullanırız.

GitHub'dan bu Visual Studio örneğini ve kaynak kodunu windows-appsample-get-started-radialcontroller örneğinden indirin:

  1. Yeşil Kopyala veya indir düğmesini seçin.
    Depoyu klonlama
  2. GitHub hesabınız varsa Visual Studio'da Aç'ı seçerek depoyu yerel makinenize kopyalayabilirsiniz.
  3. GitHub hesabınız yoksa veya projenin yalnızca yerel bir kopyasını istiyorsanız ZIP İndir'i seçin (en son güncelleştirmeleri indirmek için düzenli olarak yeniden denetlemeniz gerekir).

Önemli

Örnekteki kodun çoğu, yorum satırı olarak işaretlenmiştir. Bu konunun her adımını incelediğimizde, kodun çeşitli bölümlerindeki yorum satırını kaldırmanız istenir. Visual Studio'da kod satırlarını vurgulayın ve CTRL-K ve ardından CTRL-U tuşlarına basın.

Tekerlek işlevselliğini destekleyen bileşenler

Bu nesneler, Windows uygulamaları için tekerlek cihazı deneyiminin büyük bir kısmını sağlar.

Bileşen Description
RadialController sınıfı ve ilgili Surface Dial gibi bir tekerlek giriş cihazını veya aksesuarını temsil eder.
IRadialControllerConfigurationInterop / IRadialControllerInterop
Bu işlevi burada ele almuyoruz, daha fazla bilgi için Windows masaüstü örneğine bakın.		 Bir Windows uygulamasıyla birlikte çalışabilirliği etkinleştirir.

1. Adım: Örneği çalıştırma

RadialController örnek uygulamasını indirdikten sonra çalıştığını doğrulayın:

  1. Örnek projeyi Visual Studio'da açın.
  2. Çözüm Platformları açılan listesini Arm olmayan bir seçenek olarak ayarlayın.
  3. Derlemek, dağıtmak ve çalıştırmak için F5 tuşuna basın.

Uyarı

Alternatif olarak Hata Ayıklama Başlat>hata ayıklama menü öğesini veya burada gösterilen Yerel Makine Çalıştır düğmesini seçebilirsiniz: Visual Studio Derleme projesi düğmesi

Uygulama penceresi açılır ve birkaç saniye boyunca bir giriş ekranı göründükten sonra bu ilk ekranı görürsünüz.

Boş uygulama

Tamam, artık bu öğreticinin geri kalanında kullanacağımız temel Windows uygulamasına sahibiz. Aşağıdaki adımlarda RadialController işlevimizi ekleyeceğiz.

2. Adım: Temel RadialController işlevselliği

Uygulama çalışırken ve ön planda, RadialController menüsünü görüntülemek için Surface Dial'a basılı tutun.

Uygulamamız için henüz herhangi bir özelleştirme yapmadık, bu nedenle menüde varsayılan bağlamsal araçlar kümesi yer alır.

Bu görüntüler varsayılan menünün iki varyasyonunu gösterir. (Windows Masaüstü etkinken ve ön planda uygulama olmadığında yalnızca temel sistem araçları, InkToolbar mevcut olduğunda ek mürekkep oluşturma araçları ve Haritalar uygulamasını kullanırken eşleme araçları da dahil olmak üzere birçok başka araç vardır.

RadialController menüsü (varsayılan) RadialController menüsü (varsayılan medya çalan)
Varsayılan RadialController menüsü Müzikli varsayılan RadialController menüsü

Şimdi bazı temel özelleştirmelerle başlayacağız.

3. Adım: Tekerlek girişi için denetimler ekleme

İlk olarak uygulamamız için kullanıcı arabirimini ekleyelim:

  1. MainPage_Basic.xaml dosyasını açın.

  2. Bu adımın başlığıyla işaretlenmiş kodu bulun ("<-- Adım 3: Tekerlek girişi için denetim ekleme -->").

  3. Aşağıdaki satırları yorumdan çıkarın.

    <Button x:Name="InitializeSampleButton" 
        HorizontalAlignment="Center" 
        Margin="10" 
        Content="Initialize sample" />
<ToggleButton x:Name="AddRemoveToggleButton"
                HorizontalAlignment="Center" 
                Margin="10" 
                Content="Remove Item"
                IsChecked="True" 
                IsEnabled="False"/>
<Button x:Name="ResetControllerButton" 
        HorizontalAlignment="Center" 
        Margin="10" 
        Content="Reset RadialController menu" 
        IsEnabled="False"/>
<Slider x:Name="RotationSlider" Minimum="0" Maximum="10"
        Width="300"
        HorizontalAlignment="Center"/>
<TextBlock Text="{Binding ElementName=RotationSlider, Mode=OneWay, Path=Value}"
            Margin="0,0,0,20"
            HorizontalAlignment="Center"/>
<ToggleSwitch x:Name="ClickToggle"
                MinWidth="0" 
                Margin="0,0,0,20"
                HorizontalAlignment="center"/>

Bu noktada yalnızca Örnek başlat düğmesi, kaydırıcı ve anahtar etkin. Diğer düğmeler, kaydırıcıya ve geçiş anahtarına erişim sağlayan RadialController menü öğelerini eklemek ve kaldırmak için sonraki adımlarda kullanılır.

Temel örnek uygulama kullanıcı arabirimi

4. Adım: Temel RadialController menüsünü özelleştirme

Şimdi RadialController erişimini etkinleştirmek için gereken kodu denetimlerimize ekleyelim.

  1. MainPage_Basic.xaml.cs dosyasını açın.
  2. Bu adımın başlığıyla işaretlenmiş kodu bulun ("// 4. Adım: Temel RadialController menü özelleştirmesi").
  3. Aşağıdaki satırların açıklama işaretlerini kaldırın:

    • Sonraki adımlarda işlevsellik için Windows.UI.Input ve Windows.Storage.Streams türü başvuruları kullanılır:

      // Using directives for RadialController functionality.
using Windows.UI.Input;

    • Bu genel nesneler (RadialController, RadialControllerConfiguration, RadialControllerMenuItem) uygulamamız genelinde kullanılır.

      private RadialController radialController;
private RadialControllerConfiguration radialControllerConfig;
private RadialControllerMenuItem radialControllerMenuItem;

    • Burada, denetimlerimizi etkinleştiren ve özel RadialController menü öğemizi başlatan düğme için Tıklama işleyicisini belirteceğiz.

      InitializeSampleButton.Click += (sender, args) =>
{ InitializeSample(sender, args); };

    • Ardından RadialController nesnemizi başlatıp RotationChanged ve ButtonClicked olayları için işleyiciler ayarlayacağız.

      // Set up the app UI and RadialController.
private void InitializeSample(object sender, RoutedEventArgs e)
{
    ResetControllerButton.IsEnabled = true;
    AddRemoveToggleButton.IsEnabled = true;

    ResetControllerButton.Click += (resetsender, args) =>
    { ResetController(resetsender, args); };
    AddRemoveToggleButton.Click += (togglesender, args) =>
    { AddRemoveItem(togglesender, args); };

    InitializeController(sender, e);
}

    • Burada, özel RadialController menü öğemizi başlatacağız. RadialController nesnemize başvuru almak için CreateForCurrentView kullanıyoruz, RotationResolutionInDegrees özelliğini kullanarak döndürme duyarlılığını "1" olarak ayarlıyoruz, ardından CreateFromFontGlyph kullanarak RadialControllerMenuItem'imizi oluşturuyoruz, menü öğesini RadialController menü öğesi koleksiyonuna ekliyoruz ve son olarak, varsayılan menü öğelerini temizlemek ve yalnızca özel aracımızı bırakmak için SetDefaultMenuItems kullanıyoruz.

      // Configure RadialController menu and custom tool.
private void InitializeController(object sender, RoutedEventArgs args)
{
    // Create a reference to the RadialController.
    radialController = RadialController.CreateForCurrentView();
    // Set rotation resolution to 1 degree of sensitivity.
    radialController.RotationResolutionInDegrees = 1;

    // Create the custom menu items.
    // Here, we use a font glyph for our custom tool.
    radialControllerMenuItem =
        RadialControllerMenuItem.CreateFromFontGlyph("SampleTool", "\xE1E3", "Segoe MDL2 Assets");

    // Add the item to the RadialController menu.
    radialController.Menu.Items.Add(radialControllerMenuItem);

    // Remove built-in tools to declutter the menu.
    // NOTE: The Surface Dial menu must have at least one menu item. 
    // If all built-in tools are removed before you add a custom 
    // tool, the default tools are restored and your tool is appended 
    // to the default collection.
    radialControllerConfig =
        RadialControllerConfiguration.GetForCurrentView();
    radialControllerConfig.SetDefaultMenuItems(
        new RadialControllerSystemMenuItemKind[] { });

    // Declare input handlers for the RadialController.
    // NOTE: These events are only fired when a custom tool is active.
    radialController.ButtonClicked += (clicksender, clickargs) =>
    { RadialController_ButtonClicked(clicksender, clickargs); };
    radialController.RotationChanged += (rotationsender, rotationargs) =>
    { RadialController_RotationChanged(rotationsender, rotationargs); };
}

// Connect wheel device rotation to slider control.
private void RadialController_RotationChanged(
    object sender, RadialControllerRotationChangedEventArgs args)
{
    if (RotationSlider.Value + args.RotationDeltaInDegrees >= RotationSlider.Maximum)
    {
        RotationSlider.Value = RotationSlider.Maximum;
    }
    else if (RotationSlider.Value + args.RotationDeltaInDegrees < RotationSlider.Minimum)
    {
        RotationSlider.Value = RotationSlider.Minimum;
    }
    else
    {
        RotationSlider.Value += args.RotationDeltaInDegrees;
    }
}

// Connect wheel device click to toggle switch control.
private void RadialController_ButtonClicked(
    object sender, RadialControllerButtonClickedEventArgs args)
{
    ClickToggle.IsOn = !ClickToggle.IsOn;
}
  4. Şimdi uygulamayı yeniden çalıştırın.
  5. Radyal denetleyiciyi başlat düğmesini seçin.
  6. Uygulama ön planda olduğu için Surface Dial'a basılı tutarak menüyü görüntüleyin. Tüm varsayılan araçların kaldırıldığına dikkat edin ( RadialControllerConfiguration.SetDefaultMenuItems yöntemi kullanılarak), yalnızca özel araç bırakılmıştır. Özel aracımızı içeren menü aşağıdadır.
RadialController menüsü (özel)
Özel RadialController menüsü
  1. Özel aracı seçin ve Surface Dial aracılığıyla desteklenen etkileşimleri deneyin:
    • Döndürme eylemi kaydırıcıyı hareket ettirir.
    • Tıklama, anahtarı açık veya kapalı duruma ayarlar.

Tamam, şu düğmeleri bağlayalım.

5. Adım: Çalışma zamanında yapılandır menüsü

Bu adımda, menüyü dinamik olarak nasıl özelleştirebileceğinizi göstermek için Öğe Ekle/Kaldır ve RadialController'ı Sıfırla menü düğmelerini bağlayacağız.

  1. MainPage_Basic.xaml.cs dosyasını açın.

  2. Bu adımın başlığıyla işaretlenmiş kodu bulun ("// 5. Adım: Çalışma zamanında menüyü yapılandır").

  3. Aşağıdaki yöntemlerde kodun açıklamasını kaldırın ve uygulamayı yeniden çalıştırın, ancak herhangi bir düğme seçmeyin (bunu bir sonraki adım için kaydedin).

    // Add or remove the custom tool.
private void AddRemoveItem(object sender, RoutedEventArgs args)
{
    if (AddRemoveToggleButton?.IsChecked == true)
    {
        AddRemoveToggleButton.Content = "Remove item";
        if (!radialController.Menu.Items.Contains(radialControllerMenuItem))
        {
            radialController.Menu.Items.Add(radialControllerMenuItem);
        }
    }
    else if (AddRemoveToggleButton?.IsChecked == false)
    {
        AddRemoveToggleButton.Content = "Add item";
        if (radialController.Menu.Items.Contains(radialControllerMenuItem))
        {
            radialController.Menu.Items.Remove(radialControllerMenuItem);
            // Attempts to select and activate the previously selected tool.
            // NOTE: Does not differentiate between built-in and custom tools.
            radialController.Menu.TrySelectPreviouslySelectedMenuItem();
        }
    }
}

// Reset the RadialController to initial state.
private void ResetController(object sender, RoutedEventArgs arg)
{
    if (!radialController.Menu.Items.Contains(radialControllerMenuItem))
    {
        radialController.Menu.Items.Add(radialControllerMenuItem);
    }
    AddRemoveToggleButton.Content = "Remove item";
    AddRemoveToggleButton.IsChecked = true;
    radialControllerConfig.SetDefaultMenuItems(
        new RadialControllerSystemMenuItemKind[] { });
}

  4. Öğeyi kaldır düğmesini seçin ve ardından menüyü yeniden görüntülemek için kadranı basılı tutun.

    Menüde artık varsayılan araç koleksiyonunun bulunduğuna dikkat edin. 3. Adımda özel menümüzü ayarlarken tüm varsayılan araçları kaldırdığımız ve yalnızca özel aracımızı eklediğimiz hatırlayın. Menü boş bir koleksiyona ayarlandığında geçerli bağlam için varsayılan öğelerin yeniden etkinleştirildiğini de belirtmiş olduk. (Varsayılan araçları kaldırmadan önce özel aracımızı ekledik.)

  5. Öğe ekle düğmesini seçin ve ardından Kadrana basılı tutun.

    Menüde artık hem varsayılan araç koleksiyonunun hem de özel aracımızın bulunduğuna dikkat edin.

  6. RadialController Sıfırlama menüsü düğmesini seçin ve ardından Kadran'a basılı tutun.

    Menünün özgün durumuna geri döndüğüne dikkat edin.

6. Adım: Cihaz dokunsallarını özelleştirme

Surface Dial ve diğer tekerlek cihazları, kullanıcılara geçerli etkileşime karşılık gelen dokunsal geri bildirim sağlayabilir (tıklama veya döndürmeye bağlı olarak).

Bu adımda kaydırıcımızı ve geçiş anahtarı denetimlerimizi ilişkilendirerek ve bunları dokunsal geri bildirim davranışını dinamik olarak belirtmek için kullanarak dokunsal geri bildirimleri nasıl özelleştirebileceğinizi göstereceğiz. Bu örnekte, geri bildirimin etkinleştirilmesi için anahtar düğmesinin açık olarak ayarlanması gerekirken, kaydırıcı değeri tıklama geri bildiriminin ne sıklıkta yinelendiğini belirtir.

Uyarı

Dokunsal geri bildirim , Ayarlar>Cihazlar>Tekerleği sayfasında kullanıcı tarafından devre dışı bırakılabilir.

  1. App.xaml.cs dosyasını açın.

  2. Bu adımın başlığıyla işaretlenmiş kodu bulun ("Adım 6: Cihazın haptiklerini özelleştirme").

  3. Birinci ve üçüncü satırları ("MainPage_Basic" ve "MainPage") yorum satırı haline getirin ve ikinci satırın ("MainPage_Haptics") yorum işaretlerini kaldırın.

    rootFrame.Navigate(typeof(MainPage_Basic), e.Arguments);
rootFrame.Navigate(typeof(MainPage_Haptics), e.Arguments);
rootFrame.Navigate(typeof(MainPage), e.Arguments);

  4. MainPage_Haptics.xaml dosyasını açın.

  5. Bu adımın başlığıyla işaretlenmiş kodu bulun ("<-- 6. Adım: Cihaz içeriğini özelleştirme -->").

  6. Aşağıdaki satırları yorumdan çıkarın. (Bu kullanıcı arabirimi kodu yalnızca geçerli cihaz tarafından hangi haptics özelliklerinin desteklendiği gösterir.)

    <StackPanel x:Name="HapticsStack" 
            Orientation="Vertical" 
            HorizontalAlignment="Center" 
            BorderBrush="Gray" 
            BorderThickness="1">
    <TextBlock Padding="10" 
                Text="Supported haptics properties:" />
    <CheckBox x:Name="CBDefault" 
                Content="Default" 
                Padding="10" 
                IsEnabled="False" 
                IsChecked="True" />
    <CheckBox x:Name="CBIntensity" 
                Content="Intensity" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBPlayCount" 
                Content="Play count" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBPlayDuration" 
                Content="Play duration" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBReplayPauseInterval" 
                Content="Replay/pause interval" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBBuzzContinuous" 
                Content="Buzz continuous" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBClick" 
                Content="Click" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBPress" 
                Content="Press" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBRelease" 
                Content="Release" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBRumbleContinuous" 
                Content="Rumble continuous" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
</StackPanel>

  7. MainPage_Haptics.xaml.cs dosyasını açma

  8. Bu adımın başlığıyla işaretlenmiş kodu bulun ("6. Adım: Haptics özelleştirmesi")

  9. Aşağıdaki satırların başındaki yorum işaretlerini kaldırın.

    • Windows.Devices.Haptics türü başvurusu, sonraki adımlarda işlevsellik için kullanılır.

      using Windows.Devices.Haptics;

    • Burada, özel RadialController menü öğemiz seçildiğinde tetiklenen ControlAcquired olayının işleyicisini belirteceğiz.

      radialController.ControlAcquired += (rc_sender, args) =>
{ RadialController_ControlAcquired(rc_sender, args); };

    • Ardından, varsayılan dokunsal geri bildirimleri devre dışı bırakacağımız ve dokunsal kullanıcı arabirimimizi başlatacağımız ControlAcquired işleyicisini tanımlayacağız.

      private void RadialController_ControlAcquired(
    RadialController rc_sender,
    RadialControllerControlAcquiredEventArgs args)
{
    // Turn off default haptic feedback.
    radialController.UseAutomaticHapticFeedback = false;

    SimpleHapticsController hapticsController =
        args.SimpleHapticsController;

    // Enumerate haptic support.
    IReadOnlyCollection<SimpleHapticsControllerFeedback> supportedFeedback =
        hapticsController.SupportedFeedback;

    foreach (SimpleHapticsControllerFeedback feedback in supportedFeedback)
    {
        if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.BuzzContinuous)
        {
            CBBuzzContinuous.IsEnabled = true;
            CBBuzzContinuous.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.Click)
        {
            CBClick.IsEnabled = true;
            CBClick.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.Press)
        {
            CBPress.IsEnabled = true;
            CBPress.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.Release)
        {
            CBRelease.IsEnabled = true;
            CBRelease.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.RumbleContinuous)
        {
            CBRumbleContinuous.IsEnabled = true;
            CBRumbleContinuous.IsChecked = true;
        }
    }

    if (hapticsController?.IsIntensitySupported == true)
    {
        CBIntensity.IsEnabled = true;
        CBIntensity.IsChecked = true;
    }
    if (hapticsController?.IsPlayCountSupported == true)
    {
        CBPlayCount.IsEnabled = true;
        CBPlayCount.IsChecked = true;
    }
    if (hapticsController?.IsPlayDurationSupported == true)
    {
        CBPlayDuration.IsEnabled = true;
        CBPlayDuration.IsChecked = true;
    }
    if (hapticsController?.IsReplayPauseIntervalSupported == true)
    {
        CBReplayPauseInterval.IsEnabled = true;
        CBReplayPauseInterval.IsChecked = true;
    }
}

    • RotationChanged ve ButtonClicked olay işleyicilerimizde ilgili kaydırıcı ve iki konumlu düğme denetimlerini özel dokunsal geri bildirim sistemimize bağlıyoruz.

      // Connect wheel device rotation to slider control.
private void RadialController_RotationChanged(
    object sender, RadialControllerRotationChangedEventArgs args)
{
    ...
    if (ClickToggle.IsOn && 
        (RotationSlider.Value > RotationSlider.Minimum) && 
        (RotationSlider.Value < RotationSlider.Maximum))
    {
        SimpleHapticsControllerFeedback waveform = 
            FindWaveform(args.SimpleHapticsController, 
            KnownSimpleHapticsControllerWaveforms.BuzzContinuous);
        if (waveform != null)
        {
            args.SimpleHapticsController.SendHapticFeedback(waveform);
        }
    }
}

private void RadialController_ButtonClicked(
    object sender, RadialControllerButtonClickedEventArgs args)
{
    ...

    if (RotationSlider?.Value > 0)
    {
        SimpleHapticsControllerFeedback waveform = 
            FindWaveform(args.SimpleHapticsController, 
            KnownSimpleHapticsControllerWaveforms.Click);

        if (waveform != null)
        {
            args.SimpleHapticsController.SendHapticFeedbackForPlayCount(
                waveform, 1.0, 
                (int)RotationSlider.Value, 
                TimeSpan.Parse("1"));
        }
    }
}

    • Son olarak, dokunsal geri bildirim için istenen Waveform 'ı (destekleniyorsa) alacağız.

      // Get the requested waveform.
private SimpleHapticsControllerFeedback FindWaveform(
    SimpleHapticsController hapticsController,
    ushort waveform)
{
    foreach (var hapticInfo in hapticsController.SupportedFeedback)
    {
        if (hapticInfo.Waveform == waveform)
        {
            return hapticInfo;
        }
    }
    return null;
}

Şimdi kaydırıcı değerini ve anahtar düğmesi durumunu değiştirerek özel dokunsal geri bildirimleri denemek için uygulamayı yeniden çalıştırın.

7. Adım: Surface Studio ve benzer cihazlar için ekran etkileşimlerini tanımlama

Surface Studio ile eşleştirilen Surface Dial, daha da ayırt edici bir kullanıcı deneyimi sağlayabilir.

Açıklanan varsayılan basılı tutma menüsü deneyimine ek olarak, Surface Dial doğrudan Surface Studio'nun ekranına da yerleştirilebilir. Bu, özel bir "ekranda" menü sağlar.

Sistem, Surface Dial'ın hem iletişim konumunu hem de sınırlarını algılayarak cihaz tarafından gizlemeyi yönetir ve menünün Dial'ın etrafını çevreleyen daha büyük bir sürümünü görüntüler. Bu bilgiler, kullanıcı arabirimini hem cihazın varlığı hem de kullanıcının elinin ve kolunun yerleşimi gibi tahmini kullanımına uyarlamak için uygulamanız tarafından da kullanılabilir.

Bu öğreticiye eşlik eden örnek, bu özelliklerden bazılarını gösteren biraz daha karmaşık bir örnek içerir.

Bunu çalışırken görmek için (Surface Studio gerekir):

  1. Örneği Surface Studio cihazına indirme (Visual Studio yüklü)

  2. Örneği Visual Studio'da açma

  3. App.xaml.cs dosyasını açma

  4. Bu adımın başlığıyla işaretlenmiş kodu bulun ("7. Adım: Surface Studio ve benzer cihazlar için ekran etkileşimlerini tanımlama")

  5. Birinci ve ikinci satırları ("MainPage_Basic" ve "MainPage_Haptics") yorum satırı haline getirin ve üçüncü satırın ("MainPage") yorumunu kaldırın.

    rootFrame.Navigate(typeof(MainPage_Basic), e.Arguments);
rootFrame.Navigate(typeof(MainPage_Haptics), e.Arguments);
rootFrame.Navigate(typeof(MainPage), e.Arguments);

  6. Uygulamayı çalıştırın ve Surface Dial'ı iki denetim bölgesinden her birine sırayla yerleştirin.
    Ekranda

Özet

Tebrikler, Windows uygulamanızda Surface Dial'ı (ve diğer tekerlek cihazlarını) destekleme: Başlangıç Eğitimi'ni tamamladınız! Windows uygulamalarınızda tekerlek cihazını desteklemek için gereken temel kodu ve RadialController API'leri tarafından desteklenen daha zengin kullanıcı deneyimlerinden bazılarını nasıl sağlayabileceklerini gösterdik.

Surface Dial etkileşimleri

API referansı

Samples

Konu örnekleri

RadialController özelleştirmesi

Diğer örnekler

Boyama Kitabı örneği

Evrensel Windows Platformu örnekleri (C# ve C++)

Windows masaüstü örneği

  • Last updated on