We Keep Coding

Insert an inline image within a WPF TextBlock

I have below WPF TextBlock within a border:
<Border Visibility="{Binding Path=BlinkOn, Converter={StaticResource BoolToVis}}" BorderThickness="1" BorderBrush="Red" CornerRadius="5" Margin="5">
<TextBlock x:Name="lblStoryboard"
TextAlignment="Center"
Padding="5"
Width="Auto"
Background="Red"
Foreground="Black"
FontSize="12.5"
FontWeight="Bold"
Style="{StaticResource BlinkingTextBlock}"
Text="Hi there!"
TextWrapping="WrapWithOverflow"
Visibility="{Binding Path=BlinkOn, Converter={StaticResource BoolToVis}}">
</TextBlock>
</Border>
Now I am trying to insert an inline image in front of the Textblock text, I mean, to the left (left side) of the TextBlock text and in the same line. How can I do this?

Add Stackpanel with Horizontal Orientation.
I have removed the binding since it as nothing to do with Adding image.
<Border BorderThickness="1" BorderBrush="Red" CornerRadius="5" Margin="5">
<StackPanel Orientation="Horizontal" Margin="0,0,0,-1">
<Image Source="C:\Users\Administrator\source\repos\WpfApp4\WpfApp4\Koala.jpg" Margin="0,459,0,0" />
<TextBlock x:Name="lblStoryboard"
HorizontalAlignment="Center"
TextAlignment="Center"
Padding="5"
Width="Auto"
Background="Red"
Foreground="Black"
FontSize="12.5"
FontWeight="Bold"
Text="Hi there!"
TextWrapping="WrapWithOverflow" Margin="0,459,0,0"
/>
</StackPanel>
</Border>

Ellipse fill issues with listview WP8.1 UAP

I am wanting the position of the item in list to appear to left of the description but for some reason its making my font messed up and placing it in the center as shown in image. I am just wanting to mimic the same image I have on the map so it coresponds to listview poistion.
<DataTemplate x:Key="ImageTextListInboxTemplate">
<StackPanel Orientation="Horizontal" Width="470" Height="85">
<Border Height="40" Width="40" Margin="10,10,0,10" VerticalAlignment="Top">
<Image Source="/SampleImage.png" Stretch="UniformToFill"/>
</Border>
<StackPanel Orientation="Vertical" VerticalAlignment="Top" Margin="0,10,0,0">
<Grid Width="40" Height="40">
<Ellipse Fill="Blue" StrokeThickness="3"/>
<TextBlock Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding _position}"/>
</Grid>
<TextBlock Text="" FontSize="20" FontWeight="Semilight"
Margin="10,0,0,0" Width="320" Height="26" TextTrimming="WordEllipsis"
HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock Text="{Binding _Name}" FontSize="20" FontWeight="Semilight"
Margin="10,0,0,0" Width="320" Height="26" TextTrimming="WordEllipsis"
HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock Text="{Binding _Postcode}"
Margin="10,2,0,0" Width="320" TextTrimming="WordEllipsis" TextWrapping="Wrap"
HorizontalAlignment="Left"/>
<TextBlock Text="Sed varius rhoncus metus, et condimentum"
Margin="10,2,0,0" Width="320" TextTrimming="WordEllipsis" TextWrapping="Wrap"
HorizontalAlignment="Left"/>
</StackPanel>
<TextBlock Text="00:00 AM" FontSize="9" Margin="20,0,0,0" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
With Circle as above
Without circle by just removing the following code
<Grid Width="40" Height="40">
<Ellipse Fill="Blue" StrokeThickness="3"/>
<TextBlock Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding _position}"/>
</Grid>

Your containing stack panel is fixed at Height="85". Because it's a vertical stack panel it will add items to the control vertically, so you're specifying:
a StackPanel with a 10 top margin;
a Grid of height 40;
an empty TextBlock of height 26;
leaving 9 pixels for your _Name TextBlock, hence the clipping of the TextBlock and everything under it you're seeing there.
There's a number of ways you could get your ellipse grid to the left of one of the text boxes, I would probably consider wrapping a grid around the textblock you want it to be displayed to the left of like this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Width="40" Height="40" HorizontalAlignment="Left">
<Ellipse Fill="Blue" StrokeThickness="3"/>
<TextBlock Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding _position}"/>
</Grid>
<TextBlock Grid.Column="1" Text="Sed varius rhoncus metus, et condimentum"
Margin="10,2,0,0" Width="320" TextTrimming="WordEllipsis" TextWrapping="Wrap"
HorizontalAlignment="Left"/>
</Grid>

Disable An item in a gridview, store app

