Question

我正在尝试将图片中的列表视图放到网格上的第三行，该行位于滑块控件下方。不幸的是，它没有按照定义采取其立场。请指教

这是定义：

 <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/> <!--Top date-->
        <RowDefinition Height="10"/> <!--Just space between top date & slider controls-->
        <RowDefinition Height="Auto"/> <!--Slider row-->
        <RowDefinition Height="*"/> <!--Favorite shifts list view-->
    </Grid.RowDefinitions>
    <TextBlock x:Name="tbDate" Grid.Row="0" Text="Mon 28 April" Foreground="White" HorizontalAlignment="Center" FontSize="23" Margin="6,0,0,0" Style="{StaticResource MessageDialogTitleStyle}"/>
    <Grid Grid.Row="2" HorizontalAlignment="Center">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" MinWidth="88.333"/>
            <ColumnDefinition Width="Auto" MinWidth="193.333"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Button x:Name="btnAddToFavs" Grid.Column="0" Content="ADD" Click="btnAddToFavs_Click"/>
        <StackPanel Grid.Column="1" Orientation="Vertical" HorizontalAlignment="Center" Margin="0,0,0.333,0" Width="88">
            <Slider x:Name="sliderStartTime" Orientation="Vertical" LargeChange="0" Maximum="48" SmallChange="0" Margin="0,31,0,-332" Style="{StaticResource SliderStartStyle}" IsDirectionReversed="True" HorizontalAlignment="Center" />
            <Border Background="White" CornerRadius="5" Width="Auto">
                <TextBlock x:Name="tbShiftStart" Text="{Binding Value, Converter={StaticResource sliderValueToHoursConverter}, ElementName=sliderStartTime}" Foreground="Red" FontSize="13" FontFamily="Nirmala UI" Width="55" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
        </StackPanel>          
        <StackPanel Grid.Column="2" Orientation="Vertical" HorizontalAlignment="Center" Margin="0.333,0,0,0" Width="88">
            <Slider x:Name="sliderEndTime" Orientation="Vertical" LargeChange="0" Maximum="48" SmallChange="0" Margin="0,31,0,-332" Style="{StaticResource SliderEndStyle}" IsDirectionReversed="True" HorizontalAlignment="Center" Value="48" />
            <Border Background="White" CornerRadius="5" Width="Auto">
                <TextBlock x:Name="tbShiftEnd" Text="{Binding Value, Converter={StaticResource sliderValueToHoursConverter}, ElementName=sliderEndTime}" Foreground="Green" FontSize="13" FontFamily="Nirmala UI" Width="55" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
        </StackPanel>
    </Grid>
    <ListView x:Name="lvFavShifts" Grid.Row="3" Foreground="Red" FontSize="40" MaxHeight="300" Margin="0,40" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                  </Grid.ColumnDefinitions>
                  <Border BorderThickness="12" Background="#FFC2CEDC" Grid.Column="0" Grid.ColumnSpan="5" CornerRadius="15"/>
                  <Button x:Name="btnSetShift" Content="Set" Background="Green" Grid.Column="0"  HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
                  <TextBlock x:Name="tbFavShiftStart" Grid.Column="1" Text="{Binding theStartTime}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
                  <TextBlock x:Name="tbHyphen" Grid.Column="2" Text="-" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
                  <TextBlock x:Name="tbFavShiftEnd" Grid.Column="3" Text="{Binding theEndTime}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
                  <Button x:Name="btnDeleteShift" Content="Delete" Background="Red" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
               </Grid>
           </DataTemplate>
       </ListView.ItemTemplate>
    </ListView>
 </Grid>

Screenshot

Answer 1

我已经改变了你的代码，希望能得到更好的结果。它不理想但应该更容易调整以获得所需的结果。主要的变化是边缘像

<Slider x:Name="sliderStartTime" Margin="0,31,0,-332"  />

已经消失，因为它们是不同屏幕尺寸的灾难配方。看看你的想法。

 <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/> //its ok to set height here 
        <!--Top date-->
        <RowDefinition Height="10"/>
        <!--Just space between top date & slider controls-->
        <RowDefinition Height="Auto"/>
        <!--Slider row-->
        <RowDefinition Height="*"/>
        <!--Favorite shifts list view-->
    </Grid.RowDefinitions>
    <TextBlock x:Name="tbDate" Grid.Row="0" Text="Mon 28 April" Foreground="White" HorizontalAlignment="Center" FontSize="23" Margin="6,0,0,0" Style="{StaticResource MessageDialogTitleStyle}"/>
    <Grid Grid.Row="2" HorizontalAlignment="Center">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="1*"/> //adaptable fit to varying screen sizes
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <Button x:Name="btnAddToFavs" Grid.Column="0" Content="ADD" />
        <StackPanel Grid.Column="1" Orientation="Vertical" HorizontalAlignment="Center" Width="88">
            <Border Background="White" CornerRadius="5" Width="Auto">
                <TextBlock x:Name="tbShiftStart" Text="30" Foreground="Red"
                           FontSize="13" FontFamily="Nirmala UI"
                           Width="55" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>

            <Slider x:Name="sliderStartTime" Orientation="Vertical" LargeChange="0" Maximum="48" 
                    SmallChange="0" 
                    IsDirectionReversed="True" HorizontalAlignment="Center" Height="300"
                    /> // Slider has a reasonable height. You probably want control of this on phones                 
        </StackPanel>
        <StackPanel Grid.Column="2" Orientation="Vertical" HorizontalAlignment="Center" Width="88">
            <Border Background="White" CornerRadius="5" Width="Auto">
                <TextBlock x:Name="tbShiftEnd" Text="22" Foreground="Green" FontSize="13" FontFamily="Nirmala UI" Width="55" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <Slider x:Name="sliderEndTime" Orientation="Vertical" LargeChange="0" Maximum="48" SmallChange="0" IsDirectionReversed="True" HorizontalAlignment="Center" 
                    VerticalAlignment="Stretch" Value="48" Height="300" />

        </StackPanel>
    </Grid>

    <ListView x:Name="lvFavShifts" Grid.Row="3" Foreground="Red" 
              FontSize="40" Margin="0,40" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Border BorderThickness="12" Background="#FFC2CEDC" Grid.Column="0" Grid.ColumnSpan="5"
                            CornerRadius="15"/>
                    <Button x:Name="btnSetShift" Content="Set" Background="Green" Grid.Column="0"
                            HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
                    <TextBlock x:Name="tbFavShiftStart" Grid.Column="1" Text="{Binding theStartTime}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
                    <TextBlock x:Name="tbHyphen" Grid.Column="2" Text="-" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
                    <TextBlock x:Name="tbFavShiftEnd" Grid.Column="3" Text="{Binding theEndTime}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
                    <Button x:Name="btnDeleteShift" Content="Delete" Background="Red" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

XAML ListView在网格中的错误位置

1 个答案: