Vertical Textbox

This was one of the work I enjoyed a lot in Schneider. A POC on Vertical text.

I don't want to get into too much detail but I want to explain in brief the things which I thought was interesting even though it was not challenging.



At first, we were having a  text box with lot of features and heavily loaded. I worked on following .

• Vertical text
• Underline for both horizontal and vertical text.
• Shadow.

• For vertical text we used Layout Transform.

 <WrapPanel  x:Name="PART_TextItemDirection"  

                        Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TextBox}}, Path=Width}" 

                        Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TextBox}}, Path=Height}">

                         <WrapPanel.LayoutTransform>

                                                <RotateTransform Angle="90" />

                         </WrapPanel.LayoutTransform>

</WrapPanel>

• For Underline we used TextDecorations.Underline for horizontal text and TextDecorations.OverLine for vertical text. Over line means it will come over the top of the text.

<TextBlock.TextDecorations>

            <MultiBinding Converter="{StaticResource TextDecoratorConverter}">

                          <Binding RelativeSource="{RelativeSource            Mode=FindAncestor,AncestorType={x:Type TextBox}}" Path="TextDecorations" />

                           <Binding RelativeSource="{RelativeSource Mode=FindAncestor,AncestorType={x:Type TextBox}}" Path="Tag" />

            </MultiBinding>

</TextBlock.TextDecorations>

• This converter sets TextDecoration based on tag value. Tag Indicates whether it is vertical text or horizontal.
• We have used MultiBinding and hence converter inherits from IMultiValueConverter.

        public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {

            if (values != null && values.Length > 0 && values[0] != null)
            {            
                TextDecorationCollection tdColl = (TextDecorationCollection)values[0];          
                if (tdColl != null && tdColl.Count > 0)
                {
                    if (values[1].ToString() == "Vertical")
                    {
                        return TextDecorations.OverLine;
                    }
                    else
                    {
                        return TextDecorations.Underline;
                    }
                }
            }
            return null;
        }

• For Shadow we used the converters which returns DropShadowEffect.
• Since this is a single binding, converter inherits from IValueConverter.

 public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

        {

            Style dropShadowScrollViewerStyle = new Style(typeof(TextBlock));

            // If value is 100 shadow is there else no shadow

            string text = string.Empty;

            if (value.ToString() == "100")

            {

                return new DropShadowEffect { ShadowDepth = 4, Direction = 330, Color = Colors.Gray, Opacity = 0.5, BlurRadius = 4 };

            }

            else

            {

                return null;

            }  

        }

• We have set the UndoLimit to 100 if text has shadow otherwise 99. This is because true and false boolean value of shadow is our input and output is DropShadowEffect commented in below section.

 <TextBlock.Effect >
            <Binding RelativeSource="{RelativeSource Mode=FindAncestor,AncestorType={x:Type TextBox}}" Path="UndoLimit" Converter="{StaticResource TextShadowConverter}" />
             <!--<DropShadowEffect
                                         ShadowDepth="4"
                                         Direction="330"
                                         Color="Gray"
                                         Opacity="0.5"
                                         BlurRadius="4"/>-->          
</TextBlock.Effect>

Download Code here