none
关于app应用自动缩放的问题 RRS feed

  • 问题

  • 我想做一个应用在同一个分辨率不同尺寸的屏幕上保持排版相同,类似于禁止自动缩放或者我可以操作缩放后的版面,举个例子说就是应用在23“1920*1082 scale100% 上排版和10.6” 1920*1080 scale140%上是一样的。
    2014年6月19日 8:34

答案

  • 你好。

    看到你的页面主体部分是一个RichTextColumns,这是一个多列显示富文本的控件。

    其中每一列的宽度需要定义,这种情况我建议还是固定每一列的宽度,这样可以保持一致性。当文本宽度过宽时,会自动显示滚动条。

    如果确实想保持不同分辨率下的列数一致,也就是列的宽度需要自适应,这样要根据分辨率去改变每一列的宽度,也是可以实现的。需要对RichTextBlock的宽度针对flipView的ActualWidth做一个绑定,比如屏幕默认显示3列,那么RichTextBlock的宽度就绑定为flipView的ActualWidth的1/3。而且富文本中的图片等也要设置成拉伸的。这样就可以了。


    • 已标记为答案 KUN_WANG 2014年6月21日 1:54
    2014年6月20日 3:28
    版主

全部回复

  • 你好。

    这个问题,可以在定义Grid的Row和Column时,尽量使用比例关系布局,不要固定宽度和高度。

    另外对一些特殊的元素,可以通过获取页面 pageRoot 的 ActualHeight 和 ActualWidth 后,根据获取到的值进行缩放处理。

    2014年6月19日 9:02
    版主
  • 你好!如何使用比例布局能不能说的详细一点?最好可以有一小段代码 
    2014年6月19日 9:32
  • 使用比例来布局的意思就是Grid分行和列的时候,用‘*’来实现。这样在Grid的Width和Height变化时,每行和每列的尺寸也是随之变化的。

            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="2*"/>
                    <RowDefinition Height="3*"/>
                    <RowDefinition Height="5*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="3*"/>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="5*"/>
                </Grid.ColumnDefinitions>
            </Grid>


    2014年6月19日 9:37
    版主
  • 我原本想做的是禁止系统进行自动缩放或者是把系统进行缩放时的程序接管过来自己定义,这样行不通吗? 还有一点是控件不固定宽高是通过Margin来限制它的宽高么?

    2014年6月20日 1:42
  • 我明确一下你的想法。

    如果我现在有两个不同的分辨率(1920 * 1080)为A,(1366 * 768)为B。界面上全屏显示一个图片,你是想让这个图片在A和B上都全屏显示,还是在A上只显示在屏幕的一部分上?

    如果你想让控件在不同分辨率上占的比例一样,这样就会出现控件的缩放,方法也就是我前面说的那样。

    如果你是想保持控件的像素,这样在不同分辨率上占的比例就会不一样。在大分辨率屏幕上,控件就会只出现在屏幕的一部分上。

    2014年6月20日 2:38
    版主
  • 我想我要的应该是前一种在不同分辨率上都全屏显示,比如说这个网格应用程序中的“组详细信息页” 我该怎么设置它flipview中的控件?(代码只是一部分)
        <Grid Style="{StaticResource LayoutRootStyle}">
            <Grid.RowDefinitions>
                <RowDefinition Height="140"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <!--
                此页的其余部分是一个较大的 FlipView,用于一次显示一个项的详细信息,
                并允许用户浏览所选组中的
                所有项
            -->
            <FlipView
                x:Name="flipView"
                AutomationProperties.AutomationId="ItemsFlipView"
                AutomationProperties.Name="Item Details"
                TabIndex="1"
                Grid.RowSpan="2"
                ItemsSource="{Binding Source={StaticResource itemsViewSource}}">
    
                <FlipView.ItemContainerStyle>
                    <Style TargetType="FlipViewItem">
                        <Setter Property="Margin" Value="0,137,0,0"/>
                    </Style>
                </FlipView.ItemContainerStyle>
     
                <FlipView.ItemTemplate>
                    <DataTemplate>
                        <!--
                            选定 UserControl 作为模板项的原因是它支持视觉状态管理
                            已加载/已卸载事件显式订阅该页中的视图状态更新
                        -->
                        <UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
                            <ScrollViewer x:Name="scrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}" Grid.Row="1">
    
                                <!-- 允许内容在所需的任意数量的列中流动-->
                                <common:RichTextColumns x:Name="richTextColumns" Margin="117,0,117,47">
                                    <RichTextBlock x:Name="richTextBlock" Width="560" Style="{StaticResource ItemRichTextStyle}" IsTextSelectionEnabled="False">
                                        <Paragraph>
                                            <Run FontSize="26.667" FontWeight="Light" Text="{Binding Title}"/>
                                            <LineBreak/>
                                            <LineBreak/>
                                            <Run FontWeight="Normal" Text="{Binding Subtitle}"/>
                                        </Paragraph>
                                        <Paragraph LineStackingStrategy="MaxHeight">
                                            <InlineUIContainer>
                                                <Image x:Name="image" MaxHeight="480" Margin="0,20,0,10" Stretch="Uniform" Source="{Binding Image}" AutomationProperties.Name="{Binding Title}"/>
                                            </InlineUIContainer>
                                        </Paragraph>
                                        <Paragraph>
                                            <Run FontWeight="SemiLight" Text="{Binding Content}"/>
                                        </Paragraph>
    				    <Paragraph>
                                            <InlineUIContainer>
                                                <MediaElement x:Name="myPlay1" HorizontalAlignment="Center" Height="576" Width="720" Margin="522,-300,-1109,-250" AutoPlay="False" Source="12.wmv"/>
                                            </InlineUIContainer>
                                        </Paragraph>
                                    </RichTextBlock>
    				</common:RichTextColumns>
                            </ScrollViewer>
                        </UserControl>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>
        </Grid>

    2014年6月20日 3:14
  • 你好。

    看到你的页面主体部分是一个RichTextColumns,这是一个多列显示富文本的控件。

    其中每一列的宽度需要定义,这种情况我建议还是固定每一列的宽度,这样可以保持一致性。当文本宽度过宽时,会自动显示滚动条。

    如果确实想保持不同分辨率下的列数一致,也就是列的宽度需要自适应,这样要根据分辨率去改变每一列的宽度,也是可以实现的。需要对RichTextBlock的宽度针对flipView的ActualWidth做一个绑定,比如屏幕默认显示3列,那么RichTextBlock的宽度就绑定为flipView的ActualWidth的1/3。而且富文本中的图片等也要设置成拉伸的。这样就可以了。


    • 已标记为答案 KUN_WANG 2014年6月21日 1:54
    2014年6月20日 3:28
    版主
  • 你好!

    我在对部分特殊元素进行缩放和位置处理时遇到了一点问题,就是基于flipview产生了不少Items页面但这些页面都是基于这个这个XAML产生的我想彻底修改XAML模板的布局,而不是每加载一个Items再重新缩放一次。

    2014年6月23日 8:48