XAML基於枚舉 - Xamarin形式

Question

我有一個訂單狀態屬性是一個枚舉，我想改變基於枚舉值顯示XAML。

這可能嗎？

這是我的XAML用我所有的佈局我已經工作（一些被註釋掉）：

<?xml version="1.0" encoding="UTF-8"?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps" 
    x:Class="Divco.OrderPage" 
    Title="Order"> 
<ContentPage.BindingContext> 
</ContentPage.BindingContext> 
<ContentPage.Content> 
    <!-- Basic stack layout used in all order views --> 
    <StackLayout> 
     <!--<StackLayout.Style>--> 
      <!-- Needs Driver --> 
      <!--<StackLayout> 
       <maps:Map WidthRequest="320" HeightRequest="150" 
        x:Name="WaitingMap" 
        IsShowingUser="false" 
        MapType="Street" /> 
      </StackLayout> 
      <StackLayout Padding="20, 0, 20, 0"> 
       <Label Text="{Binding CurrentOrder.Description}" LineBreakMode="WordWrap" Font="12" HorizontalTextAlignment="Center" /> 
       <Label Text="Pickup" TextColor="Fuchsia" Font="Bold,14" HorizontalTextAlignment="Center" /> 
       <Label Text="{Binding CurrentOrder.PickupContact.Display}" Font="12" HorizontalTextAlignment="Center" /> 
       <Label Text="{Binding CurrentOrder.PickupAddress.Display}" Font="12" HorizontalTextAlignment="Center" /> 
       <Label Text="{Binding CurrentOrder.PickupTimeFormatted}" Font="12" HorizontalTextAlignment="Center" /> 
       <Label Text="Dropoff" TextColor="Fuchsia" Font="Bold,14" HorizontalTextAlignment="Center" /> 
       <Label Text="{Binding CurrentOrder.DropoffContact.Display}" Font="12" HorizontalTextAlignment="Center" /> 
       <Label Text="{Binding CurrentOrder.DropoffAddress.Display}" Font="12" HorizontalTextAlignment="Center" /> 
       <Label Text="{Binding CurrentOrder.DropoffTimeFormatted}" Font="12" HorizontalTextAlignment="Center" /> 
      </StackLayout> 
      <StackLayout VerticalOptions="EndAndExpand" Padding="20, 0, 20, 20"> 
       <Button Text="Navigate!" 
         BackgroundColor="Fuschia" 
         TextColor="White" 
         Font="Bold,20" 
         Grid.Row="0" Grid.Column="1" /> 
      </StackLayout>--> 

      <!-- Waiting Driver --> 
      <!--<StackLayout> 
       <maps:Map WidthRequest="320" HeightRequest="200" 
        x:Name="WaitingMap" 
        IsShowingUser="true" 
        MapType="Street" /> 
      </StackLayout> 
      <StackLayout VerticalOptions="CenterAndExpand" Padding="20, 0, 20, 0" > 
       <Label Text="Pickup" TextColor="Fuchsia" Font="Bold" /> 
       <Label Text="{Binding CurrentOrder.PickupContact.Display}"/> 
       <Label Text="{Binding CurrentOrder.PickupAddress.Display}"/> 
       <Label Text="{Binding CurrentOrder.PickupTimeFormatted}"/> 
      </StackLayout> 
      <StackLayout VerticalOptions="EndAndExpand" Padding="20, 0, 20, 20"> 
       <Grid> 
        <Grid.RowDefinitions> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="*" /> 
         <ColumnDefinition Width="*" /> 
        </Grid.ColumnDefinitions> 
        <Button Text="Navigate" 
          BackgroundColor="Gray" 
          TextColor="White" 
          Font="Bold" 
          Grid.Row="0" Grid.Column="0"/> 
        <Button Text="Call" 
          BackgroundColor="Gray" 
          TextColor="White" 
          Font="Bold" 
          Grid.Row="0" Grid.Column="1"/> 
       </Grid> 
       <Button Text="I'm here!" 
          BackgroundColor="Fuschia" 
          TextColor="White" 
          Font="Bold,20" /> 
      </StackLayout>--> 

      <!-- Intransit --> 
      <!--<StackLayout> 
       <maps:Map WidthRequest="320" HeightRequest="200" 
        x:Name="TransitMap" 
        IsShowingUser="true" 
        MapType="Street" /> 
      </StackLayout> 
      <StackLayout VerticalOptions="CenterAndExpand" Padding="20, 0, 20, 0" > 
       <Label Text="Dropoff" TextColor="Fuchsia" Font="Bold" /> 
       <Label Text="{Binding CurrentOrder.DropoffContact.Display}"/> 
       <Label Text="{Binding CurrentOrder.DropoffAddress.Display}"/> 
       <Label Text="{Binding CurrentOrder.DropoffTimeFormatted}"/> 
      </StackLayout> 
      <StackLayout VerticalOptions="EndAndExpand" Padding="20, 0, 20, 20"> 
       <Grid> 
        <Grid.RowDefinitions> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="*" /> 
         <ColumnDefinition Width="*" /> 
        </Grid.ColumnDefinitions> 
        <Button Text="Navigate" 
          BackgroundColor="Gray" 
          TextColor="White" 
          Font="Bold" 
          Grid.Row="0" Grid.Column="0"/> 
        <Button Text="Call" 
          BackgroundColor="Gray" 
          TextColor="White" 
          Font="Bold" 
          Grid.Row="0" Grid.Column="1"/> 
       </Grid> 
       <Button Text="I'm here!" 
          BackgroundColor="Fuschia" 
          TextColor="White" 
          Font="Bold,20" /> 
      </StackLayout>--> 

      <!-- Needs Signature --> 
      <!--<StackLayout VerticalOptions="CenterAndExpand" Padding="20, 20, 20, 20"> 
       <Label Text="In order to verify the identity of the signature, please take a photo of the recipient's ID." HorizontalTextAlignment="Center"/> 
       <Button Text="Take Picture" 
        BackgroundColor="Gray" 
        TextColor="White" 
        Font="Bold,20"/> 
       <Button Text="Sign" 
        BackgroundColor="Fuschia" 
        TextColor="White" 
        Font="Bold,20" IsEnabled="false"/> 
      </StackLayout>--> 

      <!-- Complete! --> 
      <StackLayout> 
       <maps:Map WidthRequest="320" HeightRequest="150" 
        x:Name="WaitingMap" 
        IsShowingUser="false" 
        MapType="Street" /> 
      </StackLayout> 
      <StackLayout Padding="20, 0, 20, 0"> 
       <Label Text="{Binding CurrentOrder.Description}" LineBreakMode="WordWrap" Font="12" HorizontalTextAlignment="Center" /> 
       <Label Text="Pickup" TextColor="Fuchsia" Font="Bold,14" HorizontalTextAlignment="Center" /> 
       <Label Text="{Binding CurrentOrder.PickupContact.Display}" Font="12" HorizontalTextAlignment="Center" /> 
       <Label Text="{Binding CurrentOrder.PickupAddress.Display}" Font="12" HorizontalTextAlignment="Center" /> 
       <Label Text="{Binding CurrentOrder.PickupTimeFormatted}" Font="12" HorizontalTextAlignment="Center" /> 
       <Label Text="Dropoff" TextColor="Fuchsia" Font="Bold,14" HorizontalTextAlignment="Center" /> 
       <Label Text="{Binding CurrentOrder.DropoffContact.Display}" Font="12" HorizontalTextAlignment="Center" /> 
       <Label Text="{Binding CurrentOrder.DropoffAddress.Display}" Font="12" HorizontalTextAlignment="Center" /> 
       <Label Text="{Binding CurrentOrder.DropoffTimeFormatted}" Font="12" HorizontalTextAlignment="Center" /> 
      </StackLayout> 
      <StackLayout VerticalOptions="EndAndExpand" Padding="20, 0, 20, 20"> 
       <Label Text="This order is complete! Great work!" HorizontalTextAlignment="Center" TextColor="Fuchsia" Font="Bold"/> 
      </StackLayout> 
     <!--</StackLayout.Style>--> 
    </StackLayout> 
