How to Customize Scrollviewer for TexBox Contorl

09-03-2008 3:00 AM |

I have a textBox and want to customize its default scrollviewer. Is there any way to customize diefault scrollviewer that appears with the text box(vertically and horzontally), when its AcceptReturn Propery is set to true? TextBox Style template, http://msdn.microsoft.com/en-us/library/cc645061%28VS.95%29.aspx, provided by microsoft does not contain any property to set scrollviewer style. Is there any other style template for texbox control that include scrollviewer property?

Re: How to Customize Scrollviewer for TexBox Contorl

09-03-2008 3:33 AM |

I don't think for textbox or TextBlock even scrollViewer is coming even after specifying Horizontal and vertical scroll bar visibility......(If i am wrong correct me)...

That's why You are not able to get that in its Style Template..

Re: How to Customize Scrollviewer for TexBox Contorl

09-03-2008 3:45 AM |

Scrollviewers(vertical and horizontal) are comming with TextBox control. please try the following simple XAML of TexBox control. and enter text in the textbox scrollviewer will be shown when text increase from the height, 80, and width, 200.

<TextBox Canvas.Left="300" Canvas.Top="200" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Height="80" x:Name="tb123" AcceptsReturn="True" Width="200" />

 I want to know the way to customize this scrollveiwer....

Re: How to Customize Scrollviewer for TexBox Contorl

09-03-2008 4:13 AM |

Hi,

I have tried .

What i did in created a Templated For Scroll viewer and when i edited template of textBox then i applied Same Style template for Text box scroll viewer.

I am Pasting that code.

If you Are having any doubt feel free to ask..My design is not that much good so you Can modify this.

//Paste this in App.Xaml Resource Section...

<Application.Resources>

<Style x:Key="ScrollViewerStyle1" TargetType="ScrollViewer">

<Setter Property="IsEnabled" Value="true"/>

<Setter Property="Foreground" Value="#FF000000"/>

<Setter Property="BorderBrush" Value="#FFA4A4A4"/>

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

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

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

<Setter Property="Cursor" Value="Arrow"/>

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

<Setter Property="TextWrapping" Value="NoWrap"/>

<Setter Property="FontSize" Value="11"/>

<Setter Property="VerticalScrollBarVisibility" Value="Visible"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="ScrollViewer">

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1">

<Grid Background="{TemplateBinding Background}">

<Grid.RowDefinitions>

<RowDefinition Height="*"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<Rectangle Grid.Column="1" Grid.Row="1" Fill="#FFE9E9E9"/>

<ScrollContentPresenter Cursor="{TemplateBinding Cursor}" Margin="{TemplateBinding Padding}" x:Name="ScrollContentPresenter" Background="{TemplateBinding Background}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Grid.Column="0" Grid.Row="0" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" TextAlignment="{TemplateBinding TextAlignment}" TextDecorations="{TemplateBinding TextDecorations}" TextWrapping="{TemplateBinding TextWrapping}"/>

<ScrollBar Cursor="Arrow" HorizontalAlignment="Left" Margin="0,0,0,0" x:Name="VerticalScrollBar" Width="18" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Grid.Row="0" Orientation="Vertical" ViewportSize="{TemplateBinding ViewportHeight}" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Value="{TemplateBinding VerticalOffset}" d:LayoutOverrides="Width"/>

<ScrollBar Cursor="Arrow" Height="18" Margin="-189,-1,-388,68" x:Name="HorizontalScrollBar" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Grid.Column="1" Grid.ColumnSpan="1" Orientation="Horizontal" ViewportSize="{TemplateBinding ViewportWidth}" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Value="{TemplateBinding HorizontalOffset}" d:LayoutOverrides="VerticalAlignment"/>

</Grid>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Application.Resources>

///Paste this in Your Page.Xaml...

<UserControl x:Class="ListBoxSample.Page"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

<UserControl.Resources>

<Style x:Key="TextBoxStyle1" TargetType="TextBox">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="TextBox">

<Grid x:Name="RootElement">

<Grid.Resources>

<Storyboard x:Key="Normal State">

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

<Storyboard x:Key="Focused State">

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</Grid.Resources>

