We Keep Coding

WPF XAML binding properties within a ControlTemplate

I'm trying to create a ControlTemplate representing a Slider and a TextBox (and a Label), where the text of the TextBox should show the value of the Slider.
I can't figure out how to correctly setup the binding between the Slider's Value property and the TextBox' Text property.
This is my ControlTemplate:
<ControlTemplate x:Key="myslider" TargetType="Slider">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Label>Slider</Label>
<Slider
Width="100"
Minimum="0" Maximum="100"/>
<TextBox Width="40"
Text="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Value}">
</TextBox>
</StackPanel>
</ControlTemplate>
Here I instantiate 3 Slider using the ControlTemplate:
<StackPanel>
<Slider Template="{StaticResource myslider}"></Slider>
<Slider Template="{StaticResource myslider}"></Slider>
<Slider Template="{StaticResource myslider}"></Slider>
</StackPanel>
This ends up looking like this:
The goal is that each slider controls the value within the indivual TextBoxes.

I would prefer using a User Control as a first choice. But if we follow your line of thought the shared value of the Slider and the TextBox should be the Value dependency property on the parent Slider.
The tested code is as following :
<Window.Resources>
<ControlTemplate x:Key="myslider" TargetType="Slider">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Label>Slider</Label>
<Slider
Value="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Value,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged,Delay=10}"
Minimum="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Minimum,Mode=OneWay}"
Maximum="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Maximum,Mode=OneWay}"
Width="100"
/>
<TextBox Width="100"
Text="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Value,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged,Delay=10}">
</TextBox>
</StackPanel>
</ControlTemplate>
</Window.Resources>
<Grid>
<StackPanel Orientation="Vertical">
<Slider Template="{StaticResource myslider}" Minimum="0" Maximum="100"></Slider>
<Slider Template="{StaticResource myslider}" Minimum="0" Maximum="100"></Slider>
<Slider Template="{StaticResource myslider}" Minimum="0" Maximum="100"></Slider>
</StackPanel>
</Grid>

MouseOver And BackGround Color In ListBox ItemTemplate in Wpf C#

Hello I am Found Myself in a Problem. My Task Is when I Mouse over any ListBox Value The row and Line color will be changed . Please note that The Line Used using Border . I have found some solution in the internet but that does not match my code or logic . Here is My code
<ListBox
x:Name="listBox1"
Grid.Row="5"
Height="360"
Margin="6"
SelectionMode="Single" >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Yellow"/>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate x:Uid="lititem" >
<DataTemplate >
<Border BorderThickness="0,0,0,1" BorderBrush="Black" >
<Grid Margin="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<!--<Border BorderThickness="1" Grid.Column="0"
BorderBrush="Black">-->
<!--<TextBlock Grid.Column="0" Margin="10,2,10,2" Text="{Binding Path=傷病名}" />-->
<!--</Border>-->
<!--<Border BorderThickness="1" Grid.Column="1" BorderBrush="Black">-->
<Button
Grid.Column="1"
Margin="5,10,5,10"
Padding="5"
Background="#FF54CD54"
Command="{Binding ElementName=me, Path=Command確定}"
CommandParameter="{Binding}"
Foreground="White"
IsEnabled="{Binding Path=確定IsEnableFlag}">
<Run FontWeight="Bold">
確定病名
</Run>
</Button>
<Button
Grid.Column="2"
Margin="5,10,5,10"
Padding="5"
Background="#FFFF5656"
Command="{Binding ElementName=me, Path=Command疑い}"
CommandParameter="{Binding}"
Foreground="White"
IsEnabled="{Binding Path=疑いIsEnableFlag}">
<Run FontWeight="Bold">
疑い病名
</Run>
</Button>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
As You can see I used on trigger property IsMouseOver for Hovering and changing the background color to yellow but it is not working It is changing to different color. And also By using the <ListBox.ItemContainerStyle> it also Breaks my Grid Column design means Grid Column style is not working as expected .

wpf virtualizingstackpanel different behavior on different Win10 machines

