Wednesday, April 3, 2013

Silverlight listbox item selection binding with dynamic border setting

The requirement needs the listboxitem with a dynamic border by a binding property. Once I implemented this by adding a border tag over the ContentPresenter, it automatically overwrote the default selection border. That means when you click the item from listbox, there's nothing happening with the border. It took me a few of days to fight on the dynamic borders of Silverlight listbox items. Finally it comes up with the VSM (VisualStateManager) solution as following code. One special thing that happening on my case is if you click once to select the item, the first item would be always auto selected, you'd have to click other item or other area once again to dime the first item border selection. The fix will be commenting the Storeboard of Focused VisualState. Here shows you the entire code.

(Notice: The 2 converters by binding Tag were my custom function to give the BorderBrush a custom color by listbox sourceitem property, it will need to implement IValueConverter as a reference class as the bottom code)

Xaml:

<ListBox x:Name="SKUImageListBox" Height="250" Width="600" SelectionMode="Single" HorizontalContentAlignment="Left" TabIndex="1"

HorizontalAlignment="Left" VerticalAlignment="Top" Margin="3,2,115,0" DataContext="{Binding}">

<ListBox.ItemContainerStyle>

<Style TargetType="ListBoxItem">

<Setter Property="Padding" Value="3" />

<Setter Property="HorizontalContentAlignment" Value="Left" />

<Setter Property="VerticalContentAlignment" Value="Top" />

<Setter Property="Background" Value="Transparent" />

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="TabNavigation" Value="Local" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="ListBoxItem">

<Grid Background="{TemplateBinding Background}">

<vsm:VisualStateManager.VisualStateGroups>

<vsm:VisualStateGroup x:Name="CommonStates">

<vsm:VisualState x:Name="Normal" >

<Storyboard>

<DoubleAnimation Storyboard.TargetName="BorderSquare" Storyboard.TargetProperty="Opacity" Duration="0" To=".50"/>

</Storyboard>

</vsm:VisualState>

<vsm:VisualState x:Name="MouseOver">

<Storyboard>

<DoubleAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity" Duration="0" To=".35"/>

</Storyboard>

</vsm:VisualState>

<vsm:VisualState x:Name="Disabled">

<Storyboard>

<DoubleAnimation Storyboard.TargetName="ContentPresenterImg" Storyboard.TargetProperty="Opacity" Duration="0" To=".55" />

</Storyboard>

</vsm:VisualState>

</vsm:VisualStateGroup>

<vsm:VisualStateGroup x:Name="SelectionStates">

<vsm:VisualState x:Name="Unselected" />

<vsm:VisualState x:Name="Selected">

<Storyboard>

<DoubleAnimation Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity" Duration="0" To=".75"/>

</Storyboard>

</vsm:VisualState>

</vsm:VisualStateGroup>

<vsm:VisualStateGroup x:Name="FocusStates">

<vsm:VisualState x:Name="Focused">

<!--<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>-->

</vsm:VisualState>

<vsm:VisualState x:Name="Unfocused"/>

</vsm:VisualStateGroup>

</vsm:VisualStateManager.VisualStateGroups>

<Rectangle x:Name="fillColor" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1" />

<Rectangle x:Name="fillColor2" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1" />

<Border x:Name="BorderSquare" Opacity="0" IsHitTestVisible="False" BorderBrush="{Binding Tag,Converter={StaticResource SquareImageBorderBrushConverter}}" BorderThickness="{Binding Tag,Converter={StaticResource SquareImageBorderThicknessConverter}}"/>

<ContentPresenter x:Name="ContentPresenterImg" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>

<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed" RadiusX="1" RadiusY="1" />

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ListBox.ItemContainerStyle>

<ListBox.ItemsPanel>

<ItemsPanelTemplate>

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20"/>

</ItemsPanelTemplate>

</ListBox.ItemsPanel>

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Orientation="Horizontal">

<StackPanel Orientation="Vertical">

<Image Source="{Binding Path=Source}">

</Image>

</StackPanel>

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>


Converter:


