I'm trying to make a TextBox template and I need to include a ScrollViewer in the template - basically I want to add some content (like line numbers) that needs to scroll along with the normal text.
The default template for the TextBox is like this:
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="1" Opacity="1">
<Grid>
<Border x:Name="ReadOnlyVisualElement" Background="#5EC9C9C9" Opacity="0"/>
<Border x:Name="MouseOverBorder" BorderBrush="Transparent" BorderThickness="1">
<ScrollViewer x:Name="ContentElement" BorderThickness="0" IsTabStop="False" Padding="{TemplateBinding Padding}"/>
</Border>
</Grid>
</Border>
If I change the ContentElement from ScrollViewer to Border, for example, the TextBox behaves normally - i just lose the scrolling ability.
Now, if I wrap the ContentElement with a ScrollViewer, it no longer displays the caret and selection - if you type, it still gets updated though.
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="1" Opacity="1">
<Grid>
<Border x:Name="ReadOnlyVisualElement" Background="#5EC9C9C9" Opacity="0"/>
<Border x:Name="MouseOverBorder" BorderBrush="Transparent" BorderThickness="1">
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" >
<Border x:Name="ContentElement" BorderThickness="0" Padding="{TemplateBinding Padding}" />
</ScrollViewer>
</Border>
</Grid>
</Border>
Any idea why this happens and how can I fix it?
Just a shot in the dark, as I have not verified...but the control may be looking for a TemplatePart named ContentElement of type ScrollViewer.
Related
i have made a ribbonsplitbutton. But i have no idea how i change the background color of the togglebutton used in ribbon split button.
The code i have done so far is this
<Custom:RibbonSplitButton LargeImageSource="Images\folder.jpg" Label="Open" HorizontalAlignment="Left" VerticalAlignment="Top" >
<Custom:RibbonMenuItem Header="find" ImageSource="Images\find.png"/>
<Custom:RibbonMenuItem Header="copy" ImageSource="Images\copy.png"/>
<Custom:RibbonMenuItem Header="calculator" ImageSource="Images\calculator.png"/>
<Custom:RibbonMenuItem Header="setting" ImageSource="Images\Setting.png"/>
<Custom:RibbonMenuItem Header="calender" ImageSource="Images\calender.png"/>
<Custom:RibbonMenuItem Header="print" ImageSource="Images\print.png"/>
</Custom:RibbonSplitButton>
Can someone help me to create a style for togglebutton.
you can change the style of toggle button in ribbon split button by changing the style of the part_toggle button
the sample code of style is
<Border x:Name="UnderlayBorder" Background="{Binding MouseOverBackground, RelativeSource={RelativeSource TemplatedParent}}" Opacity="0.5" Visibility="Collapsed"/>
<Custom:RibbonToggleButton x:Name="PART_ToggleButton" BorderBrush="{TemplateBinding BorderBrush}" Background="Transparent" ToolTipService.BetweenShowDelay="0" CheckedBackground="{TemplateBinding CheckedBackground}" ClickMode="Press" CornerRadius="0,2,2,0" CheckedBorderBrush="{TemplateBinding CheckedBorderBrush}" FocusedBackground="{TemplateBinding FocusedBackground}" FocusedBorderBrush="{TemplateBinding FocusedBorderBrush}" FocusVisualStyle="{x:Null}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" ToolTipService.InitialShowDelay="900" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Label="{TemplateBinding Label}" MouseOverBackground="{TemplateBinding MouseOverBackground}" MouseOverBorderBrush="{TemplateBinding MouseOverBorderBrush}" PressedBorderBrush="{TemplateBinding PressedBorderBrush}" Padding="{TemplateBinding Padding}" PressedBackground="{TemplateBinding PressedBackground}" Custom:RibbonTwoLineText.PathData="M0,0L2.5,3 5,0z" Style="{x:Null}" ToolTipService.ShowDuration="20000" ToolTipDescription="{TemplateBinding DropDownToolTipDescription}" ToolTipFooterDescription="{TemplateBinding DropDownToolTipFooterDescription}" ToolTipImageSource="{TemplateBinding DropDownToolTipImageSource}" ToolTipFooterTitle="{TemplateBinding DropDownToolTipFooterTitle}" ToolTipFooterImageSource="{TemplateBinding DropDownToolTipFooterImageSource}" ToolTipTitle="{TemplateBinding DropDownToolTipTitle}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
<Custom:RibbonToggleButton.ControlSizeDefinition>
<Custom:RibbonControlSizeDefinition IsLabelVisible="False" ImageSize="Collapsed"/>
</Custom:RibbonToggleButton.ControlSizeDefinition>
<Custom:RibbonToggleButton.Template>
<ControlTemplate TargetType="{x:Type Custom:RibbonToggleButton}">
<Grid x:Name="MainGrid" SnapsToDevicePixels="True">
<Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}"/>
<Border x:Name="MiddleBorder" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" CornerRadius="{TemplateBinding CornerRadius}">
<Border x:Name="InnerBorder" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" CornerRadius="{TemplateBinding CornerRadius}" Padding="{TemplateBinding Padding}">
<StackPanel x:Name="StackPanel" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Image x:Name="PART_Image" RenderOptions.BitmapScalingMode="NearestNeighbor" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Height="32" Margin="{DynamicResource {ComponentResourceKey ResourceId=LargeImageMargin, TypeInTargetAssembly={x:Type Custom:Ribbon}}}" Source="{TemplateBinding LargeImageSource}" VerticalAlignment="Center" Width="32"/>
<Grid x:Name="Grid" HorizontalAlignment="Left" VerticalAlignment="Top" >
<Custom:RibbonTwoLineText x:Name="TwoLineText" Custom:RibbonTwoLineText.HasTwoLines="{TemplateBinding Custom:RibbonTwoLineText.HasTwoLines}" HorizontalAlignment="Center" LineStackingStrategy="BlockLineHeight" LineHeight="5" Margin="1,1,1,0" PathFill="{TemplateBinding Foreground}" Custom:RibbonTwoLineText.PathData="{TemplateBinding Custom:RibbonTwoLineText.PathData}" TextAlignment="Center" Text="{TemplateBinding Label}" VerticalAlignment="Top"/>
</Grid>
</StackPanel>
</Border>
</Border>
</Grid>
I have a Custom Control containing a Canvas placed inside a Viewbox. This allows me to resize the control and everything inside the Canvas scales beautifully.
Much to my annoyance a requirement to stop any scaling of text within the control has reared its head. All other controls (mainly graphics) should scale, but not text. Text should move to the correct place upon resize, but the font should remain the same.
Any ideas how to do this?
After much head scratching I found a relatively simple workaround.
As I'm not going to need to click on any text in the control I've put all graphics inside one canvas with zOrder 1 and all text in another with zorder 0. Then I put them inside a grid so they overlap:
<ControlTemplate TargetType="{x:Type local:ContourPlot}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Viewbox>
<Border BorderBrush="Black" BorderThickness="1">
<Canvas x:Name="cvGraph" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" >
<Rectangle Canvas.Left="40" Canvas.Top="31" Width="48" Height="41" Fill="AliceBlue"/>
</Canvas>
</Border>
</Viewbox>
<Canvas Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" >
<Label x:Name="lblTest" Canvas.Left="0" Canvas.Top="10" Content="Label" FontSize="12" />
</Canvas>
</Grid>
</Border>
</ControlTemplate>
Is there a way to have a control inside silverlight scrollviewer that does not scroll? For example I would like the similar behavior as you get when pinning a column in a datagrid so that I can have a footer to my listbox but still have it fit inside the scroll bars (looks better that way). here is a screen shot of what I have. The control I want inside is at the bottom.
Per request here is my control template for the listbox. I have a template for scrollviewer to but could not find a way to tell it to leave the border at bottom when scrolling everything else. If you look at the template I have the border outside of the scrollviewer to keep it from being scrolled but would like it to fit inside the scrollbar because I think it looks better.
<ControlTemplate TargetType="telerik:RadListBox">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border BorderThickness="0" Background="{StaticResource ListBoxBackground}" Grid.RowSpan="2">
</Border>
<ScrollViewer x:Name="PART_ScrollViewer"
Margin="0"
IsTabStop="False"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
TabNavigation="{TemplateBinding TabNavigation}"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Style="{StaticResource ScrollViewerStyle}">
<ItemsPresenter/>
</ScrollViewer>
<Border Grid.Row="1" Background="Transparent" BorderBrush="Tan" BorderThickness="1" Height="50">
<TextBlock Text="Dont scroll but keep in scrollviewer" TextWrapping="Wrap"/>
</Border>
<ContentPresenter x:Name="dragVisualPlaceholder" Visibility="Collapsed" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
</Grid>
</ControlTemplate>
the above tree view is looking with shadow effect on top left and left. I need a single thick line .
my xaml is
Margin="0,0,0,2" BorderBrush="Black" BorderThickness="1"
I need a single line but not a shodow. Can you please help me how to do it ?
One way to do it is to create simple Template for your TreeView like so:
<TreeView BorderBrush="Black" BorderThickness="1" Background="Beige">
<TreeView.Template>
<ControlTemplate TargetType="{x:Type TreeView}">
<Border
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer>
<ItemsPresenter/>
</ScrollViewer>
</Border>
</ControlTemplate>
</TreeView.Template>
</TreeView>
You can try this to get rid of treeview border and apply your own border:
<Border BorderThickness="1" BorderBrush="Black">
<TreeView BorderBrush="Transparent" BorderThickness="0"
</TreeView>
</Border>
i replace the ContentPresenter in the DataGridCell's Template with a TextBlock an now i search for the correct Binding to the content.
The normal way is Text="{TemplateBinding Content} for the TextBlock - it doesn't work. Also Text="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Content, Mode=TwoWay}" doesn't work correct.
Any other ideas?
Suppose you have changed the DataGridCell Template to the following
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<TextBlock Text="{Binding}"/>
<!--<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> -->
</Border>
</ControlTemplate>
Since you removed the ContentPresenter, the DataGridCell has no way of displaying its Content. It's still there though. The DataGridCell.Content
is a TextBlock containing your original Text and the TextBlock in the Template is another.
So you'll get the correct Text by binding it to the Content.Text property of the TemplatedParent
<TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Content.Text}"/>
So, to sum it up. This works
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Content.Text}"/>
</Border>
</ControlTemplate>
The data context of the data grid cell should be the data itself. So the binding should simply be:
<TextBlock Text="{Binding}"/>