Quantcast
Channel: C#タグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8899

iOS/Android/Windows/Web を構築するためプラットフォーム Uno Platform を試してみた

$
0
0

Uno Platform とは

UWPベースのコード(C#およびXAML)を書くだけでタイトルにある4プラットフォームで実行できるプラットフォームです。(iOS,Android,WebAssembly)

https://platform.uno/docs/articles/intro.html

環境準備

  • Visual Studio 2019

以下のワークロードのインストール

  • ユニバーサルWindowsプラットフォーム
  • .NET デスクトップ開発
  • .NET によるモバイル開発
  • ASP.NET と Web 開発

実装

手順は公式と同じように進むので英語ですがこちらでも参照できます。
https://platform.uno/docs/articles/getting-started-tutorial-1.html

拡張機能のインストール

拡張機能→拡張機能の管理から 「Uno Platform Solution Templates」を追加し、 vs を再起動します。
image.png

image.png

プロジェクトの作成

拡張機能追加後にプロジェクトを作成すると、 Un Platform のテンプレートが追加されていますのでそちらを使用します。今回はアプリケーションを作成するので App を選択します。
image.png
image.png

Nuget のアップデートと追加

ソリューションを選択し以下の3つの nuget をそれぞれ最新にバージョンアップさせます。

  • Uno.Core
  • Uno.UI
  • Uno.Wasm.Bootstrap

ただし、Microsoft.Extensions.Logging.Console は更新しないようにしてください。

同じくソリューションを選択し以下の Nuget を追加します。

Refractored.MvvmHelpers

image.png

フォルダとクラスの作成

プロジェクト名.Shared の中に Models フォルダを作成し、IssueItem.cs を作成します。
同じくプロジェクト名.Shared の中に Converts フォルダを作成し、 StringFormatConverter.cs を作成します。
作成後が以下の画像です。
image.png

IssueItem.cs
usingSystem;usingMvvmHelpers;namespaceUnoSampleApp.Shared.Models{publicclassIssueItem:ObservableObject{privateintid;publicintId{get=>id;set=>SetProperty(refid,value);}privateIssueTypetype;publicIssueTypeType{get=>type;set=>SetProperty(reftype,value);}privatestringtitle;publicstringTitle{get=>title;set=>SetProperty(reftitle,value);}privatestringdescription;publicstringDescription{get=>description;set=>SetProperty(refdescription,value);}privateIssueStatusstatus;publicIssueStatusStatus{get=>status;set=>SetProperty(refstatus,value);}privateinteffort;publicintEffort{get=>effort;set=>SetProperty(refeffort,value);}privateDateTimeOffsetcreatedAt=DateTimeOffset.Now.ToLocalTime();publicDateTimeOffsetCreatedAt{get=>createdAt;set=>SetProperty(refcreatedAt,value);}privateDateTimeOffset?startedAt;publicDateTimeOffset?StartedAt{get=>startedAt;set=>SetProperty(refstartedAt,value);}privateDateTimeOffset?completedAt;publicDateTimeOffset?CompletedAt{get=>completedAt;set=>SetProperty(refcompletedAt,value);}}publicenumIssueType{Bug,Issue,Task,Feature}publicenumIssueStatus{Icebox,Planned,WIP,Done,Removed}}
StringFormatConverter.cs
usingSystem;usingWindows.UI.Xaml.Data;namespaceUnoSampleApp.Shared.Converters{publicclassStringFormatConverter:IValueConverter{publicobjectConvert(objectvalue,TypetargetType,objectparameter,stringlanguage){returnstring.Format(parameter.ToString(),value);}publicobjectConvertBack(objectvalue,TypetargetType,objectparameter,stringlanguage){thrownewNotImplementedException();}}}

MainPage.xaml の変更

以下の通りです。

MainPage.xaml
<Pagex:Class="UnoSampleApp.MainPage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:UnoSampleApp"xmlns:converters="using:UnoSampleApp.Shared.Converters"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:ios="http://nventive.com/ios"mc:Ignorable="d ios"><Page.Resources><converters:StringFormatConverterx:Key="StringFormatConverter"/></Page.Resources><GridBackground="{ThemeResource ApplicationPageBackgroundThemeBrush}"RowSpacing="8"><Grid.RowDefinitions><RowDefinitionHeight="Auto"/><RowDefinitionHeight="Auto"/><RowDefinitionHeight="Auto"/><RowDefinitionHeight="Auto"/><RowDefinitionHeight="Auto"/><RowDefinitionHeight="*"/></Grid.RowDefinitions><StackPanelGrid.Row="0"Orientation="Horizontal"Background="LightGray"Padding="5"><CanvasBackground="Blue"Width="10"x:Name="IssueTypeIndicator"/><TextBlockText="{x:Bind Item.Id}"Margin="6,0"VerticalAlignment="Center"/><ComboBoxx:Name="IssueTypeBox"ItemsSource="{x:Bind IssueTypeList}"SelectedItem="{x:Bind Item.Type,Mode=TwoWay}"SelectionChanged="IssueType_SelectionChanged"PlaceholderText="Enter the Issue Type"HorizontalAlignment="Stretch"Margin="10,0,0,0"/></StackPanel><TextBoxText="{x:Bind Item.Description,Mode=TwoWay}"Grid.Row="2"AcceptsReturn="True"Header="Description"Height="200"Margin="10,0"PlaceholderText="Enter Text Here"/><TextBlockText="Planning"FontWeight="Bold"FontSize="16"Grid.Row="3"Margin="10,0"/><StackPanelOrientation="Horizontal"Grid.Row="4"Margin="10,0"Spacing="20"><StackPanelBackground="LightGray"Padding="20"><TextBlockText="Effort"FontWeight="Bold"FontSize="16"Margin="10,0"/><TextBoxText="{x:Bind Item.Effort,Mode=TwoWay}"HorizontalTextAlignment="Center"HorizontalAlignment="Center"HorizontalContentAlignment="Center"BorderBrush="Transparent"Background="Transparent"/><SliderValue="{x:Bind Item.Effort,Mode=TwoWay}"Width="100"Minimum="0"Maximum="15"/></StackPanel><StackPanelBackground="LightGray"Padding="20"><TextBlockText="Status"FontWeight="Bold"FontSize="16"Margin="10,0"/><ComboBoxItemsSource="{x:Bind StatusList}"SelectedItem="{x:Bind Item.Status}"HorizontalAlignment="Stretch"SelectionChanged="StatusPicker_SelectionChanged"/><TextBlockText="{x:Bind Item.StartedAt,Converter={StaticResource StringFormatConverter},ConverterParameter='Started: {0:MMM dd, yyyy hh:mm tt}',Mode=OneWay}"/><TextBlockText="{x:Bind Item.CompletedAt,Converter={StaticResource StringFormatConverter},ConverterParameter='Completed: {0:MMM dd, yyyy hh:mm tt}',Mode=OneWay}"/></StackPanel></StackPanel><TextBlockText="{x:Bind Item.CreatedAt, Converter={StaticResource StringFormatConverter}, ConverterParameter='Created: {0:MMM dd, yyyy hh:mm tt}'}"Grid.Row="5"Margin="10,0"/></Grid></Page>
    xmlns:local="using:UnoSampleApp"
    xmlns:converters="using:UnoSampleApp.Shared.Converters"

ここのコードはそれぞれのプロジェクトに合わせて変更してください。

xaml.cs も併せて変更します。

MainPage.xaml.cs
usingSystem;usingUnoSampleApp.Shared.Models;usingWindows.UI;usingWindows.UI.Xaml;usingWindows.UI.Xaml.Controls;usingWindows.UI.Xaml.Media;usingWindows.UI.Xaml.Navigation;// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409namespaceUnoSampleApp{/// <summary>/// An empty page that can be used on its own or navigated to within a Frame./// </summary>publicsealedpartialclassMainPage:Page{publicstaticreadonlyDependencyPropertyIssueItemProperty=DependencyProperty.Register(nameof(Item),typeof(IssueItem),typeof(MainPage),newPropertyMetadata(default(IssueItem)));publicMainPage(){this.InitializeComponent();}publicIssueItemItem{get=>(IssueItem)GetValue(IssueItemProperty);set=>SetValue(IssueItemProperty,value);}publicIssueStatus[]StatusList=>new[]{IssueStatus.Icebox,IssueStatus.Planned,IssueStatus.WIP,IssueStatus.Done,IssueStatus.Removed};publicIssueType[]IssueTypeList=>new[]{IssueType.Bug,IssueType.Feature,IssueType.Issue,IssueType.Task};protectedoverridevoidOnNavigatedTo(NavigationEventArgse){Item=newIssueItem{Id=1232,Title="Getting Started",Description=@"Create a page to enter Issues that we need to work on.

## Acceptance Criteria

- Display the issue Id
- Provide an ability to select the issue Type (i.e. Bug, Feature, etc)
- Include an Issue Title
- Include a full issue description with support for Markdown
- Include an issue effort
- Include an ability for a developer to update the Status (i.e Icebox, WIP, etc)

## Additional Comments

We would like to have a visual indicator for the type of issue as well as something to visualize the effort involved",Effort=3,Status=IssueStatus.WIP,Type=IssueType.Feature,CreatedAt=newDateTimeOffset(2019,04,03,08,0,0,TimeSpan.FromHours(-8)),StartedAt=newDateTimeOffset(2019,04,30,08,0,0,TimeSpan.FromHours(-8))};}// Sets the time when we Complete or Start an issue.privatevoidStatusPicker_SelectionChanged(objectsender,SelectionChangedEventArgsargs){switch(Item.Status){caseIssueStatus.Removed:caseIssueStatus.Done:if(Item.CompletedAtisnull)Item.CompletedAt=DateTimeOffset.Now.ToLocalTime();break;caseIssueStatus.WIP:if(Item.StartedAtisnull)Item.StartedAt=DateTimeOffset.Now.ToLocalTime();break;default:Item.StartedAt=null;Item.CompletedAt=null;break;}}// Provides a unique color based on the type of IssueprivatevoidIssueType_SelectionChanged(objectsender,SelectionChangedEventArgsargs){varcolor=Colors.Red;switch(IssueTypeBox.SelectedItem){caseIssueType.Feature:color=Colors.Green;break;caseIssueType.Issue:color=Colors.Blue;break;caseIssueType.Task:color=Colors.Yellow;break;}IssueTypeIndicator.Background=newSolidColorBrush(color);}}}

以上で終了です。
ctrl + F5 で実行しましょう。

image.png

参考


Viewing all articles
Browse latest Browse all 8899

Trending Articles