We Keep Coding

C# WPF: Grouping of radio buttons in datagrid not working when radio buttons displayed as image

I am using the code from stack overflow question:
RadioButton and image
This is working fine, but since I activated the style in my radio buttons, the grouping does not work correctly. It should group the radio buttons per row, but instead it is grouped by the whole datagrid:
Grouping by whole grid
The Binding of the Id ensures that the groupname should be unique of each row, which does work when I remove the style attribute of my radio buttons.
Code of my radio buttons, which are included in a wpf datagrid:
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<RadioButton
x:Name="radioPlayNext"
MinWidth="50"
Command="{Binding PlayNextClipCommand}"
GroupName="{Binding Id}"
IsChecked="{Binding Handling, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static local:Handling_e.Handling_PlayNextClipInList}}"
Style="{StaticResource StyleRadioPlayNext}" />
<RadioButton
x:Name="radioLoopClip"
MinWidth="50"
Command="{Binding LoopClipCommand}"
GroupName="{Binding Id}"
IsChecked="{Binding Handling, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static local:Handling_e.Handling_LoopClip}}"
Style="{StaticResource StyleRadioLoopClip}" />
<RadioButton
x:Name="radioPlayAndHold"
MinWidth="50"
Command="{Binding PlayAndHoldLastFrameCommand}"
GroupName="{Binding Id}"
IsChecked="{Binding Handling, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static local:Handling_e.Handling_PlayAndHoldLastFrameOfClip}}"
Style="{StaticResource StyleRadioPlayHold}" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
Style is as follows:
<Image x:Key="imgOnNext" Source="../../Images/NEXT_on.png" />
<Image x:Key="imgOffNext" Source="../../Images/NEXT_off.png" />
<!-- Style for radio button play next clip in list -->
<Style x:Key="StyleRadioPlayNext" TargetType="RadioButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Grid>
<Image
Width="32"
Height="32"
Source="../../Images/NEXT_off.png" />
<ContentPresenter />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value="{DynamicResource imgOnNext}" />
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Content" Value="{DynamicResource imgOffNext}" />
</Trigger>
</Style.Triggers>
</Style>

The example you have linked is a bad one.
Better use a BulletDecorator instead of the Content to show the check state image. This way you are still able to use the Content property to show a button label.
Generally, if you don't know how a control is properly styled then lookup the corresponding control's style and template: Microsoft Docs: Control Styles and Templates.
The GroupName must be unique within the current scope, which is the DataTemplate. Each DataTemplate is its own scope. Therefore you don't have to bind GroupName to a unique ID, which very likely introduces some issues. It's redundant.
Simply set the GroupName to individual names like you would do with the x:Name directive.
For performance reasons, you should always choose StaticResource over DynamicResource.
<Window>
<Window.Resources>
<Image x:Key="imgOnNext" Source="../../Images/NEXT_on.png" />
<Image x:Key="imgOffNext" Source="../../Images/NEXT_off.png" />
<Style x:Key="RadioButtonStyle" TargetType="RadioButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<BulletDecorator>
<BulletDecorator.Bullet>
<ContentPresenter x:Name="BulletContent"
Content="{StaticResource imgOffNext}" />
</BulletDecorator.Bullet>
<ContentPresenter />
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="BulletContent"
Property="Content"
Value="{StaticResource imgOnNext}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<DataGrid>
<DataGrid.Columns>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<RadioButton GroupName="A"
Style="{StaticResource RadioButtonStyle}"
Content="{Binding SomeValue}" />
<RadioButton GroupName="A"
Style="{StaticResource RadioButtonStyle}"
Content="{Binding SomeOtherValue}" />
<RadioButton GroupName="B"
Style="{StaticResource RadioButtonStyle}"
Content="{Binding SomeValue}" />
<RadioButton GroupName="B"
Style="{StaticResource RadioButtonStyle}"
Content="{Binding SomeOtherValue}" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</Window>

how to show only selected item from treeview in wpf

