Costom ScrollViewer Wpf

I have made a slider that looks like the image below but I want to know if it’s possible to make the exact same thing but vertical and a ScrollViewer instead of a slider. I have tried a lot but not succeeded. Need it for a Listbox. I like that design a lot
No description
6 Replies
Casianm8
Casianm82mo ago
Hey! U can try using Orientation="Vertical" @Martina Nordkvist
Martina Nordkvist
Alright but that does not work.
Casianm8
Casianm82mo ago
Can u send me you'r part from .xaml code? One moment, i will post code in 5 min Done - First, you need to create a Grid with two columns: one for the ScrollViewer containing the ListBox, and one to display the Slider. - The horizontal ScrollBar should be disabled since we don’t need it, and the vertical ScrollBar should be hidden. - You'll set it so that when the MainWindow is loaded, the Slider's maximum value is set to match the scrollable height of the ScrollViewer. Here is my xaml code for u
<Grid>
<Grid.ColumnDefinitions>
<!-- Here will be ListBox with ScrollViewer-->
<ColumnDefinition Width="300"/> // 0
<!-- Here will be Slider Vertical -->
<ColumnDefinition Width="20"/> // 1
<!-- Used just for another Content-->
<ColumnDefinition Width="*"/> // 2
</Grid.ColumnDefinitions>

<Grid Grid.Column="1">
<Slider x:Name="VerticalSlider" Minimum="0" Maximum="1" Orientation="Vertical"
HorizontalAlignment="Center" Margin="0,20,0,20" ValueChanged="VerticalSlider_ValueChanged"/>
</Grid>

<Grid Grid.Column="0">
<ScrollViewer x:Name="scrollViewer" VerticalScrollBarVisibility="Hidden"
HorizontalScrollBarVisibility="Disabled">
<ListBox x:Name="listBox" ScrollViewer.VerticalScrollBarVisibility="Hidden">
<!-- Elementele din ListBox -->
<ListBoxItem Content="Item 1" Height="60" />
<ListBoxItem Content="Item 2" Height="60" />
<ListBoxItem Content="Item 3" Height="60" />
<ListBoxItem Content="Item 4" Height="60" />
<ListBoxItem Content="Item 5" Height="60" />
<ListBoxItem Content="Item 6" Height="60" />
<ListBoxItem Content="Item 7" Height="60" />
<ListBoxItem Content="Item 8" Height="60" />
<ListBoxItem Content="Item 9" Height="60" />
<ListBoxItem Content="Item 10" Height="60" />
</ListBox>
</ScrollViewer>
</Grid>

</Grid>
</Window>
<Grid>
<Grid.ColumnDefinitions>
<!-- Here will be ListBox with ScrollViewer-->
<ColumnDefinition Width="300"/> // 0
<!-- Here will be Slider Vertical -->
<ColumnDefinition Width="20"/> // 1
<!-- Used just for another Content-->
<ColumnDefinition Width="*"/> // 2
</Grid.ColumnDefinitions>

<Grid Grid.Column="1">
<Slider x:Name="VerticalSlider" Minimum="0" Maximum="1" Orientation="Vertical"
HorizontalAlignment="Center" Margin="0,20,0,20" ValueChanged="VerticalSlider_ValueChanged"/>
</Grid>

<Grid Grid.Column="0">
<ScrollViewer x:Name="scrollViewer" VerticalScrollBarVisibility="Hidden"
HorizontalScrollBarVisibility="Disabled">
<ListBox x:Name="listBox" ScrollViewer.VerticalScrollBarVisibility="Hidden">
<!-- Elementele din ListBox -->
<ListBoxItem Content="Item 1" Height="60" />
<ListBoxItem Content="Item 2" Height="60" />
<ListBoxItem Content="Item 3" Height="60" />
<ListBoxItem Content="Item 4" Height="60" />
<ListBoxItem Content="Item 5" Height="60" />
<ListBoxItem Content="Item 6" Height="60" />
<ListBoxItem Content="Item 7" Height="60" />
<ListBoxItem Content="Item 8" Height="60" />
<ListBoxItem Content="Item 9" Height="60" />
<ListBoxItem Content="Item 10" Height="60" />
</ListBox>
</ScrollViewer>
</Grid>

</Grid>
</Window>
Casianm8
Casianm82mo ago
No description
Casianm8
Casianm82mo ago
In the backend code (xaml.cs), make sure to have the following: - At the top of MainWindow, add the Loaded event to set the slider’s maximum value based on the scrollable content.
<Window x:Class="Echofy_Music_Player.View.Test"
//YOU'R CONTENT WITH
Loaded="Window_Loaded">
<Window x:Class="Echofy_Music_Player.View.Test"
//YOU'R CONTENT WITH
Loaded="Window_Loaded">
private void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
// Setăm valoarea maximă a slider-ului în funcție de conținutul care poate fi derulat
VerticalSlider.Maximum = scrollViewer.ScrollableHeight;
}
private void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
// Setăm valoarea maximă a slider-ului în funcție de conținutul care poate fi derulat
VerticalSlider.Maximum = scrollViewer.ScrollableHeight;
}
- Also, include an event called VerticalSlider_ValueChanged to sync the slider’s current position with the scrolling position.
private void VerticalSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
scrollViewer.ScrollToVerticalOffset(e.NewValue);
}
private void VerticalSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
scrollViewer.ScrollToVerticalOffset(e.NewValue);
}
@Martina Nordkvist
Martina Nordkvist
can i call you and show you?
Want results from more Discord servers?
Add your server