question

GaneshGebhard-8778 avatar image
0 Votes"
GaneshGebhard-8778 asked KyleWang-MSFT answered

Problems with converting from UWP to Xamarin

Hey!

I have some code in UWP which I want to 'convert' to Xamarin.Forms. It takes some time in most cases, but now I'm really stuck so I hope someone can help.

This is (part of) the UWP code:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup CurrentStateChanging="VisualStateGroup_CurrentStateChanging">
<VisualState x:Name="SearchItems">
<VisualState.StateTriggers>
<st:DataTrigger st:DataTrigger.Binding="{Binding IsSearchPaneOpen, Mode=OneWay}" st:DataTrigger.Value="True"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ItemsColumn.Width" Value="560"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="IsEditingItems">
<VisualState.StateTriggers>
<st:DataTrigger st:DataTrigger.Binding="{Binding IsEditingItems, Mode=OneWay}" st:DataTrigger.Value="True" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ScrollViewer.VerticalScrollMode" Value="Disabled" />
<Setter Target="TicketsShade.(Canvas.ZIndex)" Value="1" />
<Setter Target="TicketsPanel.AllowDrop" Value="false"/>
</VisualState.Setters>
<VisualState.Storyboard>
<Storyboard>
<DoubleAnimation From="0" To="0.7" Duration="0:0:0.3" Storyboard.TargetName="TicketsShade" Storyboard.TargetProperty="Opacity">
<DoubleAnimation.EasingFunction>
<BackEase EasingMode="EaseOut" Amplitude="0.3" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState.Storyboard>
</VisualState>

Now the problems that I have with the conversion are:
- VisualStateGroup doesn't contain CurrentStateChanging.
- VisualState.Storyboard could not be found.
- At line: <st:DataTrigger st:DataTrigger.Binding="{Binding IsSearchPaneOpen, Mode=OneWay}" st:DataTrigger.Value="True"/> gives the error A value of type 'DataTrigger' cannot be added to a collection or dictionary of type 'IList`1'.

I hope someone is able to help me.

Best,
Ganesh

dotnet-xamarinwindows-uwp
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

KyleWang-MSFT avatar image
0 Votes"
KyleWang-MSFT answered

Hi GaneshGebhard-8778,

Welcome to our Microsoft Q&A platform!

According to the documentation: VisualStateGroup Class, we can know that Xamarin doesn't provide any event for VisualStateGroup. For this feature, you can try to submit a feature request on Github.

And here is a workaround that you can define a custom bindable property and implement interface INotifyPropertyChanged to check if the state changed.

The following is an example with custom Entry.

MyEntry.cs

 public class MyEntry : Entry
 {
     public static readonly BindableProperty StateProperty = BindableProperty.Create(nameof(State), typeof(string), typeof(MyEntry), "");
    
     public string State
     {
         get { return (string)GetValue(StateProperty); }
         set { SetValue(StateProperty, value); }
     }
 }

MainPage.xaml

 <local:MyEntry State="{Binding State, Mode=TwoWay}">
     <VisualStateManager.VisualStateGroups>
         <VisualStateGroup x:Name="CommonStates">
             <VisualState x:Name="Normal">
                 <VisualState.Setters>
                     <Setter Property="State" Value="Normal" />
                     <Setter Property="BackgroundColor" Value="Lime" />
                 </VisualState.Setters>
             </VisualState>
             <VisualState x:Name="Focused">
                 <VisualState.Setters>
                     <Setter Property="State" Value="Focused" />
                     <Setter Property="FontSize" Value="36" />
                 </VisualState.Setters>
             </VisualState>
             <VisualState x:Name="Disabled">
                 <VisualState.Setters>
                     <Setter Property="State" Value="Disabled" />
                     <Setter Property="BackgroundColor" Value="Pink" />
                 </VisualState.Setters>
             </VisualState>
         </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>
    
     <local:MyEntry.Triggers>
         <DataTrigger TargetType="Entry"
                         Binding="{Binding Source={x:Reference anotherentry},
                                         Path=Text.Length}"
                         Value="0">
             <Setter Property="IsEnabled" Value="False" />
         </DataTrigger>
     </local:MyEntry.Triggers>
 </local:MyEntry>
 <Entry x:Name="anotherentry"
         Text=""
         Placeholder="Type something to enable MyEntry" />
 </StackLayout>

MainPageViewModel.cs

 class MainPageViewModel : INotifyPropertyChanged
 {
     string state;
     public string State
     {
         get => state;
         set
         {
             state = value;
             OnPropertyChanged("State");
             Debug.WriteLine(State);
         }
     }
    
     public event PropertyChangedEventHandler PropertyChanged;
    
     protected void OnPropertyChanged(string propertyName)
     {
         var handler = PropertyChanged;
         if (handler != null)
             handler(this, new PropertyChangedEventArgs(propertyName));
     }
 }

For the VisualStateManager in Xamarin, you can refer to Xamarin.Forms Visual State Manager.

As to the animation in Xamarin, you can refer to the documentation: Animation in Xamarin.Forms.

Regards,
Kyle


If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.