I have a gridview in a store app which is dynamically bound to a Collection
<GridView x:Name="Gridview1" Height="180" HorizontalAlignment="Left" VerticalAlignment="Top"
ScrollViewer.HorizontalScrollMode="Disabled" SelectionMode="None" >
<GridView.ItemTemplate>
<DataTemplate >
<Border Background="White" BorderBrush="LightGray" BorderThickness="3" Height="150" Width="150" Tapped="peopleDashboard_Tapped" PointerEntered="Gridview1_PointerEntered" PointerExited="Gridview1_PointerExited" >
<Grid Margin="5" >
<TextBlock Text="{Binding TileName}" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Top"
TextWrapping="Wrap" TextAlignment="Center"></TextBlock>
<TextBlock Text="{Binding TileValue}" Foreground="Orange" FontSize="18" VerticalAlignment="Bottom" HorizontalAlignment="Center"
TextWrapping="Wrap" TextAlignment="Center"></TextBlock>
</Grid>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
And I am binding this gridview in code behind like this
Gridview1.ItemsSource = listObj;
I will get 7 boxes . on hover gridview has a hover border color for each item.
I need to disable just one particular item in the gridview.
I can write Gridview1.IsEnabled = false for disabling the whole gridview.
But I need to disable only a particular item.
Here is a picture of the populated gridview
this is the disabled gridview.
I need to disable only one box in the gridview.
Any possible suggestions ?

you can try it with IValue Converter. When binding the data if Value is 'InProgress' make it disable, something like this you want I think. Try googling how to use IValue Converter.

many years later....I stumbled upon this problem myself when trying to make some inactive items in my UWP project..my solution was to employ use of the extended DataTemplateSelector that allows one to enable/disable the gridview item based on the associated class object's properties as described here:
https://www.jerriepelser.com/blog/disable-item-selection-winrt-gridview/
<Page.Resouces>
<DataTemplate x:Name "ActiveItem" >
<Border Background="White" BorderBrush="LightGray" BorderThickness="3" Height="150" Width="150" Tapped="peopleDashboard_Tapped" PointerEntered="Gridview1_PointerEntered" PointerExited="Gridview1_PointerExited" >
<Grid Margin="5" >
<TextBlock Text="{Binding TileName}" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Top"
TextWrapping="Wrap" TextAlignment="Center"></TextBlock>
<TextBlock Text="{Binding TileValue}" Foreground="Orange" FontSize="18" VerticalAlignment="Bottom" HorizontalAlignment="Center"
TextWrapping="Wrap" TextAlignment="Center"></TextBlock>
</Grid>
</Border>
</DataTemplate>
<DataTemplate x:Name "InactiveItem" >
<Border Background="White" BorderBrush="LightGray" BorderThickness="3" Height="150" Width="150" Tapped="peopleDashboard_Tapped" PointerEntered="Gridview1_PointerEntered" PointerExited="Gridview1_PointerExited" >
<Grid Margin="5" >
<TextBlock Text="{Binding TileName}" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Top"
TextWrapping="Wrap" TextAlignment="Center"></TextBlock>
<TextBlock Text="{Binding TileValue}" Foreground="Orange" FontSize="18" VerticalAlignment="Bottom" HorizontalAlignment="Center"
TextWrapping="Wrap" TextAlignment="Center"></TextBlock>
</Grid>
</Border>
</DataTemplate>
<local:SelectionItemTemplateSelector x:Key="DataTemplateSelector" ActiveItemDataTemplate="{StaticResource ActiveItem}" InactiveItemTemplate="{StaticResource InactiveItem}"/>
</Page.Resources>
<GridView x:Name="Gridview1" Height="180" HorizontalAlignment="Left" VerticalAlignment="Top"
ScrollViewer.HorizontalScrollMode="Disabled" SelectionMode="None" ItemTemplateSelector="{StaticResource DataTemplateSelector}" >
</GridView>

Binding not working on GroupBox.HeaderTemplate

I created a custom header for my GroupBox like the following image:
I want also to set a Binding on the Backgroud of this header, so I wrote the following code:
<GroupBox Width="130"
Height="80"
BorderBrush="Black"
Margin="5"
Grid.Row="0"
Background="{Binding HColor}">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Border BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20"
Background="{Binding HColor}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</DataTemplate>
</GroupBox.HeaderTemplate>
</GroupBox>
After execution, I the GroupBox's Background is colord in the right way, but not the header !
Is anyone able to explain to me why it's not working well ?

you can use like that ;
<GroupBox Width="130"
Height="80"
BorderBrush="Black"
Margin="5"
Grid.Row="0"
Background="{Binding HColor}">
<GroupBox.Header>
<Border BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20"
Background="{Binding Path=HColor}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</GroupBox.Header>
<!--<DataTemplate>
<Border BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20"
Background="{Binding Path=HColor}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</DataTemplate>-->
</GroupBox>

