在Windows手机中设置ListBox高度

时间:2014-07-17 10:18:00

标签: xaml windows-phone-8 windows-phone

如何在纵向或横向视图中自动为列表框设置合适的尺寸?

我在纵向视图中没有任何问题: enter image description here

但是在横向视图中,列表框高度不是okey,并且listbox不能在recordpanel上。 enter image description here

这是我的xaml代码:

<Grid x:Name="LayoutRoot">
    <Grid.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#E9E9E9" Offset="0"/>
            <GradientStop Color="#FEFEFE" Offset="1"/>
        </LinearGradientBrush>
    </Grid.Background>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <MediaElement Name="SoundPlayer" AutoPlay="False" Volume="1" />

    <StackPanel Grid.Row="0">

        <StackPanel x:Name="StackPanelTopBar" >
        </StackPanel>

        <phone:Pivot  Height="40" Background="#F9A11D" SelectionChanged="Pivot_SelectionChanged" >
            <phone:Pivot.HeaderTemplate>
                <DataTemplate>
                    <TextBlock FontSize="24" Text="{Binding}" Margin="0,-5,0,0"/>
                </DataTemplate>
            </phone:Pivot.HeaderTemplate>
            <phone:PivotItem Header="Alle"/>
            <phone:PivotItem Header="A-E"/>
            <phone:PivotItem Header="F-J"/>
            <phone:PivotItem Header="K-O"/>
            <phone:PivotItem Header="P-T"/>
            <phone:PivotItem Header="U-Z"/>
        </phone:Pivot>

        <ListBox x:Name="ListBoxAlphabet" Height="Auto">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <toolkit:WrapPanel />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <controls:RoundButton Tag="{Binding File}" Content="{Binding Label}" FontSize="30"  ButtonHeight="90" ButtonWidth="90"
                            HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" Background="#FFD0D2D3" Foreground="White" PressedBrush="#F9A11D" BorderBrush="{StaticResource TransparentBrush}" Click="RoundButtonAlphabet_Click" />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

    </StackPanel>

    <Grid x:Name="RecordPanel" Grid.Row="1" Margin="0,0,0,8">
        <StackPanel VerticalAlignment="Bottom" Height="100">
            <userControls:SoundRecorderPanel></userControls:SoundRecorderPanel>
        </StackPanel>
    </Grid>
</Grid>

1 个答案:

答案 0 :(得分:2)

我不知道我是否理解正确,但如果您希望该记录面板在字母表上并且字母表列表可滚动,那么我可以提供帮助。

字母表 - 列表框位于记录面板上的原因是您将列表框放入堆栈面板。并且stackpanel位于网格行上,其height属性为auto。如果您希望该记录面板使用字母表,则应按如下方式定义行定义:

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

但当然列表框不适合屏幕,如果你想查看所有字母表,你必须滚动列表。

编辑:您还必须将列表框和数据透视图所在的堆栈面板更改为网格,如下所示:

<Grid Grid.Row="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <StackPanel x:Name="StackPanelTopBar" Grid.Row="0" >
        </StackPanel>

        <phone:Pivot  Height="80" Background="#F9A11D" Grid.Row="1" SelectionChanged="Pivot_SelectionChanged">
            <phone:Pivot.HeaderTemplate>
                <DataTemplate>
                    <TextBlock FontSize="24" Text="{Binding}" Margin="0,-5,0,0"/>
                </DataTemplate>
            </phone:Pivot.HeaderTemplate>
            <phone:PivotItem Header="Alle"/>
            <phone:PivotItem Header="A-E"/>
            <phone:PivotItem Header="F-J"/>
            <phone:PivotItem Header="K-O"/>
            <phone:PivotItem Header="P-T"/>
            <phone:PivotItem Header="U-Z"/>
        </phone:Pivot>

        <ListBox x:Name="ListBoxAlphabet" Height="Auto" Grid.Row="2">
        // and so on...

希望这有帮助!