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設計兼容所有分辨率

回答

相關問題