Solution Found !
I had to make an internal binding in the Xaml, between the backgroud of the GroupBox and it's header. Like the followiing code:
<GroupBox Name="HubGroupBox"
Width="130"
Height="80"
BorderBrush="Black"
Margin="5"
Grid.Row="0"
Background="{Binding HubColor}">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Border Canvas.ZIndex="2"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20"
Background="{Binding ElementName=HubGroupBox, Path=Background}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</DataTemplate>
</GroupBox.HeaderTemplate>
</GroupBox>
The result is:

You can use this binding without element name
<GroupBox Width="130"
Height="80"
BorderBrush="Black"
Margin="5"
Grid.Row="0"
Background="{Binding HColor}">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Border BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20" Background="{Binding Background, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type GroupBox}}}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</DataTemplate>
</GroupBox.HeaderTemplate>
</GroupBox>

You can rely on your VM data instead of control properties
<GroupBox Name="HubGroupBox"
Width="130"
Height="80"
BorderBrush="Black"
Margin="5"
Grid.Row="0"
DataSource="{Binding VMObject}">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Border Canvas.ZIndex="2"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20"
Background="{Binding ElementName=HubGroupBox, Path=DataSource.HColor}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</DataTemplate>
</GroupBox.HeaderTemplate>

Add blank entry to ListBox and that entry should be editable

How to add blank entry at the top of the listbox and that entry should be editable.
I wrote following code which is adding blank entry but it doesn't allow me to edit. How should I make it editable?
private void CustomButton_Click(object sender, RoutedEventArgs e)
{
ListBoxItem itm = new ListBoxItem();
itm.Content = "";
listBox1.Items.Insert(0,itm);
}
Inside my listBox, I've following things,
<DataTemplate x:Key="DefaultDataTemplate" >
<StackPanel Orientation="Horizontal" Width="596">
<TextBox Text="{Binding ClientNameBinding}" Background="Transparent" Padding="0" Margin="0" BorderThickness="0" TextWrapping="Wrap" Width="145"/>
<TextBox Text="{Binding ApplicationNameBinding}" Background="Transparent" Padding="0" Margin="0" BorderThickness="0" TextWrapping="Wrap" Width="90"/>
<TextBox Text="{Binding StartTimeBinding}" Background="Transparent" Padding="0" Margin="0" BorderThickness="0" TextWrapping="Wrap" Width="100"/>
<TextBox Text="{Binding StopTimeBinding}" Background="Transparent" Padding="0" Margin="0" BorderThickness="0" TextWrapping="Wrap" Width="60"/>
<TextBox Text="{Binding TaskNameBinding}" Background="Transparent" Padding="0" Margin="0" BorderThickness="0" TextWrapping="Wrap" Width="71"/>
<TextBox Text="{Binding ProjectNameBinding}" Background="Transparent" Padding="0" Margin="0" BorderThickness="0" TextWrapping="Wrap" Width="130"/>
</StackPanel>
</DataTemplate>
<!-- Editable DataTemplate -->
<DataTemplate x:Key="EditableDataTemplate">
<StackPanel Orientation="Horizontal" Width="596">
<!--<ComboBox x:Name="ClientComboBox" SelectionChanged="ClientComboBoxChanged" ItemsSource="{Binding Path=clientList, ElementName=MainWin}" SelectedValuePath="_id" DisplayMemberPath="_name" SelectedItem="{Binding ClientNameBindingClass, Mode=OneWayToSource}" Background="Yellow" Padding="0" Margin="0" BorderThickness="0" Width="145"/>-->
<TextBox Text="{Binding ClientNameBinding,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Background="Yellow" Padding="0" Margin="0" BorderThickness="0" TextWrapping="Wrap" Width="145"/>
<TextBox Text="{Binding ApplicationNameBinding}" Background="Yellow" Padding="0" Margin="0" BorderThickness="0" TextWrapping="Wrap" Width="90"/>
<TextBox Text="{Binding StartTimeBinding}" Background="Yellow" Padding="0" Margin="0" BorderThickness="0" TextWrapping="Wrap" Width="100"/>
<TextBox Text="{Binding StopTimeBinding}" Background="Yellow" Padding="0" Margin="0" BorderThickness="0" TextWrapping="Wrap" Width="60"/>
<TextBox Text="{Binding TaskNameBinding}" Background="Yellow" Padding="0" Margin="0" BorderThickness="0" TextWrapping="Wrap" Width="130"/>
<ComboBox x:Name="ProjectComboBox" SelectionChanged="ProjectComboBoxChanged" ItemsSource="{Binding Path=projectList, ElementName=MainWin}" SelectedValuePath="_id" DisplayMemberPath="_name" SelectedItem="{Binding ProjectNameBindingClass, Mode=OneWayToSource}" Width="71" Background="Yellow" BorderThickness="0"/>
</StackPanel>
</DataTemplate>!
Here is the image:

ListBox is not editable. You can create a textbox and put your value in that, after that assign that value to listboxitem.
The other option is to use the DataGridView (as mentioned in the comments). It allows editing.