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

egdjgwm8  于 2023-02-20  发布在  其他
关注(0)|答案(1)|浏览(105)

我在手机和平板电脑上设计,但我怎么能添加方向选项呢?这都是纵向的,但我怎么能添加水平方向选项呢?

<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>
w3nuxt5m

w3nuxt5m1#

您可以将OrientationStateTriggerVisualStateManager一起使用,下面是一个示例:

<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>

在这个例子中:
| 众数|片剂|电话|
| - ------|- ------|- ------|
| * * 横向**|绿色|蓝色|
| * * 肖像**|紫色|黄色|

相关问题