样式取决于 Xamarin 表单中的屏幕方向答案

【问题标题】：Styling depending on screen orientation in Xamarin forms样式取决于 Xamarin 表单中的屏幕方向
【发布时间】：2021-05-11 23:00:51
【问题描述】：

我正在手机和平板电脑上进行样式设置，但如何添加方向选项？这都是纵向的，但是如何添加水平方向的选项？

 <Style TargetType="Grid" x:Key="DocType">
                        <Setter Property="HeightRequest">
                        <Setter.Value>
                            <OnIdiom Phone="50" Tablet="80" />
                        </Setter.Value>
                    </Setter>
                 <Setter Property="BackgroundColor" Value="#F4F5F7"/>
             </Style>

【问题讨论】：

看看这个：docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/….
Microsoft 建议您覆盖页面中的OnSizeAllocated 方法并相应地设置StackLayout 的方向。遗憾的是，没有办法像OnIdiom 或OnPlatform 那样为方向设置样式。至少我不知道。

标签： xaml xamarin.forms styling adaptive-design

【解决方案1】：

您可以将OrientationStateTrigger 与VisualStateManager 一起使用，这是一个示例：

<Grid>
     <VisualStateManager.VisualStateGroups>
          <VisualStateGroup>
               <VisualState
                    x:Name="Landscape">
                    <VisualState.StateTriggers>
                         <OrientationStateTrigger Orientation="Landscape" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                         <Setter Property="BackgroundColor" Value="Blue" />
                    </VisualState.Setters>
               </VisualState>
               <VisualState
                    x:Name="Portrait">
                    <VisualState.StateTriggers>
                         <OrientationStateTrigger Orientation="Portrait" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                         <Setter Property="BackgroundColor" Value="Red" />
                    </VisualState.Setters>
                </VisualState>
           </VisualStateGroup>
      </VisualStateManager.VisualStateGroups> 
</Grid>

Source

编辑

`VisualStateManager` 在样式内，结合`OnIdiom`

<Style TargetType="Grid" x:Key="DocType">
    <Setter Property="HeightRequest">
        <Setter.Value>
            <OnIdiom Phone="50" Tablet="80" />
        </Setter.Value>
    </Setter>
    
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
               <VisualState x:Name="Landscape">
                    <VisualState.StateTriggers>
                         <OrientationStateTrigger Orientation="Landscape" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                                    <Setter Property="BackgroundColor">
                                        <Setter.Value>
                                            <OnIdiom Phone="Blue" Tablet="Green" />
                                        </Setter.Value>
                                    </Setter>
                    </VisualState.Setters>
               </VisualState>
               
               <VisualState x:Name="Portrait">
                    <VisualState.StateTriggers>
                         <OrientationStateTrigger Orientation="Portrait" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                                    <Setter Property="BackgroundColor">
                                        <Setter.Value>
                                            <OnIdiom Phone="Yellow" Tablet="Purple" />
                                        </Setter.Value>
                                    </Setter>
                    </VisualState.Setters>
                </VisualState>
           </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

在这个例子中：

Mode	Tablet	Phone
Landscape	Green	Blue
Portrait	Purple	Yellow

【讨论】：

如果它回答了您的问题，请通过accepting it▲/✅ 告诉我，否则您可以给我留下反馈/评论。

VisualStateManager 在样式内，结合OnIdiom

`VisualStateManager` 在样式内，结合`OnIdiom`