xaml设计兼容所有分辨率

我有一个看法，我试图使它与Windows Phone的所有决议兼容。我知道要做他我必须使用“自动”值的余量，高度，宽度rpoperties，但我可以“T得到我想要的设计...我粘贴的XAML代码...您的帮助是值得欢迎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>

来源

2014-03-05 Paul Martinez

你想实现什么？问题在哪里 - 当您开始输入字符时，“输入密码”应该消失？ – Romasz

我想实现粘贴的图像...我可以在每个控件上使用边距，高度和宽度值来轻松编写此视图，但这不是很好的解决方案，因为结果与其他分辨率不兼容......有没有问题的“输入密码”，数字键盘是问题每个按钮之间的余量不好... –

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

来源

2014-03-05 14:11:25 Jaihind

没有此代码不起作用... –

的问题，你都面临着按钮的样式的担忧默认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你的目的。我认为这应该工作。

来源

2014-03-05 15:21:59 Romasz

xaml设计兼容所有分辨率

回答

相关问题