Develop Reference

Listview fore color will be unchanged in selection mode

I have the below XAML
however I want when the user box clicked on any of the textblock in he list view I want the forecolor of the text to be unchanged (currently changed to white)
instead I want the border color to be changed
how can I do that?
ListView x:Name="LV" ItemsSource= "{Binding Lggv}" SelectionChanged="dataGridData_SelectionChanged" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel >
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="{Binding Info }" AllowDrop="True" >
<TextBlock.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFCEE6C6" Offset="0.008"/>
<GradientStop Color="#FF9ECF8C" Offset="0.987"/>
</LinearGradientBrush>
</TextBlock.Background>
</TextBlock>
</Border>
<Grid >
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFC5DDFF" Offset="0"/>
<GradientStop Color="#FFA8C8F7" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" BorderThickness="1" BorderBrush="Black">
<TextBlock Text="{Binding DateTime}" ></TextBlock>
</Border>
<Border Grid.Column="1" BorderThickness="1" BorderBrush="Black">
<TextBlock Text="{Binding ComPort}"></TextBlock>
</Border>
<Border Grid.Column="2" BorderThickness="1" BorderBrush="Black">
<TextBlock Text="{Binding Data}" ></TextBlock>
</Border>
</Grid>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

You should distinguish between the item content and the item container. Handling item selection style should be the responsibility of the container. The following style defines a replacement for the visual representation of a ListViewItem with some basic properties. Depending on your desired visual, you may want to define a different style.
Define the style as resource:
<Style x:Key="ListViewItemStyle" TargetType="ListViewItem">
<Setter Property="Margin" Value="3"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<ContentPresenter/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderBrush" Value="Red"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="LightBlue"/>
</Trigger>
</Style.Triggers>
</Style>
The item will be displayed differently when the mouse is over (background color) and when the item is selected (red border). The foreground should stay untouched with this.
Usage:
<ListView ItemContainerStyle="{StaticResource ListViewItemStyle}">
<!-- your other code -->
</ListView>

WPF- Background overflowing the border of the tab item

I am trying to make the background not overflow the tab item in WPF. Here's what is happening (the blue background should not extend outside the border):
Here's my WPF XAML code:
<Window x:Class="DevelopmentConfigurator.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:DevelopmentConfigurator"
mc:Ignorable="d"
Title="Development Configurator" Height="350" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="467*"/>
</Grid.ColumnDefinitions>
<TabControl x:Name="tabControl" HorizontalAlignment="Left" Height="320" VerticalAlignment="Top" Width="517" Grid.ColumnSpan="2" Margin="10">
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid Name="Panel" Background="{TemplateBinding Background}" Height="30">
<Border Name="Border" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="Gainsboro" CornerRadius="4,4,0,0" Margin="0,2,2,0" Padding="0">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="10,2"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="#FF0067CD"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
<Setter Property="Background" Value="White"></Setter>
<Setter Property="BorderThickness" Value="1,1,1,0"></Setter>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Foreground" Value="White"></Setter>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"></Setter>
<Setter Property="BorderThickness" Value="1,1,1,0"></Setter>
<Setter Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</Setter.Value>
</Setter>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FF00A0E8" Offset="0"/>
<GradientStop Color="#FF0067CD" Offset="1"/>
<GradientStop Color="#FFDDDDDD" Offset="1"/>
<GradientStop Color="#FFCDCDCD" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Header="Packages">
<Label Content="Content goes here..." />
</TabItem>
<TabItem Header="Updates" Padding="0" />
<TabItem Header="EnvironmentVariables" />
</TabControl>
</Grid>
</Window>

Move the background binding from the Grid to the Border of your template.
<ControlTemplate TargetType="TabItem">
<Grid Name="Panel" Height="30">
<Border Name="Border" Background="{TemplateBinding Background}" ...

WPF button template in app.xaml how to set the text in MainWindow.xaml

I have created a glass button in the app.xaml file (code bottom of this post). I have a few buttons that reference this template in the mainwindox.xaml. What I do not know how to do is set the text that the button displays from within the MainWindow. The first section of code below is an example of one of the buttons. Somewhere I need to add some code so the button has the text 'Correlation' on it.
Main Window code below
<Button Grid.Column="0" Grid.Row="1" Style="{StaticResource buttBasicTemplateReport}" Command="{Binding CommandButtReportsCorrel}" Height="50" Width="120" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0"/>
App.xaml Code below
<!-- Glass Button empty template Report -->
<Style x:Key="buttBasicTemplateReport" TargetType="Button">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="FontSize" Value="12" />
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="ButtonBorder"
CornerRadius="15,15,15,15"
BorderThickness="3,3,3,3"
Background="#AA000000"
BorderBrush="#99FFFFFF"
RenderTransformOrigin="0.5,0.5">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="1.7*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.ColumnSpan="2" CornerRadius="23,23,0,0">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#08FFFFFF" Offset="0"/>
<GradientStop Color="#88FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<ContentPresenter x:Name="ButtonContentPresenter"
VerticalAlignment="Center"
Grid.RowSpan="2"
HorizontalAlignment="Center"/>
<Rectangle x:Name="recGlow" Style="{StaticResource recSecurity}"
Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="2"/>
<TextBlock Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="2" VerticalAlignment="Center" HorizontalAlignment="Center" Style="{StaticResource txtSecurity}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="recGlow" Property="Opacity" Value="0.8"/>
<Setter Property="RenderTransform" TargetName="ButtonBorder">
<Setter.Value>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
</TransformGroup>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Button is a ContentControl. As I see, you have a ContentPresenter in your Template. So, you can just add Content attribute to your Button or add Contnet element.
By attribute:
<Button Content="Correlation"/>
By element:
<Button>Correlation</Button>