I am working with a Wpf/XAML based application which has DataGrid with one of the DataGridColumn containing the TreeView control to let user select the item required.
<DataGrid.Columns>
<DataGridTextColumn Header="SerialNumber" Width="*" Binding="{Binding SerialNumber}" />
<DataGridTemplateColumn Header="Field" Width="*">
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<uControls:FieldTreeViewControl />
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding CurrentField.FieldName,Mode=TwoWay}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
Field column in above code is the one which displays treeviewcontrol in the DataGrid cell by referencing the FieldTreeViewControl and it works perfectly. The xaml code of FieldTreeViewControl is :
<UserControl>
.......
<Grid>
<TreeView x:Name="MyUITreeView" ItemsSource="{Binding Fields}">
<TreeView.Resources>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded" Value="{Binding IsNodeExpanded, Mode=TwoWay}" />
<Setter Property="IsSelected" Value="{Binding IsNodeSelected, Mode=TwoWay}" />
</Style>
<DataTemplate x:Key="NormalTemplate">
<StackPanel Orientation="Horizontal">
<!--<TextBlock Text="-" Margin="3"/>-->
<TextBlock Text="{Binding FieldName}" Margin="3"/>
<StackPanel.ContextMenu>
<ContextMenu Name="myChildMenu" DataContext="{Binding PlacementTarget,RelativeSource={RelativeSource Self}}">
<MenuItem Header="Add Field" Command="{Binding DataContext.AddFieldCommand}" CommandParameter="{Binding}">
</MenuItem>
</ContextMenu>
</StackPanel.ContextMenu>
</StackPanel>
</DataTemplate>
<!--<DataTemplate x:Key="EditTemplate">
<TextBox Text="{Binding FieldName}"/>
</DataTemplate>-->
</TreeView.Resources>
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Children}">
<ContentPresenter Content="{Binding}">
<ContentPresenter.Style>
<Style TargetType="{x:Type ContentPresenter}">
<Setter Property="ContentTemplate" Value="{StaticResource NormalTemplate}"/>
<Style.Triggers>
<DataTrigger
Binding="{Binding IsNodeSelected,
RelativeSource={RelativeSource
FindAncestor,
AncestorType={x:Type TreeViewItem}}}"
Value="True">
</DataTrigger>
</Style.Triggers>
</Style>
</ContentPresenter.Style>
</ContentPresenter>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
</Grid>
Now when user completes selecting an item from treeview I want to collapse treeview to show only that selected item. Later when user wants to change his selection , then the treeview should be available again by clicking on that column/cell. Is that possible to do this in wpf/XAML ? I tried to follow the link but not able to implement it for my scenario.

DataBinding ListView creating components if a certain condition is met