</ContentPage.Content> 

因此，舉例來說，我想以下時顯示訂單狀態是 「在途」：

：

<!-- Intransit --> 
      <!--<StackLayout> 
       <maps:Map WidthRequest="320" HeightRequest="200" 
        x:Name="TransitMap" 
        IsShowingUser="true" 
        MapType="Street" /> 
      </StackLayout> 
      <StackLayout VerticalOptions="CenterAndExpand" Padding="20, 0, 20, 0" > 
       <Label Text="Dropoff" TextColor="Fuchsia" Font="Bold" /> 
       <Label Text="{Binding CurrentOrder.DropoffContact.Display}"/> 
       <Label Text="{Binding CurrentOrder.DropoffAddress.Display}"/> 
       <Label Text="{Binding CurrentOrder.DropoffTimeFormatted}"/> 
      </StackLayout> 
      <StackLayout VerticalOptions="EndAndExpand" Padding="20, 0, 20, 20"> 
       <Grid> 
        <Grid.RowDefinitions> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="*" /> 
         <ColumnDefinition Width="*" /> 
        </Grid.ColumnDefinitions> 
        <Button Text="Navigate" 
          BackgroundColor="Gray" 
          TextColor="White" 
          Font="Bold" 
          Grid.Row="0" Grid.Column="0"/> 
        <Button Text="Call" 
          BackgroundColor="Gray" 
          TextColor="White" 
          Font="Bold" 
          Grid.Row="0" Grid.Column="1"/> 
       </Grid> 
       <Button Text="I'm here!" 
          BackgroundColor="Fuschia" 
          TextColor="White" 
          Font="Bold,20" /> 
      </StackLayout>--> 

VS時的順序是 「完全」 以下

