窗口电话8.1构建不同屏幕尺寸的应用程序

时间:2016-09-22 05:20:49

标签: c# xaml

我是窗户电话的新手。
因此,我使用visual studio 2013为窗口电话8.1构建第一个应用程序 我在模拟器WVGA 4英寸上测试,一切正常。
这是我简单的xaml:

<Grid>
<ScrollViewer>
    <StackPanel>
        <TextBlock x:Name="tbCheck" Margin="10,0,0,0" FontSize="20" Text="check"/>
        <ListView x:Name="lvInfo" SelectionChanged="lvInfo_SelectionChanged">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid MaximumRowsOrColumns="5" Orientation="Horizontal" HorizontalAlignment="Center"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Border BorderThickness="3" CornerRadius="3" Margin="10,0,10,10" BorderBrush="#ffffff">
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                            <Image Margin="5,5,5,5" Width="100" Height="100" HorizontalAlignment="Left" Source="{Binding ImgInfo}"/>
                            <StackPanel>
                                <TextBlock FontSize="28" Text="{Binding NameInfo}"/>
                                <TextBlock Margin="0,5,0,5" FontSize="18" Text="{Binding AgeInfo}"/>
                                <TextBlock FontSize="18" Text="{Binding GenderInfo}"/>
                            </StackPanel>
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackPanel>
</ScrollViewer>

我知道我需要修复不同的屏幕尺寸才能使WVGA 4英寸上的所有内容,但我不知道该怎么做。
请帮帮我。

1 个答案:

答案 0 :(得分:0)

很少有人指出。

1) Windows Phone OS根据操作系统的字体大小自动设置项目的FontSize。您不需要显式设置TextBoxes的FontSize。但是,如果您想使项目的FontSize明显大于或小于其他项目,请使用Theme Resources

见下表:

enter image description here

2)您的第一个StackPanel内部DataTemplate HorizontalAlignment设置为Left。除非设计要求,否则请勿使用它。而是使用Grid

StackPanel替换为Grid,如下所示。

<Border BorderThickness="3" CornerRadius="3" Margin="10,0,10,10" BorderBrush="#ffffff">
    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Top">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Image Margin="5" Width="100" Height="100"  Source="{Binding ImgInfo}"/>
        <StackPanel Grid.Column="1">
            <TextBlock FontSize="{StaticResource PhoneFontSizeLarge}" Text="{Binding NameInfo}"/>
            <TextBlock Margin="0,5" FontSize="{StaticResource PhoneFontSizeSmall}" Text="{Binding AgeInfo}"/>
            <TextBlock FontSize="{StaticResource PhoneFontSizeSmall}" Text="{Binding GenderInfo}"/>
        </StackPanel>
    </Grid>
</Border>

现在,您的ListViewItem将占用设备上的全部空间而不管ScreenSize,并且在所有分辨率上看起来都相同。