When you make custom buttons you need to use ContentControl and Triggers if you want onClick effects.
Also to answer your question from the comentar, when you make custom buttons you need to Bind the margin to padding property to center your button content.
You can see this link:
WPF: Why shouldn't I use {TemplateBinding Margin} in ControlTemplate - is Margin meant only for element's containers?
You can see this also:
http://sshumakov.com/2013/02/19/how-to-bind-to-control-properties-from-controltemplate/

WPF: Implementing scalable Custom Controls

I'm working on a ColorPicker Control and decided it would be best to compose it of primitive Controls to be able to rearrange the various sliders and the color wheel in a control template without having to redefine everything. (Also the Controls code would become pretty messy)
I have created a new Template for the Slider Control and I want it to be scalable. For now, the size of the thumb is fixed, as is the center "Track".
<Style x:Key="ColorSlider" TargetType="{x:Type Slider}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Rectangle Grid.Column="1" Width="80" Height="480" VerticalAlignment="Center" HorizontalAlignment="Center">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="White" Offset="0.0"/>
<GradientStop Color="Black" Offset="1.0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Track x:Name="PART_Track">
<Track.Thumb>
<Thumb x:Name="ValueThumb">
<Thumb.Style>
<Style TargetType="Thumb">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Canvas Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
<Rectangle Width="100" Height="20" Fill="Transparent"/>
<Polygon Points="0,0 0,20 10,10" Fill="Black" />
<Polygon Points="100,0 100,20 90,10" Fill="Black" />
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</Track.Thumb>
</Track>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
One way to make the control scalable would be to use a Grid however that would get messy as well since the thumb would have to extend over 3 columns and it would then be difficult to get the proportions of the thumb right.
Are there any best practices for making a control scalable? A Viewbox for example would only magnify the result and probably lower the visual quality. Are there any other methods that one could use?
UPDATE 1: To address the comments: here is an example using a Grid:
<Style x:Key="ColorSlider" TargetType="{x:Type Slider}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="5" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" MinHeight="5" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="10" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" MinWidth="10" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="1" Grid.Row="1">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="White" Offset="0.0"/>
<GradientStop Color="Black" Offset="1.0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Track x:Name="PART_Track" Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="0" Grid.RowSpan="2">
<Track.Thumb>
<Thumb x:Name="ValueThumb">
<Thumb.Style>
<Style TargetType="Thumb">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Canvas Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
<Rectangle Height="20" Fill="Transparent"/>
<Polygon Points="0,0 0,20 10,10" Fill="Black" />
<Polygon Points="100,0 100,20 90,10" Fill="Black" />
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</Track.Thumb>
</Track>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
this however still won't scale the thumb triangles and there is also a visual problem for which I have no idea how it could be solved in XAML only. That is, the thumb extends over the bar to the bottom.
UPDATE 2: To make the question more specific and hopefully less "opinion based", the question can be reformulated to:
What options does one have available to make a control composed of various parts and the example above in particular scalable.

The simplest way is going to be a viewbox.
http://wpftutorial.net/ViewBox.html

Silverlight - Style ScrollViewer for Listbox

so i have been trying to style a scrollviewer, so that i can change the appearance of a scroll bar. But the problem I am facing, is that when I apply the scrollviewer style to the ListBox, I never see the content anymore.
This is the current style I have: (Unchanged from the default at the moment)
<Style x:Key="CustomScrollViewerStyle" TargetType="ScrollViewer">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="VerticalScrollBarVisibility" Value="Visible"/>
<Setter Property="Padding" Value="4"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollViewer">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">
<Grid Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollContentPresenter x:Name="ScrollContentPresenter" Cursor="{TemplateBinding Cursor}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}"/>
<Rectangle Grid.Column="1" Fill="#FFE9EEF4" Grid.Row="1"/>
<ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Margin="0,-1,-1,-1" Minimum="0" Orientation="Vertical" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" Width="18"/>
<ScrollBar x:Name="HorizontalScrollBar" Grid.Column="0" Height="18" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Margin="-1,0,-1,-1" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And my actual ListBox xaml is:
<Grid x:Name="LayoutRoot" Background="Transparent" Height="250">
<ListBox x:Name="iListBox" DataContext="{Binding}" ItemsSource="{Binding Path=ListVM.MyCollection}"
BorderBrush="Transparent" Background="Transparent"
ItemContainerStyle="{StaticResource ListBoxItemStyle1}">
<ListBox.Template>
<ControlTemplate TargetType="ItemsControl">
<ScrollViewer Style="{StaticResource CustomScrollViewerStyle}"/>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate >
<DataTemplate >
<Grid Background="Transparent" Loaded="Grid_Loaded">
<IReviewerList1:MyCollectionDataItem />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Currently all I see is a scrollbar and no dataItems anymore. Was wondering what i was doing wrong? Any help would be great.
Thanks

The problem is that the ListBox doesn't know where to inject it's Items. If you insert a ItemsPresenter in the styled ScrollViewer the items should be visible again.
<ListBox.Template>
<ControlTemplate TargetType="ItemsControl">
<ScrollViewer Style="{StaticResource CustomScrollViewerStyle}">
<!-- I'm not sure if the correct name is necessary, or if
it's just for applying visual states -->
<ItemsPresenter x:Name="itemsPresenter" />
</ScrollViewer>
</ControlTemplate>
</ListBox.Template>