Question

我尝试了两天，但没有任何效果。我在 UWP窗口10 的ScrollViewer中使用grid。我想做的是在scrollviewer 的两侧按ob键水平滚动单击。任何帮助将不胜感激。预先感谢！

下面是我的xaml代码。

<Grid Grid.Row="1">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="100"></ColumnDefinition>
    <ColumnDefinition Width="*"></ColumnDefinition>
    <ColumnDefinition Width="100"></ColumnDefinition>
  </Grid.ColumnDefinitions>
  <Button Width="100" BorderThickness="0" Background="#c71806" VerticalAlignment="Stretch" Padding="0" Style="{StaticResource sddd}" Click="Button_Click_1" >
    <Image Source="assets/leftArrow.png" Width="50" Height="50"></Image>
  </Button>
  <ScrollViewer x:Name="chkScrollViewer"  HorizontalAlignment="Left" Grid.Column="1" Width="auto" VerticalScrollBarVisibility="Disabled" HorizontalScrollMode="Enabled" VerticalScrollMode="Disabled" HorizontalScrollBarVisibility="Auto" Margin="0,0,0,0" VerticalAlignment="Top" Grid.Row="1" FlowDirection="LeftToRight" IsVerticalRailEnabled="False">

    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="61*"/>
        <RowDefinition Height="84*"/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="150"></ColumnDefinition>
        <ColumnDefinition Width="150"></ColumnDefinition>
        <ColumnDefinition Width="150"></ColumnDefinition>
        <ColumnDefinition Width="150"></ColumnDefinition>
        <ColumnDefinition Width="150"></ColumnDefinition>
        <ColumnDefinition Width="150"></ColumnDefinition>
        <ColumnDefinition Width="150"></ColumnDefinition>
      </Grid.ColumnDefinitions>

      <Button Click="openNewTablePopup" Style="{StaticResource sddd}" Width="150" BorderThickness="0" Grid.Column="0" Background="#093e7a" Height="145" VerticalAlignment="Top" Padding="0" Grid.RowSpan="2">
        <StackPanel>
          <Image Source="assets/newTableButtonIcon.png" Width="50" Height="50"></Image>
          <TextBlock x:Name="otherTb" Foreground="#fff" FontSize="24" TextWrapping="WrapWholeWords" FontWeight="Normal">New Table</TextBlock>
        </StackPanel>
      </Button>
      <!--<Button  Width="150" BorderThickness="0" Style="{StaticResource sddd}" Grid.Column="1" Background="#093e7a" Height="145" VerticalAlignment="Top" Padding="0" Grid.RowSpan="2">
<StackPanel>
<Image Source="assets/newTableButtonIcon.png" Width="50" Height="50"></Image>
<TextBlock Foreground="#fff" FontSize="24" TextWrapping="WrapWholeWords" FontWeight="Normal">Create Order</TextBlock>
</StackPanel>
</Button>-->
      <Button Width="150"  Style="{StaticResource sddd}" BorderThickness="0" Grid.Column="1" Background="#093e7a" VerticalAlignment="Stretch" Padding="0" Grid.RowSpan="2" Click="btnTimeClock_Click">
        <StackPanel>
          <Image Source="Assets/clockIcon_75x75.png" Width="50" Height="50"></Image>
          <TextBlock Foreground="#fff" FontSize="24" TextWrapping="WrapWholeWords" FontWeight="Normal">Time Clock</TextBlock>
        </StackPanel>
      </Button>
      <Button Width="150"  Style="{StaticResource sddd}" BorderThickness="0" Grid.Column="2" Background="#093e7a" Height="145" VerticalAlignment="Top" Padding="0" Grid.RowSpan="2" Click="btnTransaction_Click">
        <StackPanel>
          <Image Source="Assets/transaction_icon.png" Width="50" Height="50"></Image>
          <TextBlock Foreground="#fff" FontSize="24" TextWrapping="WrapWholeWords" FontWeight="Normal">Transaction</TextBlock>
        </StackPanel>
      </Button>
      <Button Width="150" Style="{StaticResource sddd}" BorderThickness="0" Grid.Column="3" Background="#093e7a" Height="145" VerticalAlignment="Top" Padding="0" Grid.RowSpan="2" Click="btnsetting_Click">
        <StackPanel>
          <Image Source="assets/newTableButtonIcon.png" Width="50" Height="50"></Image>
          <TextBlock Foreground="#fff" FontSize="24" TextWrapping="WrapWholeWords" FontWeight="Normal" >Setting</TextBlock>
        </StackPanel>
      </Button>
      <Button Width="150" BorderThickness="0" Grid.Column="4" Background="#093e7a" Height="145" VerticalAlignment="Top" Padding="0" Grid.RowSpan="2" Click="btnorderhistory_Click" Style="{StaticResource sddd}" >
        <StackPanel>
          <Image Source="assets/newTableButtonIcon.png" Width="50" Height="50"></Image>
          <TextBlock Foreground="#fff" FontSize="24" TextWrapping="WrapWholeWords" FontWeight="Normal">Order History</TextBlock>
        </StackPanel>
      </Button>

      <Button Width="150" BorderThickness="0" Grid.Column="5" Background="#093e7a" Height="145" VerticalAlignment="Top" Padding="0" Grid.RowSpan="2" Click="btnmergeorder_Click" Style="{StaticResource sddd}" >
        <StackPanel>
          <Image Source="assets/newTableButtonIcon.png" Width="50" Height="50"></Image>
          <TextBlock Foreground="#fff" FontSize="24" TextWrapping="WrapWholeWords" FontWeight="Normal">Merge Table</TextBlock>
        </StackPanel>
      </Button>

      <Button Width="150" BorderThickness="0" Grid.Column="6" Background="#093e7a" Height="145" VerticalAlignment="Top" Padding="0" Grid.RowSpan="2" Click="btnReports_Click" Style="{StaticResource sddd}" >
        <StackPanel>
          <Image Source="assets/newTableButtonIcon.png" Width="50" Height="50"></Image>
          <TextBlock x:Name="lblreport" Foreground="#fff" FontSize="24" TextWrapping="WrapWholeWords" FontWeight="Normal">Reports</TextBlock>
        </StackPanel>
      </Button>
    </Grid>

  </ScrollViewer>
  <Button Width="100" BorderThickness="0" Grid.Column="5" Background="#c71806" Height="145" VerticalAlignment="Top" Padding="0" Style="{StaticResource sddd}" Click="Button_Click" >
    <Image Source="assets/rightArrow.png" Width="50" Height="50"></Image>
  </Button>

</Grid>

private void Button_Click(object sender, RoutedEventArgs e)
{
    chkScrollViewer.ChangeView(3, null,null,true);           
}

Answer 1

ScrollViewer在按钮单击UWp时无法水平工作

问题是ChangeView方法仅用于更改具有指定偏移量的视图。如果您通过固定的horizontalOffset，它将滚动到匹配位置。如果您想每次滚动。您可以参考以下内容。

private double horizontalOffset;
private void Button_Click(object sender, RoutedEventArgs e)
{
    horizontalOffset += 10;
    chkScrollViewer.ChangeView(horizontalOffset, null, null, true);
}

ScrollViewer无法在按钮上水平工作单击UWp

1 个答案: