mercredi 20 juin 2018

Enlarge the radiobutton and checkbox bullet binding with Text size

The radio button and checkbox will be adding to window dynamically which based from how many data will be on database.

I have try some approach but cannot get what I need. Below are the code that will be perform to add either radio button or checkbox:-

private void ScreenSubList_Loaded(object sender, RoutedEventArgs e)
{
    try
    {
        strSubList LastGroupName = strSubList.Empty;
        foreach (var SubList in ProductSubList)
        {
            StackPanel StackGroup = new StackPanel() { Orientation = Orientation.Vertical };
            if (SubList.GroupName != LastGroupName)
            {
                Label LabelGroupName = new Label() { Content = SubList.GroupName.ToUpper() };
                ScaleTransform ElementScaleTransform = new ScaleTransform(6, 6);
                LabelGroupName.RenderTransform = ElementScaleTransform;
                StackGroup.Children.Add(LabelGroupName);
                LastGroupName = SubList.GroupName;
            }

            if (SubList.GroupType == 0)
            {
                RadioButton rb = new RadioButton();
                if (SubList.SubListItem != null)
                {
                    StackPanel StackItem = new StackPanel() { Orientation = Orientation.Horizontal };
                    foreach (var SubListitem in SubList.SubListItem)
                    {
                        rb.Tag = SubListitem.ItemID;
                        rb.Name = "SubList" + SubListitem.ItemID;
                        rb.Content = SubListitem.ItemName;
                        rb.HorizontalContentAlignment = HorizontalAlignment.Left;
                        rb.VerticalContentAlignment = VerticalAlignment.Center;
                        rb.GroupName = SubList.GroupName;
                        ScaleTransform ElementScaleTransform = new ScaleTransform(5, 5);
                        rb.RenderTransform = ElementScaleTransform;
                        StackGroup.Children.Add(rb);
                    }
                }
            }
            else if (SubList.GroupType == 1)
            {
                CheckBox cbx = new CheckBox();
                if (SubList.SubListItem != null)
                {
                    StackPanel StackItem = new StackPanel() { Orientation = Orientation.Horizontal };
                    foreach (var SubListitem in SubList.SubListItem)
                    {
                        cbx.Tag = SubListitem.ItemID;
                        cbx.Name = "SubList" + SubListitem.ItemID;
                        cbx.Content = SubListitem.ItemName;
                        cbx.HorizontalContentAlignment = HorizontalAlignment.Left;
                        cbx.VerticalContentAlignment = VerticalAlignment.Center;
                        ScaleTransform ElementScaleTransform = new ScaleTransform(5, 5);
                        cbx.RenderTransform = ElementScaleTransform;
                        StackGroup.Children.Add(cbx);
                    }
                }
            }
            ScreenSubListredient.StackSubList.Children.Add(StackGroup);
        }
    }
    catch (Exception ex)
    {
        App.LogEvents($"Exception on ScreenSubList_Loaded. Message-{ex.Message}. Stack Trace-{ex.StackTrace}", System.Diagnostics.EventLogEntryType.Error);
    }
}

I also play around with Blend to see the outcome from what I have test. Some of the test are:- 1. ScaleTransform the radiobutton and checkbox before adding to stackpanel 2. Group default radiobutton and checkbox into view.

Problem on the testing:

  1. ScaleTransform cannot stack to stackpanel accordingly
  2. Viewbox is having different size depend on the text length. If radiobutton or checkbox got lesser text, it will going big to stretch inside stackpanel. Manually adjusting the width and height make the viewbox and content look distort and will be a lot of work to calculate the Width and Height that will view the text at same size.

Below are the image sample as the output: Microsoft Blend Designer Visual

  • On most left, I just change the text size, text bigger but bullet options still tiny.

  • On middle, the options using Viewbox. All font is at default size Segoe UI 9pt

  • On most right, the usage of ScaleTransform. It was likely the middle pointer is stack vertically on panel. And it's unsure how to control base from latest size of the radiobutton and checkbox since on Height & Width properties, it show the default size before Transform.

What I need is actually a radio button and check box that have it's bullet follow the size of the text. I've go through internet for this for a weeks but not find any solutions to my situations.




Aucun commentaire:

Enregistrer un commentaire