My WPF application is using VirtualizingStackPanel for ListView. Scrolling this list is working fine on two different machines: my host machine (Windows 10 v1803 build 17134.228) and one virtual machine (Windows 10 v1607 build 14393.2312 ). If I run the same application, exact the same copy, on my other VM (Windows 10 v1803 build 17134.165), the list doesn’t scroll smooth – it’s very slow. Short scroll steps about couple of lines is fine (CacheLength), but scrolling over more lines is very bad, most like virtualizing is not properly working.
Anybody knows, if virtualizing depends on any component or settings of windows 10 system?
Just pasting a part of code with ListView.
Thanks for help.
Update: sorry for disinformation - scrolling is not slow, the scroll unit is not an Item but whole Page (maybe more then page). So visual effect of scrolling is bad.
<ListView Grid.Row="1" Margin="0,-23,0,0" x:Name="LogMessagesListView" ItemsSource="{Binding DataModel.LogMessagesList}"
VirtualizingPanel.ScrollUnit="Item"
VirtualizingPanel.CacheLengthUnit="Page"
VirtualizingPanel.CacheLength="1.1"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.VirtualizationMode="Recycling"
SelectionMode="Extended" SelectionChanged="LogMessagesListView_SelectionChanged" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<EventSetter Event="MouseDoubleClick" Handler="HandleLogMessageDoubleClick"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="BorderThickness" Value="0"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding DataContext.Runtime.ColumnWidthHighlight, ElementName=root }"/>
<ColumnDefinition Width="{Binding DataContext.Runtime.ColumnWidthLevel , ElementName=root}"/>
<ColumnDefinition Width="{Binding DataContext.Runtime.ColumnWidthDate, ElementName=root}"/>
<ColumnDefinition Width="{Binding DataContext.Runtime.ColumnWidthTime, ElementName=root}"/>
<ColumnDefinition Width="{Binding DataContext.Runtime.ColumnWidthProcess, ElementName=root }"/>
<ColumnDefinition Width="{Binding DataContext.Runtime.ColumnWidthNumber, ElementName=root }"/>
<ColumnDefinition Width="{Binding DataContext.Runtime.ColumnWidthCategory, ElementName=root }"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Height="14" Width="15" Margin="-14,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Background="Green" CornerRadius="0" BorderThickness="0" Height="14" HorizontalAlignment="Stretch"
Visibility="{Binding IsBookmarked, Converter={StaticResource BoolToVisibility}}"/>
<Border Grid.Column="1" Background="Yellow" CornerRadius="0" BorderThickness="0" Height="14" HorizontalAlignment="Stretch"
Visibility="{Binding IsHighlighted, Converter={StaticResource BoolToVisibility}}"/>
<Border Grid.Column="2" Background="RoyalBlue" CornerRadius="0" BorderThickness="0" Height="14" HorizontalAlignment="Stretch"
Visibility="{Binding IsSearchTextHighlighted, Converter={StaticResource BoolToVisibility}}"/>
</Grid>
<Image Grid.Column="1" Source="{Binding Level, Converter={StaticResource LevelToImage}}" Width="14" Margin="-2,0,0,0"/>
<TextBlock Grid.Column="2" Text="{Binding LogDate}" Margin="1,0,0,1"/>
<TextBlock Grid.Column="3" Text="{Binding LogTime}" Margin="1,0,0,1"/>
<TextBlock Grid.Column="4" Text="{Binding ProcessName}" Margin="1,0,0,1"/>
<TextBlock Grid.Column="5" Text="{Binding MessageNumber}" Margin="1,0,0,1"/>
<TextBlock Grid.Column="6" Text="{Binding CategoryName}" Margin="1,0,0,1"/>
<local:TextBlockHighlight Grid.Column="7" Margin="1,0,0,1"
IsSelected="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListViewItem}}}"
Highlighter="{Binding DataContext.DataModel.Highlighter, ElementName=root}"
LogMessage="{Binding .}"
DummyTrigger="{Binding MessageInlines}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

WPF Show buttons inside a selected ListItem

I'm working with a WPF application to manage our main software's versions. This application has a ListBox, and I set the ListBox.DataTemplate to each ListBoxItem has a Label and 2 Buttons inside it.
The following code shows my ListBox code:
<ListBox Grid.Row="0" SelectedItem="{Binding Path=SelectedVersion}" ItemsSource="{Binding Path=PatchList, Mode=TwoWay}" d:DataContext="{d:DesignInstance {x:Type ViewModels:MainWindowViewModel}}"
SelectionMode="Single" IsSynchronizedWithCurrentItem="True" Margin="1" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectedIndex="0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="{Binding Path=VersionNumber}" HorizontalAlignment="Left" Foreground="#FFFFFF" FontSize="19" />
<Button Grid.Column="1" Width="25" Height="25" Template="{StaticResource OnMouseOverListBoxitem}" ToolTip="Release" Command="{Binding Path=DataContext.ReleaseVersionCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}" HorizontalAlignment="Right" d:DataContext="{d:DesignInstance {x:Type ViewModels:MainWindowViewModel}}" CommandParameter="{Binding}">
<ContentControl Template="{StaticResource Release}" />
</Button>
<Button Grid.Column="2" Width="25" Height="25" Template="{StaticResource OnMouseOverListBoxitem}" ToolTip="Trash" Command="{Binding Path=DataContext.DeleteVersionCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}" HorizontalAlignment="Right" d:DataContext="{d:DesignInstance {x:Type ViewModels:MainWindowViewModel}}" CommandParameter="{Binding}">
<ContentControl Template="{StaticResource Trash}" />
</Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The problem is that I would like to show the label and the buttons ONLY for the Selected ListBoxItem.
By the way, I'm using bindings, and if you see some different code it's because I'm also using MahApp.Metro for Windows8-style.
Any suggestions?
Thank you.