下面是Order類供參考：

public class Order : INotifyPropertyChanged 
{ 

    // event to handle changes in the order status 
    public event PropertyChangedEventHandler PropertyChanged; 

    public enum Status { Preview, NeedsDriver, WaitingDriver, InTransit, NeedsSignature, Complete, Refunded } 

    public string ID { get; set; } 
    public string Description { get; set; } 
    private Status _orderStatus; 
    public Status OrderStatus { 
     get 
     { 
      return _orderStatus; 
     } 
     set 
     { 
      _orderStatus = value; 
      // tell the view that the order status has changed 
      OnPropertyChanged("OrderStatus"); 
     } 
    } 
    public Contact PickupContact { get; set; } 
    public Contact DropoffContact { get; set; } 
    public Address PickupAddress { get; set; } 
    public Address DropoffAddress { get; set; } 
    public DateTime PickupTime { get; set; } 
    public DateTime DropoffTime { get; set; } 

    // Formatted Pickup and Dropoff Times 
    public string PickupTimeFormatted 
    { 
     get { return PickupTime.ToString("g"); } 
    } 
    public string DropoffTimeFormatted 
    { 
     get { return DropoffTime.ToString("g"); } 
    } 

    public Order() 
    { 
    } 

    // Handler to tell the view that the order status has changed 
    protected void OnPropertyChanged(string name) 
    { 
     PropertyChangedEventHandler handler = PropertyChanged; 
     if (handler != null) 
     { 
      handler(this, new PropertyChangedEventArgs(name)); 
     } 
    } 

    public override string ToString() 
    { 
     return string.Format("[Order: ID={0}, Description={1}, OrderStatus={2}, PickupContact={3}, DropoffContact={4}, PickupAddress={5}, DropoffAddress={6}, PickupTime={7}, DropoffTime={8}, PickupTimeFormatted={9}, DropoffTimeFormatted={10}]", ID, Description, OrderStatus, PickupContact, DropoffContact, PickupAddress, DropoffAddress, PickupTime, DropoffTime, PickupTimeFormatted, DropoffTimeFormatted); 
    } 
} 

Answer 1

所以你要顯示取決於枚舉值的UI的部分在你的視圖模型？

有多種方式做到這一點，這裏有幾個：

1. 把所有可能的值在容器（Grid，一個StackLayout，一個AbsoluteLayout並使用他們的IsVisible屬性綁定到枚舉轉換器，將您的枚舉值轉換爲true或false
2. 同，但使用DataTrigger，無需任何轉換。這需要移動Order枚舉出班級爲XAML中的Ca不引用嵌套類型，並限定自定義xmlns（在下面的例子中「yourNs」）：

<!-- InTransit --> 
<StackLayout IsVisible="false"...> 
    <StackLayout.Triggers> 
    <DataTrigger TargetType="VisualElement" Binding="{Binding OrderStatus}" Value="{x:Static yourNs:Status.InTransit}"> 
     <Setter Property="IsVisible" Value="true" /> 
    </DataTrigger> 
    </StackLayout.Triggers> 
    ... 
</StackLayout> 

<!-- Complete --> 
<StackLayout IsVisible="false"> 
    <StackLayout.Triggers> 
    <DataTrigger TargetType="VisualElement" Binding="{Binding OrderStatus}" Value="{x:Static yourNs:Status.Complete}"> 
     <Setter Property="IsVisible" Value="true" /> 
    </DataTrigger> 
    </StackLayout.Triggers> 
    ... 
</StackLayout> 

如果有多個狀態，和每個視圖是複雜的，1.或2。將會創建一個巨大的Xaml，即使某些部分不可見，Xaml仍會被解析並創建對等對象。最好的選擇是爲每個案例定義一個Xaml視圖，並根據枚舉值，將正確的實例設置爲視圖內容，使用後面的代碼或者如果您堅持要將所有內容都轉到Xaml中，請使用代碼或DataTemplateSelector。

Answer 2

我承擔enum是你想顯示的是那些：

<Label Text="{Binding CurrentOrder.DropoffContact.Display}" .../> 

和enum爲DropoffContact。如果我錯了，請糾正我。

在這種情況下，Label會顯示「顯示」，因爲它是enum值（相當於你用ToString()有什麼）的string表示。

如果您想要自定義Binding中的enum值所顯示的文本，可以使用轉換器，例如，像這樣：

public class MyEnumConverter : IValueConverter 
{ 
    public object ConvertTo (object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     if (!(value is DropoffContact)) 
      return value; 
     switch (DropoffContact)value) { 
     case DropoffContact.Display: 
      return "Some string representation" 
     default: 
      return value; 
     } 
    } 

    public void ConvertFrom (object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     thrown new NotImplementedException(); 
    } 
} 

該轉換器添加到您的XAML頁面資源，並用它在結合：

<Label Text="{Binding CurrentOrder.DropoffContact.Display, Converter={StaticResource myResourceKey}}" .../>