I am working on a C# WPF project and I have a list view which uses data binding and a collection view.
Below is how my ListView is currently populated.
<ListView HorizontalAlignment="Left" Margin="547,12,0,41" Name="lstCallLogInformation" Width="320">
<ListView.Style>
<Style TargetType="ListView">
<Style.Triggers>
<Trigger Property="HasItems" Value="False">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<TextBlock Text="No items in your devices call log" FontWeight="Bold" HorizontalAlignment="Center" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ListView.Style>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Expander IsExpanded="True">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock FontWeight="Bold" Foreground="Gray" Text="{Binding Name}" VerticalAlignment="Bottom" />
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Control.HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<DockPanel Style="{StaticResource onmouseover}">
<StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal" Tag="{Binding logID}">
<Image Height="30" Source="{Binding base64ImageString, Converter={StaticResource ImageConverter}}" Width="30" />
<StackPanel Margin="10" Orientation="Vertical">
<TextBlock FontWeight="Bold" Text="{Binding contactNameOrPhoneNumber}" />
<StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
<TextBlock HorizontalAlignment="Left" Text="{Binding dateString}" />
<TextBlock Margin="15, 0, 0, 0" Text="Duration: " />
<TextBlock HorizontalAlignment="Right" Text="{Binding humanReadableCallDuration}" />
</StackPanel>
</StackPanel>
<StackPanel Orientation="Vertical">
<Button Background="Transparent" BorderThickness="0" BorderBrush="Transparent" Tag="{Binding logID}" Name="btnAddAsContact" Click="btnAddAsContact_Click">
<Image Width="15" Height="15" Source="/BoardiesSMSServer;component/images/add.png" Tag="{Binding logID}" />
</Button>
<Button Background="Transparent" BorderThickness="0" BorderBrush="Transparent" Tag="{Binding logID}" Name="btnDeleteContactFromLog" Click="btnDeleteContactFromLog_Click">
<Image Width="15" Height="15" Source="/BoardiesSMSServer;component/images/delete.png" Margin="0,0,0,5" Tag="{Binding logID}" />
</Button>
</StackPanel>
</StackPanel>
</DockPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Within my DockPanel within the DataTemplate I have a StackPanel which contains various TextBlocks from the array that is passed into the binding.
In one of the StackPanels you will see you will see a TextBlock that binds to the element of contactNameOrPhoneNumber.
What I want to be able to do is if another value from the binding is null then I add a TextBlock for the contactNameOrPhoneNumber` element and alongside it have another TextBlock which contains another element of number``, if the other binding value is not null then this extra textblock of number is not added.
So in simple terms, what I want to be able to do is within the DataTemplate have a conditional if statement of if binding value == null add textblock to stackpanel else don't add textblock.

You can do that with Style + Triggers something like this:
<TextBlock>
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding PropertyName}" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
Also you can create IValueConverter say ObjectToVisibilityConverter which will take input your property and if property is null return Visibility.Collapsed else return Visibility.Visible.
You can then bind property with Visibility value of TextBlock via Converter.
<TextBlock Visibility="{Binding PropertyName,
Converter={StaticResource ObjectToVisibilityConverter}}"/>

Binding and Styling a DataGridColumnHeader

I have a DataGridColumn like this:
<DataGridTextColumn
Binding="{Binding
Path=Name,
UpdateSourceTrigger=PropertyChanged}"
HeaderStyle="{StaticResource HeaderWrapped}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<TextBlock
Text="{Binding
Path=DataContext.Name,
RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" />
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
The HeaderWrapped style is in a ResourceDictionary that is imported in the control. It looks like this:
<Style x:Key="HeaderWrapped" TargetType="DataGridColumnHeader">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock TextWrapping="Wrap" Text="{TemplateBinding Content}" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
When I run the app, the header Text is bound properly, but the TextWrapping is not set. I'm guessing that the DataGridTextColumn.HeaderTemplate overwrites the template from my ResourceDictionary. Is there a way that I can keep the styling for the headers in a ResourceDictionary but still bind the Text property of the header?

What you're trying to do is basically setting a Style for the Header at first, and then tell it to forget about it and use a brand new template for the header. you can't set both DataGridTextColumn.HeaderStyle.ContentTemplate and DataGridTextColumn.HeaderTemplate
However I can think of one workarounds to this problem:
<DataGridTextColumn
Binding="{Binding
Path=Name,
UpdateSourceTrigger=PropertyChanged}"
Tag="{Binding
Path=DataContext.Name,
RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
HeaderStyle="{StaticResource HeaderWrapped}">
</DataGridTextColumn>
<Style x:Key="HeaderWrapped" TargetType="DataGridColumnHeader">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock TextWrapping="Wrap" Text="{TemplateBinding Tag}" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>

Progressbar in ListBox Background?

I have the following Listbox:
<ListBox Margin="5" Grid.Column="0" Name="ListboxSelectUpdate">
<ListBox.ItemTemplate>
<DataTemplate>
<ProgressBar Visibility="Visible">
<ProgressBar.Style>
<Style TargetType="{x:Type ProgressBar}">
<Style.Triggers>
<DataTrigger Binding="{Binding Progress}" Value="0">
<Setter Property="Visibility" Value="Hidden"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ProgressBar.Style>
<ProgressBar.Template>
<ControlTemplate>
<AdornedElementPlaceholder Name="adorner">
<Grid>
<TextBlock Width="70" FontStyle="Italic" FontWeight="Bold">Version:</TextBlock>
<TextBlock FontWeight="Bold" Text="{Binding Path=Version}"></TextBlock>
</Grid>
</AdornedElementPlaceholder>
</ControlTemplate>
</ProgressBar.Template>
</ProgressBar>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In this Listbox I want to show different available Updates / Versions for a program.
Now I want to have a Progressbar in the Background of the ItemTemplate, which is only visible if the Progess-Property (int) is not zero. (so if the Update starts, the Progress-Property isnt zero and the Progressbar should be visible).
My Problem: I cant see anything, no Progressbar and no TexbBlocks.
Where is my misstake?

Your template is a bit wrong. You have misused AdornedElementPlaceholder element which, according to MSDN should be used only for validation templates. And you don't put things inside AdornedElementPlaceholder, it's a place where decorated control is put. If you want to stack controls on top of each other then use Grid. Try this ListBox template instead:
<ListBox Margin="5" ItemsSource="{Binding Path=MyList}">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<ProgressBar Minimum="0" Maximum="100" Value="{Binding Progress, Mode=OneWay}">
<ProgressBar.Style>
<Style TargetType="{x:Type ProgressBar}">
<Style.Triggers>
<DataTrigger Binding="{Binding Progress}" Value="0">
<Setter Property="Visibility" Value="Hidden"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ProgressBar.Style>
</ProgressBar>
<StackPanel Orientation="Horizontal">
<TextBlock Width="70" FontStyle="Italic" FontWeight="Bold">Version:</TextBlock>
<TextBlock FontWeight="Bold" Text="{Binding Path=Version}"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>