try this one.
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter1" />
</Window.Resources>
<Grid>
<ListBox ItemsSource="{Binding Fnts}" Grid.Row="0" SelectedItem="{Binding Path=SelectedVersion}"
SelectionMode="Single" IsSynchronizedWithCurrentItem="True" Margin="1" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectedIndex="0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding}" />
<Button Content=" X " Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}, Path=IsSelected, Converter={StaticResource BooleanToVisibilityConverter1}}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>

How to apply different styles to ListBox header and item

I have a ListBox which is bound to my custom class
ObservableCollection<FieldPropertyItem> _fieldOrderCollection`;
internal struct FieldPropertyItem
{
public string Name { get; set; }
public string AliasName { get; set; }
}
Code for ListBox:
<ListBox x:Name="FieldOrderListBox" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" SelectedIndex="0"
ScrollViewer.VerticalScrollBarVisibility="Auto" SelectionChanged="FieldOrderListBox_SelectionChanged">
<ListBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#FF479EF3"></SolidColorBrush>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate x:Name="MyTemplate">
<Grid Margin="-5,-1,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="FieldName" MinWidth="5" MaxWidth="300"/>
<ColumnDefinition Width="2" />
<ColumnDefinition Width="*" MaxWidth="350"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="Black" Grid.Column="0" BorderThickness="0.5,0.0,0.5,0.5" IsHitTestVisible="False">
<TextBlock Text="{Binding Name}" Grid.Column="0" ToolTip="{Binding Name}" Margin="2,0,2,0" VerticalAlignment="Center"/>
</Border>
<GridSplitter Grid.Column="1" Width="2" HorizontalAlignment="Left" Background="Black" Margin="-2,0,-1,0"/>
<Border BorderBrush="Black" BorderThickness="0,0.0,0.5,0.5" Margin="-2,0,0,0" Padding="0,5,0,0" Grid.Column="2">
<TextBlock Text="{Binding AliasName}" Grid.Column="1" ToolTip="{Binding AliasName}" Margin="2,0,2,0" VerticalAlignment="Center" HorizontalAlignment="Stretch"/>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Now i want that my ListBox first item should look like header. The remaining ones should have a light dim background.

You can check if the previous item is null using a RelativeSource binding in a trigger, e.g. this DataTemplate makes the first element bold:
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A" />
<ColumnDefinition SharedSizeGroup="B" />
</Grid.ColumnDefinitions>
<Grid.Style>
<Style TargetType="{x:Type Grid}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
<Setter Property="TextElement.FontWeight" Value="Bold" />
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
<TextBlock Grid.Column="0" Text="{Binding Name}" />
<TextBlock Grid.Column="1" Text="{Binding AliasName}" />
</Grid>
</DataTemplate>
(Use shared size groups as shown above to align the grids with one-another, set Grid.IsSharedSizeGroup to true on the ListBox element)
I would not recommend doing this by the way, if your item collection contains the header there is definitely something wrong with your data-design.

1.) You can have a new Property IsFirstItem on your FieldPropertyItem
Whenever your _fieldOrderCollection changes determine the IsFirtItem Property of the elements in your ObservableCollection.
2.) Define the corresponding Templates in XAML (Normal and FirstItem Template)
3.) You can then bind in XAML like this:
<ListBox ItemsSource="{Binding Items}" >
<ListBox.ItemTemplate>
<DataTemplate>
<ContentControl x:Name="contentControl" Content="{Binding}" ContentTemplate="{StaticResource normalTemplate}"/>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsFirstItem}" Value="True" >
<Setter TargetName="contentControl" Property="ContentTemplate" Value="{StaticResource firstItemTemplate}"></Setter>
</DataTrigger>
</DataTemplate.Triggers>
</ListBox.ItemTemplate>
</ListBox>