CODEWITHSUNDEEP
uwpscrollviewer
vivek sharma
vivek sharma

Reputation: 1

ScrollViewer not working horizontally on button click UWp

I am trying it for two days but nothing worked for me. I am using ScrollViewer inside a grid in UWP window 10. What I am trying to do is to scroll horizontally ob button click on both side of the scrollviewer. Any help would be greatly appreciated. Thanks in advance!

Below is my xaml code.

<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);           
}

Upvotes: 0

Views: 58

Answers (1)

Nico Zhu
Nico Zhu

Reputation: 32775

ScrollViewer not working horizontally on button click UWp

The problem is ChangeView method only using to change view with specified offsets. If you pass fixed horizontalOffset, it will scroll to the match position. if you want to scroll each time. you could refer the following.

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

Upvotes: 0

Related Questions