<ScrollViewer x:Name="ContentElement" Style="{StaticResource ScrollViewerStyle1}"/>

<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="False" Opacity="0" StrokeThickness="2" RadiusX="1" RadiusY="1" VerticalAlignment="Stretch" Margin="0,0,0,0">

<Rectangle.Stroke>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFA9B9C5" Offset="0"/>

<GradientStop Color="#FF668499" Offset="0.325"/>

<GradientStop Color="#FF244E6D" Offset="0.325"/>

<GradientStop Color="#FF4F7189" Offset="1"/>

</LinearGradientBrush>

</Rectangle.Stroke>

</Rectangle>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">

</UserControl>

Re: How to Customize Scrollviewer for TexBox Contorl

09-03-2008 4:13 AM |

Hi,

I have tried .

What i did in created a Templated For Scroll viewer and when i edited template of textBox then i applied Same Style template for Text box scroll viewer.

I am Pasting that code.

If you Are having any doubt feel free to ask..My design is not that much good so you Can modify this.

//Paste this in App.Xaml Resource Section...

<Application.Resources>

<Style x:Key="ScrollViewerStyle1" TargetType="ScrollViewer">

<Setter Property="IsEnabled" Value="true"/>

<Setter Property="Foreground" Value="#FF000000"/>

<Setter Property="BorderBrush" Value="#FFA4A4A4"/>

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

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

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

<Setter Property="Cursor" Value="Arrow"/>

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

<Setter Property="TextWrapping" Value="NoWrap"/>

<Setter Property="FontSize" Value="11"/>

<Setter Property="VerticalScrollBarVisibility" Value="Visible"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="ScrollViewer">

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1">

<Grid Background="{TemplateBinding Background}">

<Grid.RowDefinitions>

<RowDefinition Height="*"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<Rectangle Grid.Column="1" Grid.Row="1" Fill="#FFE9E9E9"/>

<ScrollContentPresenter Cursor="{TemplateBinding Cursor}" Margin="{TemplateBinding Padding}" x:Name="ScrollContentPresenter" Background="{TemplateBinding Background}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Grid.Column="0" Grid.Row="0" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" TextAlignment="{TemplateBinding TextAlignment}" TextDecorations="{TemplateBinding TextDecorations}" TextWrapping="{TemplateBinding TextWrapping}"/>

<ScrollBar Cursor="Arrow" HorizontalAlignment="Left" Margin="0,0,0,0" x:Name="VerticalScrollBar" Width="18" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Grid.Row="0" Orientation="Vertical" ViewportSize="{TemplateBinding ViewportHeight}" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Value="{TemplateBinding VerticalOffset}" d:LayoutOverrides="Width"/>

<ScrollBar Cursor="Arrow" Height="18" Margin="-189,-1,-388,68" x:Name="HorizontalScrollBar" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Grid.Column="1" Grid.ColumnSpan="1" Orientation="Horizontal" ViewportSize="{TemplateBinding ViewportWidth}" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Value="{TemplateBinding HorizontalOffset}" d:LayoutOverrides="VerticalAlignment"/>

</Grid>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Application.Resources>

///Paste this in Your Page.Xaml...

<UserControl x:Class="ListBoxSample.Page"

Width="400" Height="300" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

<UserControl.Resources>

<Style x:Key="TextBoxStyle1" TargetType="TextBox">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="TextBox">

<Grid x:Name="RootElement">

<Grid.Resources>

<Storyboard x:Key="Normal State">

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

<Storyboard x:Key="Focused State">

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</Grid.Resources>

<ScrollViewer x:Name="ContentElement" Style="{StaticResource ScrollViewerStyle1}"/>

<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="False" Opacity="0" StrokeThickness="2" RadiusX="1" RadiusY="1" VerticalAlignment="Stretch" Margin="0,0,0,0">

<Rectangle.Stroke>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFA9B9C5" Offset="0"/>

<GradientStop Color="#FF668499" Offset="0.325"/>

<GradientStop Color="#FF244E6D" Offset="0.325"/>

<GradientStop Color="#FF4F7189" Offset="1"/>

</LinearGradientBrush>

</Rectangle.Stroke>

</Rectangle>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">

</UserControl>