在Windows Phone 8中动态高度的问题（请参阅草图里面）

Question

我目前摆弄Windows Phone 8 Gui但我遇到了一些问题。这个想法很简单：

应用程序中有一个滚动查看器，其中有3个项目。其中一个（A）总是可见的并且具有固定的高度。两个人（B和C）都应该有一个使用可用的屏幕空间的其余部分在ScrollViewer中动态高度（见示意图）

我一直无法要么

1）找到一个XAML定义，它允许我以描述的方式设置布局。主要的问题是让滚动查看器中的内容自动具有滚动发生的正确高度，并且确切地排列所有内容。

或

2）动态设置正确的高度在后面的代码的所有项目。我的主要问题是获取动态大小的对象的高度。无论我尝试我要么0,0或0或NaN。

这里是XAML代码我到目前为止

<phone:PhoneApplicationPage 
     x:Class="PhoneApp1.MainPage" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     mc:Ignorable="d" 
     FontFamily="{StaticResource PhoneFontFamilyNormal}" 
     FontSize="{StaticResource PhoneFontSizeNormal}" 
     Foreground="{StaticResource PhoneForegroundBrush}" 
     SupportedOrientations="Portrait" Orientation="Portrait" 
     shell:SystemTray.IsVisible="True"> 

     <Grid x:Name="LayoutRoot" Background="Transparent"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="224"/> 
       <RowDefinition/> 
      </Grid.RowDefinitions> 

      <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="0,0,0,108"> 
       <TextBlock x:Name="subtitle" Text="Help Me" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/> 
       <TextBlock x:Name="title" Margin="0" Style="{StaticResource PhoneTextTitle1Style}"> 
        <Run Text="StackOverflow"/> 
        <Run Text="!"/> 
       </TextBlock> 
      </StackPanel> 


      <Grid x:Name="ContentPanel" Margin="0,136,0,0" Grid.RowSpan="2"> 
       <ScrollViewer x:Name="mainScrollViewer" HorizontalAlignment="Left" VerticalAlignment="Top" Height="633" Margin="0"> 
        <Grid x:Name="contentGrid" HorizontalAlignment="Left" VerticalAlignment="Center"> 

         <Grid.RowDefinitions> 
          <RowDefinition Height="*"/> 
          <RowDefinition Height="300"/> 
          <RowDefinition Height="*"/> 
         </Grid.RowDefinitions> 

         <!--Here are my Elements A, B, C --> 
         <Image x:Name="element_B" Grid.Row="0" Stretch="Fill" Source="/Assets/b5xhG.png"/> 
         <Image x:Name="element_A" Grid.Row="1" Stretch="Fill" Source="/Assets/b5xhG.png"/> 
         <Image x:Name="element_C" Grid.Row="2" Stretch="Fill" Source="/Assets/b5xhG.png"/> 

        </Grid> 
       </ScrollViewer> 
      </Grid> 
     </Grid> 
    </phone:PhoneApplicationPage> 

，这里是我的身后

最少的代码

using System; 
    using System.Collections.Generic; 
    using System.Linq; 
    using System.Net; 
    using System.Windows; 
    using System.Windows.Controls; 
    using System.Windows.Navigation; 
    using Microsoft.Phone.Controls; 
    using Microsoft.Phone.Shell; 
    using PhoneApp1.Resources; 

    namespace PhoneApp1 
    { 
     public partial class MainPage : PhoneApplicationPage 
     { 
      // Konstruktor 
      public MainPage() 
      { 
       InitializeComponent(); 

       /*when the app starts, the height of the ContentGrid should be equal to the height of the Scrollviewer, 
       * therefore the height that element A and B should be together*/ 
       var BAndCHeight = contentGrid.Height - element_A.Height; 

       /*with that in mind, the new height of the Content in the Scrollviewer should be */ 
       var contentGridSupposedHeight = 2 * BAndCHeight + element_A.Height; 

      } 
     } 
    } 

谁能给我一个提示，这应该是怎样做？也许我错过了一些东西。如果不是，我如何获得元素的正确高度，以便我可以自己扩展它们？

感谢您的帮助！

Answer 1

您可能想尝试ActualHeight而不是Height。 这应该给元素的当前高度。

var BAndCHeight = contentGrid.ActualHeight - element_A.ActualHeight; 

这只能在Loaded事件期间或之后使用，因为元素实际上是在Loaded事件期间呈现的。

我希望这会有所帮助。

Answer 2

I think no need to set dynamically height of any element, Your issue should be resolved in your xaml. May this will help you, You can copy paste xaml. 

<phone:PhoneApplicationPage 
     x:Class="PhoneApp1.MainPage" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     mc:Ignorable="d" 
     FontFamily="{StaticResource PhoneFontFamilyNormal}" 
     FontSize="{StaticResource PhoneFontSizeNormal}" 
     Foreground="{StaticResource PhoneForegroundBrush}" 
     SupportedOrientations="Portrait" Orientation="Portrait" 
     shell:SystemTray.IsVisible="True"> 

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

      <StackPanel x:Name="TitlePanel" Grid.Row="0" > 
       <TextBlock x:Name="subtitle" Text="Help Me" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/> 
       <TextBlock x:Name="title" Margin="0" Style="{StaticResource PhoneTextTitle1Style}"> 
        <Run Text="StackOverflow"/> 
        <Run Text="!"/> 
       </TextBlock> 
      </StackPanel> 


      <Grid x:Name="ContentPanel" Margin="0,10,0,0" Grid.Row0="1"> 
       <ScrollViewer x:Name="mainScrollViewer" Margin="0"> 
        <Grid x:Name="contentGrid" HorizontalAlignment="Left" VerticalAlignment="Center"> 

         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="Auto"/> 
         </Grid.RowDefinitions> 

         <!--Here are my Elements A, B, C --> 
         <Image x:Name="element_B" Grid.Row="0" Stretch="Fill" Source="/Assets/b5xhG.png"/> 
         <Image x:Name="element_A" Grid.Row="1" Stretch="Fill" Source="/Assets/b5xhG.png"/> 
         <Image x:Name="element_C" Grid.Row="2" Stretch="Fill" Source="/Assets/b5xhG.png"/> 

        </Grid> 
       </ScrollViewer> 
      </Grid> 
     </Grid> 
    </phone:PhoneApplicationPage> 

Answer 3

得到正确的contentGrid大小，试试这个：

设置你的所有行高度为“自动”，在XAML

然后在你的Loaded事件处理，发现该行具有最大的ActualHeight然后将其他两行大小的高度 “*”

void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e) 
    { 
     double h = -1; 

     for (int row = 0; row < 3; row++) 
      if (contentGrid.RowDefinitions[row].ActualHeight > h) 
       h = contentGrid.RowDefinitions[row].ActualHeight; 

     for (int row = 0; row < 3; row++) 
      if (contentGrid.RowDefinitions[row].ActualHeight < h) 
       contentGrid.RowDefinitions[row].Height = new GridLength(1, GridUnitType.Star); 
    } 

contentGrid.RowDefinitions [tallestRow] .Height = System.Windows.GridLength.Auto; }