设计xaml兼容所有分辨率

时间：2014-03-05 14:00:54

标签： windows-phone-8 view high-resolution

我得到了一个视图，我尝试使其与Windows Phone的所有分辨率兼容。我知道要做他的我必须使用“自动”值的边距，高度，宽度rpoperties但我无法得到设计我想...我粘贴了xaml代码......欢迎你的帮助

enter image description here 

    <Grid x:Name="LayoutRoot" Background="#FF00485A">
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="*"/>
            <RowDefinition  Height="auto"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contient le nom de l'application et le titre de la page-->
        <Grid Grid.Row="0" >
            <Image Width="180" Height="180" Source="/Images/BContact/ico_app-authent_bannuaire.png" HorizontalAlignment="Center" Margin="0,20,0,90"></Image>
        </Grid>

        <Grid Grid.Row="1" Margin="12,10,12,0" >

        <StackPanel Background="#FF003A48"   HorizontalAlignment="Center" Margin="12,-10,12,0">
                <PasswordBox x:Name="Passwordtext" IsEnabled="False" BorderBrush="Transparent" Background="#55000000" Width="476"  MaxLength="6"   HorizontalAlignment="Center" PasswordChar="•" Height="106" />
            </StackPanel>
            <TextBlock  x:Name="entrezcodepin" VerticalAlignment="Center" Text="Entrez votre code PIN"  Foreground="White" FontSize="20"  HorizontalAlignment="Center" />
        </Grid>

        <!--ContentPanel - placez tout contenu supplémentaire ici-->
        <Grid x:Name="ContentPanel" Grid.Row="2" Margin="12,0,12,0"  >

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

            <Button  Grid.Row="0" Grid.Column="0" Content="1" Background="White" FontSize="40" Foreground="#FF003A48"   Click="EnterPassword"></Button>

            <Button Grid.Row="1" Grid.Column="1" Content="5" Background="White" FontSize="40" Foreground="#FF003A48"   Click="EnterPassword" ></Button>

            <Button  Grid.Row="2" Grid.Column="2" Content="9" Background="White"  FontSize="40" Foreground="#FF003A48"   Click="EnterPassword"></Button>

            <Button Grid.Row="3" Grid.Column="0" Content=" " Background="White" FontSize="40" Foreground="#FF003A48" Click="EnterPassword" ></Button>

            <Button  Grid.Row="0" Grid.Column="1" Content="2" Background="White" FontSize="40" Foreground="#FF003A48"  Click="EnterPassword"></Button>

            <Button Grid.Row="1" Grid.Column="2" Content="6" Background="White" FontSize="40" Foreground="#FF003A48"    Click="EnterPassword"></Button>

            <Button  Grid.Row="2" Grid.Column="0" Content="7" Background="White" FontSize="40" Foreground="#FF003A48"  Click="EnterPassword"></Button>

            <Button  Grid.Row="3" Grid.Column="1" Content="0" Background="White" FontSize="40" Foreground="#FF003A48"    Click="EnterPassword" ></Button>

            <Button Grid.Row="0" Grid.Column="2" Content="3" Background="White" FontSize="40" Foreground="#FF003A48"    Click="EnterPassword"></Button>

            <Button  Grid.Row="1" Grid.Column="0" Content="4" Background="White" FontSize="40" Foreground="#FF003A48"   Click="EnterPassword"></Button>

            <Button  Grid.Row="2" Grid.Column="1" Content="8" Background="White" FontSize="40" Foreground="#FF003A48"    Click="EnterPassword"></Button>

            <Button  Grid.Row="3" Grid.Column="2"  Background="White" Foreground="#55000000"   Click="EnterPassword">

                <Image Source="/Images/ico_action_delete-text.png" MaxHeight="54"  ></Image>

            </Button>

        </Grid>

    </Grid>
</phone:PhoneApplicationPage>

2 个答案:

答案 0 :(得分：0)

 <Grid x:Name="LayoutRoot" Background="#FF00485A">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition  Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contient le nom de l'application et le titre de la page-->
        <Grid Grid.Row="0" >
            <Image VerticalAlignment="Center" HorizontalAlignment="Center" Source="/Images/BContact/ico_app-authent_bannuaire.png"></Image>
        </Grid>
        <StackPanel Grid.Row="1" Background="#FF003A48" >
            <PasswordBox x:Name="Passwordtext" IsEnabled="False" BorderBrush="Transparent" Background="#55000000" MaxLength="6"    PasswordChar="•"  />
            <TextBlock  x:Name="entrezcodepin" VerticalAlignment="Center" Text="Entrez votre code PIN"  Foreground="White" FontSize="20"  HorizontalAlignment="Center" />
        </StackPanel>
        <!--ContentPanel - placez tout contenu supplémentaire ici-->
        <Grid x:Name="ContentPanel" Grid.Row="2">
            <Grid.RowDefinitions>
                <RowDefinition  Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Button  Grid.Row="0" Grid.Column="0" Content="1" Background="White" FontSize="40" Foreground="#FF003A48"   ></Button>

            <Button Grid.Row="1" Grid.Column="1" Content="5" Background="White" FontSize="40" Foreground="#FF003A48"   ></Button>

            <Button  Grid.Row="2" Grid.Column="2" Content="9" Background="White"  FontSize="40" Foreground="#FF003A48"   ></Button>

            <Button Grid.Row="3" Grid.Column="0" Content=" " Background="White" FontSize="40" Foreground="#FF003A48" ></Button>

            <Button  Grid.Row="0" Grid.Column="1" Content="2" Background="White" FontSize="40" Foreground="#FF003A48"  ></Button>

            <Button Grid.Row="1" Grid.Column="2" Content="6" Background="White" FontSize="40" Foreground="#FF003A48"   ></Button>

            <Button  Grid.Row="2" Grid.Column="0" Content="7" Background="White" FontSize="40" Foreground="#FF003A48"  ></Button>

            <Button  Grid.Row="3" Grid.Column="1" Content="0" Background="White" FontSize="40" Foreground="#FF003A48"   ></Button>

            <Button Grid.Row="0" Grid.Column="2" Content="3" Background="White" FontSize="40" Foreground="#FF003A48"   ></Button>

            <Button  Grid.Row="1" Grid.Column="0" Content="4" Background="White" FontSize="40" Foreground="#FF003A48"  ></Button>

            <Button  Grid.Row="2" Grid.Column="1" Content="8" Background="White" FontSize="40" Foreground="#FF003A48"   ></Button>

            <Button  Grid.Row="3" Grid.Column="2"  Background="White" Foreground="#55000000"  >

                <Image Source="/Images/ico_action_delete-text.png" Stretch="Fill" ></Image>

            </Button>

        </Grid>

    </Grid>

答案 1 :(得分：0)

您遇到的问题涉及Button的样式的默认Padding和Margin。为了您的目的，您应该创建自己的按钮Style。示例可能如下所示：

<phone:PhoneApplicationPage.Resources>
    <Style x:Key="ButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="0">
                            <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>

然后你的按钮看起来像这样：

<Button Grid.Row="0" Margin="2" Grid.Column="0" Content="1" Background="White" FontSize="40" Foreground="#FF003A48"   Click="EnterPassword" Style="{StaticResource ButtonStyle}"/>

您可以根据自己的需要自由设置每个按钮的Margin。我认为这应该有用。

相关问题
最新问题