Saturday, October 12, 2024

ThumbToolTipValueConverter for Slider in VB

I recently was doing work with sliders in UWP and had to implement a ThumbToolTipValueConverter using VB. One problem I had was the example on that help site was rather complex given the implementation I imagined. But that happens a lot. 

Here is a simple example that takes values of zero-to-one and converts them to zero-to-a-hundred. The task is changing the opacity of a screen object -- the orange circle pictured below -- using a numeric range of 0-1, which is the slider value, but displaying a more user-friendly range of 0-100 in the slider tool tip box. 

We declare a class that implements IValueConverter. (Hitting enter after typing the "Implements IValueConverter" part of the code inside a valid class definition should autofill the implementation functions Convert and ConvertBack. ) In the Convert function, we put our conversion code. 

Then we declare a variable with the type of that class. In this case the class is called IVCMult_100, and our variable is called Converter1. It also has to be initialized using New, or it won't work. Then Converter1 is assigned to the ThumpToolTipValueConverter property of the slider after the page is created in the Loaded proc. 

Note: Because a starting value of 1 is assigned to the slider, Slider1, which differs from the absolute default of zero, this triggers the Value_Changed event. But the slider is created before the object whose opacity gets changed by it, so that call has to be avoided at that point in time, or a Not Found error will throw. That is why we use a simple boolean test EventsOK to make sure all the page is loaded before we allow manipulation of the opacity of that object. 

Code:

<Grid>
    <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Margin="50,50,0,0" Orientation="Horizontal" BorderThickness="1,1,1,1" Background="Black" BorderBrush="White" Padding="6,6,10,6">
        <StackPanel>
            <TextBlock Text="Opacity" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" Foreground="White"/>
            <Slider x:Name="Slider1" Maximum="1" TickFrequency="0.2" StepFrequency="0.01" Width="250" Margin="10,10,10,0" Value="1" RequestedTheme="Dark"/>
        </StackPanel>
        <Border Width="1" Margin="0,0,10,0" Background="White"/>
        <Border x:Name="Border1" Width="100" Height="100" Background="#FFFF9800" BorderThickness="2,2,2,2" CornerRadius="49,49,49,49" BorderBrush="White"/>
    </StackPanel>
</Grid>


Public NotInheritable Class MainPage
    Inherits Page

    Private Class IVCMult_100
        Implements IValueConverter

        Public Function Convert(value As Object, targetType As Type, parameter As Object, language As String) As Object Implements IValueConverter.Convert

            Dim Sn1 As Single = value * 100
            Return Sn1.ToString("0")

        End Function

        Public Function ConvertBack(value As Object, targetType As Type, parameter As Object, language As String) As Object Implements IValueConverter.ConvertBack
            Throw New NotImplementedException()
        End Function

    End Class

    Private Converter1 As IVCMult_100
    Private EventsOK As Boolean

    Private Sub Slider1_ValueChanged(sender As Object, e As RangeBaseValueChangedEventArgs) Handles Slider1.ValueChanged
        
        If EventsOK Then
            Border1.Opacity = e.NewValue
        End If

    End Sub

    Private Sub MainPage_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded

        EventsOK = True

        Converter1 = New IVCMult_100
        Slider1.ThumbToolTipValueConverter = Converter1

    End Sub

End Class