Namespace Converters
    Public Class SquareBorderBrushConverter
        Implements IValueConverter

        Public Function Convert(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert
            Dim returnValue As String = String.Empty
            Dim img As New SkuOpsSvcRef.SKUImage
            Try
                If value IsNot Nothing Then
                    img = CType(value, SkuOpsSvcRef.SKUImage)
                    If Not img.IsSquare And Not img.IsNew Then
                        returnValue = "Red"
                    Else
                        returnValue = "Transparent"
                    End If
                Else
                    returnValue = String.Empty
                End If
            Catch
                returnValue = String.Empty
            End Try
            Return returnValue
        End Function

        Public Function ConvertBack(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.ConvertBack
            Return Nothing
        End Function
    End Class

End Namespace


Namespace Converters
    Public Class SquareBorderThicknessConverter
        Implements IValueConverter

        Public Function Convert(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert
            Dim returnValue As String = String.Empty
            Dim img As New SkuOpsSvcRef.SKUImage
            Try
                If value IsNot Nothing Then
                    img = CType(value, SkuOpsSvcRef.SKUImage)
                    If Not img.IsSquare Then
                        returnValue = "4"
                    Else
                        returnValue = "3"
                    End If
                Else
                    returnValue = String.Empty
                End If
            Catch
                returnValue = String.Empty
            End Try
            Return returnValue
        End Function

        Public Function ConvertBack(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.ConvertBack
            Return Nothing
        End Function
    End Class

End Namespace

Thursday, February 28, 2013

Silverlight Listbox Binding Image and Tag

It took me couple days to figure this out. The requirement needs me to show the images to the listbox. I do already have the ObservableCollection of Images to set as Item Source. Only way to get specified way is through some kind of style. Here I use background of ItemContainerStyle with converter to my custom highlighting on wanted images. Xaml Code follows:

<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  x:Class="SkuMaintain.SKUDetailUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:localFormatter="clr-namespace:SkuMaintain.SkuDetailFormatter" >


<UserControl.Resources>
<localFormatter:SquareBackgroundConverter x:Key="SquareImageConverter"/>
</UserControl.Resources>


<ListBox x:Name="SKUImageListBox" Height="250" Width="600" SelectionMode="Single"  HorizontalContentAlignment="Left" TabIndex="1"
HorizontalAlignment="Left" VerticalAlignment="Top" Margin="3,2,115,0" >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Background" Value="{Binding Tag,Converter={StaticResource SquareImageConverter}}"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Vertical">
<Image Source="{Binding Path=Source}"></Image>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Converter file definition (DetailFomatter.vb)


Imports System.Windows.Data
Imports System.IO

Namespace SkuDetailFormatter
    Public Class SquareBackgroundConverter
        Implements IValueConverter

        Public Function Convert(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert
            Dim returnValue As String = String.Empty
            Dim img As New SkuOpsSvcRef.SKUImage
            Try
                If value IsNot Nothing Then
                    img = CType(value, SkuOpsSvcRef.SKUImage)
                    If Not img.IsSquare Then
                        returnValue = "Red"
                    End If
                Else
                    returnValue = String.Empty
                End If
            Catch
                returnValue = String.Empty
            End Try
            Return returnValue
        End Function

        Public Function ConvertBack(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.ConvertBack
            Return Nothing
        End Function
    End Class
End Namespace

Wednesday, February 20, 2013

Regular Expression - Regex for numeric


    Public Function IsNumeric(ByVal inputStr As String) As Boolean
        Dim _isNumber As Regex = New Regex("(^[+-]?\d+(,?\d*)*\.?\d*([Ee][+-]\d*)?$)|(^[\(]?[\$]?[+-]?\d?(,?\d*)*\.\d+([Ee][+-]\d*)?[\)]?$)")
        Return _isNumber.Match(inputStr).Success
    End Function



    Public Function IsPositiveNumeric(ByVal inputStr As String) As Boolean
        Dim _isNumber As Regex = New Regex("(^[+]?\d+(,?\d*)*\.?\d*([Ee][+]\d*)?$)|(^[\(]?[\$]?[+]?\d?(,?\d*)*\.\d+([Ee][+]\d*)?[\)]?$)")
        Return _isNumber.Match(inputStr).Success
    End Function



    Public Function IsNegative(ByVal inputStr As String) As Boolean
        Dim _isNegativeNumber As Regex = New Regex("^[\(]?[\$]?[-]+\d+(,?\d*)*\.?\d*([Ee][-]+\d*)?[\)]?$|^[-]+[\(]?[\$]?\d+(,?\d*)*\.?\d*([Ee][-]+\d*)?[\)]?$")
        Return _isNegativeNumber.Match(inputStr).Success
    End Function


Silverlight Auto Focus on InputBox of TabItem when TabControl changed.


    Private Sub SkuTabControl_SelectionChanged(ByVal sender As Object, ByVal e As SelectionChangedEventArgs) Handles SkuTabControl.SelectionChanged
        If SkuTabControl.SelectedItem IsNot Nothing Then
            Dim itemTab As TabItem = SkuTabControl.SelectedItem
            Dim itemGrid As Grid = itemTab.Content
            AddHandler itemGrid.Loaded, AddressOf itemGrid_Loaded
            'itemGrid.LoadedEvent()
        End If
    End Sub

    Private Sub itemGrid_Loaded(ByVal sender As Object, ByVal e As EventArgs)
        Dim itemTab As TabItem = SkuTabControl.SelectedItem
        Dim itemGrid As Grid = itemTab.Content
        Dim customInputBoxes = GetInputBoxControls(itemGrid).OfType(Of CustomTextBox.CustomTextBox)()
        Dim cTextBox As CustomTextBox.CustomTextBox
        For Each cTextBox In customInputBoxes.ToList
            If CType(cTextBox.Background, SolidColorBrush).Color = Color.FromArgb(255, 255, 255, 0) Then
                cTextBox.Focus()
                Exit For
            End If
        Next
    End Sub

    Private Function GetInputBoxControls(ByVal root As DependencyObject) As IEnumerable(Of DependencyObject)
        Try
            Dim customBoxList As New List(Of DependencyObject)()
            customBoxList.Add(root)
            For i As Integer = 0 To VisualTreeHelper.GetChildrenCount(root) - 1
                customBoxList.AddRange(GetInputBoxControls(VisualTreeHelper.GetChild(root, i)))
            Next i
            Return customBoxList
        Catch ex As Exception
            Return Nothing
        End Try
    End Function

Monday, January 14, 2013

Silverlight twoway binding helper

For real twoway binding on textbox of silverlight, you have to define a helper class and implement INotifyPropertyChanged


Partial Public Class SKUDetailUserControl
    Inherits UserControl
    Implements INotifyPropertyChanged


    ''Define multiple for two way mode
    Public Event PropertyChanged(ByVal sender As Object, ByVal e As PropertyChangedEventArgs) Implements INotifyPropertyChanged.PropertyChanged


Helper class:



    Public Class BindingHelper
        Public Shared Function GetUpdateSourceOnChange(obj As DependencyObject) As Boolean
            Return obj.GetValue(UpdateSourceOnChangeProperty)
        End Function
        Public Shared Sub SetUpdateSourceOnChange(obj As DependencyObject, value As Boolean)
            obj.SetValue(UpdateSourceOnChangeProperty, value)
        End Sub
        Public Shared ReadOnly UpdateSourceOnChangeProperty As DependencyProperty =
        DependencyProperty.RegisterAttached("UpdateSourceOnChange", GetType(Boolean), GetType(BindingHelper), New PropertyMetadata(False, AddressOf OnPropertyChanged))

        Private Shared Sub OnPropertyChanged(obj As DependencyObject, e As DependencyPropertyChangedEventArgs)
            Dim TxtBox As TextBox = obj
            If TxtBox IsNot Nothing Then
                If e.NewValue Then
                    AddHandler TxtBox.TextChanged, AddressOf OnTextChanged
                Else
                    RemoveHandler TxtBox.TextChanged, AddressOf OnTextChanged
                End If
            End If
        End Sub
        Private Shared Sub OnTextChanged(sender As Object, e As TextChangedEventArgs)
            Dim TxtBox As TextBox = sender
            If TxtBox IsNot Nothing Then
                Dim be = TxtBox.GetBindingExpression(TextBox.TextProperty)
                If be IsNot Nothing Then
                    be.UpdateSource()
                End If
            End If
        End Sub
    End Class


XAML :