How can I put the CommandBar on top of the Desktop and at the bottom on the mobile device?.enter code here
enter code here
<Grid.RowDefinitions>
<RowDefinition x:Name="TitleRow" Height="48"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
`enter code here` <TextBlock
x:Name="TitlePage"
x:Uid="Main_Title"
FontSize="{StaticResource FontSizeMedium}" Foreground="{StaticResource RedBrush}" FontWeight="SemiLight" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap" VerticalAlignment="Center"
Margin="0,0,12,7"/>
`enter code here` <CommandBar x:Name="Topbar" Margin="0,0,12,7" HorizontalAlignment="Right" Background="White" Visibility="Collapsed" >
<CommandBar.PrimaryCommands>
<AppBarButton x:Name="AddButton" Icon="Accept" x:Uid="Aceptar" Foreground="{StaticResource RedBrush}" Click="AddButton_Click"/>
</CommandBar.PrimaryCommands>
</CommandBar>
Since you're already using VisualStates, you can have three rows in your Grid and just change the CommandBar's Grid.Row value with an AdaptiveTrigger using the Width of the app.
Here is a video of the example code below at run-time.
UPDATE
To re-iterate what I stated in my last comment, you no longer need to use "Page.AppBar" property. In fact, you don't want to use it because your Grid's VisualStateManager can't alter page level properties.
Instead you can do what I show below (it's a complete, working, example):
<Grid x:Name="ContentArea"
Margin="{StaticResource MediumLeftRightMargin}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<CommandBar x:Name="MyAppBar"
Grid.Row="0" />
<Grid Grid.Row="1" Background="DarkGray">
<TextBlock Text="This is where your page content would go"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Grid>
<!-- Adaptive triggers -->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="WindowStates">
<VisualState x:Name="WideState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="640" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MyAppBar.(Grid.Row)"
Value="0" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="NarrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MyAppBar.(Grid.Row)"
Value="2" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
When the app is on mobile, the screen will be less than 640epx wide and the CommandBar will at the bottom. Otherwise, it will be on the top.