Move the button horizontally in Grid of WPF app

Question

My WPF app has many buttons and they are ordered on 1 row as the below picture:

What I want: When user click the left arrow, button will move left 1 column as below and and vice versa for the right arrow

Could I do this in WPF? Any help would be appreciated on this.

Answer 1

You need to adjust the size of the control based on your view.

private void leftBtn_Click(object sender, RoutedEventArgs e)
{
    scrollView.ScrollToHorizontalOffset(scrollView.HorizontalOffset - 220);
}

private void rightBtn_Click(object sender, RoutedEventArgs e)
{
    scrollView.ScrollToHorizontalOffset(scrollView.HorizontalOffset + 220);

}

 <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="auto"/>
    </Grid.ColumnDefinitions>
    <Button x:Name="leftBtn" Grid.Column="0" Margin="5" Click="leftBtn_Click">Left</Button>
    <ScrollViewer Width="660" x:Name="scrollView" Grid.Column="1" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden">
            <StackPanel Orientation="Horizontal">
                <Button Margin="10" Width="200">Button1</Button>
                <Button Margin="10" Width="200">Button2</Button>
                <Button Margin="10" Width="200">Button3</Button>
                <Button Margin="10" Width="200">Button4</Button>
                <Button Margin="10" Width="200">Button5</Button>
                <Button Margin="10" Width="200">Button6</Button>
            </StackPanel>
        </ScrollViewer>
    <Button x:Name="rightBtn" Grid.Column="2" Margin="5" Click="rightBtn_Click">Right</Button>
    
</Grid>