İngilizce dilinde oku

Aracılığıyla paylaş


Deneysel Mobil Blazor Bağlamaları

Deneysel Mobil Blazor Bağlamaları, geliştiricilerin tanıdık web programlama desenlerini kullanarak Android, iOS, Windows, macOS ve Tizen için C# ve .NET kullanarak yerel ve hibrit mobil uygulamalar oluşturmasını sağlar. Deneysel Mobil Blazor Bağlamaları, bir uygulamanın kullanıcı arabirimi bileşenlerini ve davranışlarını tanımlamak için Razor söz dizimini kullanır. Temel alınan UI bileşenleri Xamarin.Forms yerel UI bileşenlerini temel alır ve karma uygulamalarda HTML öğeleriyle karıştırılır.

Blazor.NET Standard 2.0 üzerinde çalışır, böylece .NET kodunuzu diğer .NET uygulamalarının çoğuyla paylaşabilirsiniz.

Mobil Blazor Bağlamaları ile etiketler, düğmeler ve diğer yerel kullanıcı arabirimi bileşenleriyle yerel bir kullanıcı arabirimi oluşturmak kolaydır:

<StackLayout>
    <Label FontSize="30"
           Text="@("You pressed " + count + " times")" />
    <Button Text="+1"
            OnClick="@HandleClick" />
</StackLayout>

@code {
    int count;

    void HandleClick()
    {
        count++;
    }
}

Ve burada Android Öykünücüsü'nde çalışıyor:

Android Öykünücüsü'nde çalışan basit yerel uygulama

Ayrıca, aynı ekranda yerel kullanıcı arabirimi ve HTML kullanıcı arabirimini bir araya getiren ve hepsi aynı uygulama mantığını ve durumunu paylaşan karma uygulamalar oluşturabilirsiniz:

  • /Main.razor: (yerel kullanıcı arabirimi)

    @inject CounterState CounterState
    
    <ContentView>
        <StackLayout>
    
            <StackLayout Margin="new Thickness(20)">
                <Label Text="@($"You pressed {CounterState.CurrentCount} times")" FontSize="30" />
                <Button Text="Increment from native" OnClick="@CounterState.IncrementCount" Padding="10" />
            </StackLayout>
    
            <BlazorWebView ContentRoot="WebUI/wwwroot" VerticalOptions="LayoutOptions.FillAndExpand">
                <FirstBlazorHybridApp.WebUI.App />
            </BlazorWebView>
    
        </StackLayout>
    </ContentView>
    
    @code {
        // initialization code
    }
    
  • /WebUI/App.razor: (HTML kullanıcı arabirimi)

    @inject CounterState CounterState
    
    <div style="text-align: center; background-color: lightblue;">
        <div>
            <span style="font-size: 30px; font-weight: bold;">
                You pressed @CounterState.CurrentCount times
            </span>
        </div>
        <div>
            <button style="margin: 20px;" @onclick="ClickMe">Increment from HTML</button>
        </div>
    </div>
    
    @code
    {
        private void ClickMe()
        {
            CounterState.IncrementCount();
        }
    
        // initialization code
    }
    

Burada ise iOS Simülatörü'nde çalışıyor, üstte yerel kullanıcı arabirimi ve altta HTML kullanıcı arabirimi, uygulama mantığını ve durumunu paylaşıyor:

iOS Simülatöründe çalışan basit karma uygulama

İlk uygulamalarınızı oluşturmak için şu konulara göz atın:

Daha fazlası için hazır olduğunuzda izlenecek yollara göz atın:

Ardından gelişmiş konulardan bazıları:

Son olarak, katkıda bulunmak isterseniz şu konulara göz atın: