We Keep Coding

Ticks in slider is not showing when style is given

Ticks are showing if I gave without style. But if i added styles to Slider, ticks is not showing.
Expected Style
Style given for Slider
<Style x:Key="SliderRepeatButton" TargetType="RepeatButton">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border BorderThickness="1" BorderBrush="#c3c3c3" Background="#c3c3c3" Height="3"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SliderRepeatButton1" TargetType="RepeatButton">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border SnapsToDevicePixels="True" Background="#e94480" BorderThickness="1" BorderBrush="#e94480" Height="3"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SliderThumb" TargetType="Thumb">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Ellipse Height="13" Width="13" Fill="#e94480"></Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="Slider" TargetType="Slider">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TickBar Visibility="Visible" Grid.Row="0" Fill="Red" Placement="Bottom" VerticalAlignment="Bottom" Height="10" Width="5" />
<Track Grid.Row="1" x:Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButton1}" Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButton}" Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>
<Style x:Key="Horizontal_Slider" TargetType="Slider">
<Setter Property="Focusable" Value="False"/>
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="MinHeight" Value="21" />
<Setter Property="MinWidth" Value="104" />
<Setter Property="Template" Value="{StaticResource Slider}" />
</Trigger>
</Style.Triggers>
</Style>
<Slider IsSnapToTickEnabled="True" VerticalAlignment="Bottom" Name="SliderProgress" Value="0" Height="40" Thumb.DragCompleted="prog_DragCompleted" PreviewMouseLeftButtonDown="prog_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="prog_PreviewMouseLeftButtonUp" Margin="20,0,20,10" Style="{StaticResource Horizontal_Slider}"/>
Added Ticks in cs file. Ticks will be added according to the duration of the videos added in the list.
SliderProgress.Ticks.Add(totoalDuration);
How to achieve expected slider style?
Any idea why ticks are not displaying?

Try to remove the width of the TickBar

Why is my ScrollViewer's repeatbutton white at the bottom?

So I am curious to why the scrollviewers repeatbutton at the bottom is white, it should be transparent, I didnt notice this until I resized my scrollviewer to fit perfectly, how do I change it's color to transparent?
I was looking throught the
RepeatButton part of the style and tried changing the background property but that didn't work either, it did nothing.
I even tried hiding it like so
<RepeatButton x:Name="PageDown"
Command="ScrollBar.PageUpCommand"
Opacity="0"
Focusable="false"
Visibility="Hidden"/>
But that didnt work either, it was still there.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="ScrollBarTrackThumb"
TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid x:Name="Grid">
<Rectangle HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="Auto"
Height="Auto"
Fill="Transparent" />
<Border x:Name="CornerScrollBarRectangle"
CornerRadius="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="Auto"
Height="Auto"
Margin="0,1,0,1"
Background="{TemplateBinding Background}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Tag"
Value="Horizontal">
<Setter TargetName="CornerScrollBarRectangle"
Property="Width"
Value="Auto" />
<Setter Property="Background" Value="Transparent"/>
<Setter TargetName="CornerScrollBarRectangle"
Property="Height"
Value="6" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsFlicksEnabled"
Value="false" />
<Setter Property="Foreground"
Value="#ADABAB" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Width"
Value="7" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="GridRoot"
Width="7"
Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="0.00001*" />
</Grid.RowDefinitions>
<Track x:Name="PART_Track"
Grid.Row="0"
IsDirectionReversed="true"
Focusable="false">
<Track.Thumb>
<Thumb x:Name="Thumb"
Background="{TemplateBinding Foreground}"
Style="{DynamicResource ScrollBarTrackThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton x:Name="PageUp"
Command="ScrollBar.PageDownCommand"
Opacity="0"
Focusable="false"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton x:Name="PageDown"
Command="ScrollBar.PageUpCommand"
Opacity="0"
Focusable="false" />
</Track.DecreaseRepeatButton>
</Track>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="Thumb"
Property="IsMouseOver"
Value="true">
<Setter Value="{DynamicResource ButtonSelectBrush}"
TargetName="Thumb"
Property="Background" />
</Trigger>
<Trigger SourceName="Thumb"
Property="IsDragging"
Value="true">
<Setter Value="{DynamicResource DarkBrush}"
TargetName="Thumb"
Property="Background" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter TargetName="Thumb"
Property="Visibility"
Value="Collapsed" />
</Trigger>
<Trigger Property="Orientation"
Value="Horizontal">
<Setter TargetName="GridRoot"
Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
<Setter TargetName="PART_Track"
Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
<Setter Property="Width"
Value="Auto" />
<Setter Property="Height"
Value="8" />
<Setter TargetName="Thumb"
Property="Tag"
Value="Horizontal" />
<Setter TargetName="PageDown"
Property="Command"
Value="ScrollBar.PageLeftCommand" />
<Setter TargetName="PageUp"
Property="Command"
Value="ScrollBar.PageRightCommand" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
And the actual scrollviewer
<ScrollViewer Height="380"
Margin="10">
<ListView ItemsSource="{Binding MessageViewModel.Messages}"
x:Name="MyListView"
Background="Transparent"
BorderThickness="0"
Height="380">
<ListView.ItemTemplate>
<DataTemplate>
<WrapPanel>
<TextBlock Text="{Binding Message}"
FontFamily="Consolas"
Foreground="#61d73d"
TextWrapping="Wrap"/>
</WrapPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

like Klaus, I think the issue is not with your repeatButton. Rather, you see the (white) background through your repeatButton.
try putting a red rectangle just behind your scrollButton to see the outcome
or even better : use snoop to check this kind of issue.
but also, Clemens is right : style/template the scrollviewer inside the listView, rather than outside.

Accessing style elements

I have a slider style (cut version)
<Style x:Key="SliderThumb" TargetType="Thumb">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Ellipse Height="15" Width="15" Fill="White"></Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="Slider" TargetType="Slider">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Track Grid.Row="1" x:Name="PART_Track" >
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButton1}" Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButton}" Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>
<Style x:Key="BigSliderStyle" TargetType="Slider">
<Setter Property="Focusable" Value="False"/>
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="MinHeight" Value="21" />
<Setter Property="MinWidth" Value="104" />
<Setter Property="Template" Value="{StaticResource Slider}" />
</Trigger>
</Style.Triggers>
</Style>
From my interface I create it as
<Slider Style="{StaticResource BigSliderStyle}"/>
I need to bind a tooltip to slider thumb only which relates to ellipse.
Is there any way to access ellipse properties from within form XAML?

This should solve your problem:
<Style x:Key="SliderThumb" TargetType="Thumb">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="ToolTip"><!--just add this part to your code-->
<Setter.Value>
<TextBlock Text="Some text"/><!-- also you can use Text="{Binding propertyName}"-->
</Setter.Value>
</Setter><!--just add this part to your code-->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Ellipse Height="15" Width="15" Fill="White"></Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You already have the access to the thumb through the style. That element supports the Tooltip out of the box so no need to focus on the ellipse, as that is only a template for thumb placeholder.
This will also allow you to use different templates for the Slider keeping you ToolTip throughout the app.

ListView Virtualization with FlowDocument as DataTemplate

As a self-set himself the task of writing the messenger (like Telegram, Viber, etc). To display the messages in the chat, I use ListView with FlowDocument as ItemTemplate . This control was chosen because:
1) It is necessary to display images (emoticons);
2) Hyperlinks;
3) It should be possible to select text to copy.
But the application consumes lots of memory, a feeling that FlowDocument not deleted from the memory.
It's my View:
<CollectionViewSource x:Key="ItemListViewSource"
IsLiveSortingRequested="True"
Source="{Binding RelativeSource={RelativeSource AncestorType=UserControl},
Path=Tag.Messages}">
<CollectionViewSource.SortDescriptions>
<scm:SortDescription PropertyName="date" />
</CollectionViewSource.SortDescriptions>
</CollectionViewSource>
<Style x:Key="lvItemStyle" TargetType="{x:Type ListViewItem}">
<Setter Property="Background" Value="White" />
<Setter Property="Padding" Value="0" />
<Setter Property="Focusable" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Bd"
Background="{TemplateBinding Background}"
BorderThickness="0"
Padding="{TemplateBinding Padding}">
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="LightGray" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="lvStyle" TargetType="{x:Type ListView}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="White" />
<Setter Property="SelectionMode" Value="Multiple" />
<Setter Property="ScrollViewer.CanContentScroll" Value="True" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="VirtualizingPanel.IsVirtualizing" Value="True" />
<Setter Property="VirtualizingPanel.ScrollUnit" Value="Pixel" />
<Setter Property="Margin" Value="0" />
<Setter Property="ItemContainerStyle" Value="{StaticResource lvItemStyle}" />
<Setter Property="Padding" Value="0" />
</Style>
<DataTemplate x:Key="MessageTemplate">
<Grid Margin="0,7,0,7">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Width="40"
Height="40"
Margin="5,0,10,0"
VerticalAlignment="Top"
Source="{Binding Converter={StaticResource getAvatarForChat},
Path=fromId,
Mode=OneWay,
ConverterParameter=40}">
<Image.Clip>
<EllipseGeometry Center="20,20"
RadiusX="20"
RadiusY="20" />
</Image.Clip>
</Image>
<TextBlock Grid.Row="0"
Grid.Column="1"
Margin="0"
VerticalAlignment="Top"
FontSize="13"
FontWeight="SemiBold"
Padding="0"
Text="{Binding chatTitle, Mode=OneWay" />
<TextBlock Grid.Row="0"
Grid.Column="2"
Margin="10,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="13"
FontWeight="ExtraLight"
Padding="0"
Text="{Binding Path=date,
Converter={StaticResource dateConverter},
ConverterParameter=HH:mm,
Mode=OneWay}" />
<FlowDocumentScrollViewer Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
Margin="0,3,0,0"
Document="{Binding message,
Converter={StaticResource documentConverter},
Mode=OneWay}"
Padding="0"/>
</Grid>
</DataTemplate>
<ListView x:Name="listView"
Grid.Row="0"
ItemsSource="{Binding Source={StaticResource ItemListViewSource},
NotifyOnTargetUpdated=True}""
ItemTemplate="StaticResource MessageTemplate"
Style="{StaticResource lvStyle}">
</ListView>
Please help me understand this problem, and I'm sorry for my english!

ControlTemplate Bind to ToolTip property from button

I want to add some text next to my button, but I want to use the tooltip for this text or better yet another tag I can add within the controls properties.
Then I want to reference this tag within my ControlTemplate so it will add the text next to my button, here is my button XAML:
<Button Style="{StaticResource MainMenuButton}" ToolTip="Home" Content="" />
And here is my Style:
<Style x:Key="MainMenuButton" TargetType="Button">
<Setter Property="FontFamily" Value="{StaticResource FontAwesome}" />
<Setter Property="FontSize" Value="27" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="#545863" />
<Setter Property="Padding" Value="15" />
<Setter Property="Margin" Value="5" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="grid">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" x:Name="border"
CornerRadius="40"
BorderThickness="0"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}"
Margin="{TemplateBinding Margin}">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
TextElement.FontWeight="Bold" />
</Border>
<StackPanel Grid.Column="1" VerticalAlignment="Center">
<TextBlock Text="{Binding RelativeSource={RelativeSource Self}, Path=DataContex.ToolTip}"
FontSize="16"/>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#757b8d" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="#29a1d5" />
</Trigger>
</Style.Triggers>
</Style>
The code I have there now doesn't work: {Binding RelativeSource={RelativeSource Self}, Path=DataContex.ToolTip}.

Woopps, found the solution. Was far too simple and I expected it be more complicated.
<TextBlock Text="{TemplateBinding Tag}" FontSize="16"/>