We Keep Coding

C# - Adding XAML elements to UWP app via x:Bind

Context: I'm writing a UWP Twitter client.
One of the useful bits of data Twitter returns via its API are objects for content that can be linked directly in a tweet - #hashtags, #usernames, $symbols, and URLs. This makes it easy to extract these objects from the string containing a tweet's full text, in order to turn them into links.
I understand how the XAML needs to look for this, with <run> and <hyperlink> tags, and I've figured out how to create that XAML dynamically for each tweet object.
What I can't figure out is how to inject my generated XAML into my app's DataTemplate. Because tweet content needs to be displayed on multiple pages in the app, I'm using a ResourceDictionary to hold all my XAML styling, including my DataTemplate. So, I'm entirely unsure how to connect my generated XAML to my app's UI.
For example, if a tweet looks like this:
"Hey #twitter, you're a time waster! #FridayFeeling"
My generated XAML objects look like this:
<Run>Hey </Run>
<Hyperlink link="http://twitter.com/twitter/">#twitter</Hyperlink>
<Run>, you're a time waster! </Run>
<Hyperlink link="http://twitter.com/search?hashtag=FridayFeeling">#FridayFeeling</Hyperlink>
If there's nothing to link in a tweet's text, then I can just use Tweet.Text as-is, so I'm trying to bind this to a TextBox. How can I handle inserting this XAML dynamically?
Am I stuck abandoning data binding entirely and looping through my collection to programmatically add all my XAML?
Here's my DataTemplate:
<DataTemplate x:Key="TweetTemplate" x:DataType="tweeter:Tweet2">
<Grid Style="{StaticResource ListItemStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" x:Name="RetweetedBy" x:Load="{x:Bind IsRetweet}" Height="28">
<StackPanel Orientation="Horizontal" Padding="4 8 4 0">
<StackPanel.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="12"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlPageTextBaseMediumBrush}" />
</Style>
</StackPanel.Resources>
<Border Height="28">
<TextBlock Height="24" FontFamily="{StaticResource FontAwesome}" xml:space="preserve"><Run Text=" "/></TextBlock>
</Border>
<TextBlock Text="{x:Bind Path=User.Name}" />
<TextBlock Text=" retweeted"/>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<StackPanel Orientation="Horizontal" Padding="5">
<TextBlock Text="{x:Bind Path=Tweet.User.Name}" Margin="0 0 8 0" FontWeight="Bold" />
<TextBlock Text="{x:Bind Path=Tweet.User.ScreenName, Converter={StaticResource GetHandle}}" Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}" />
<TextBlock Text="⦁" Margin="8 0" />
<TextBlock Text="{x:Bind Path=Tweet.CreationDate, Converter={StaticResource FormatDate}}" />
</StackPanel>
</Grid>
<Grid Grid.Row="2">
<TextBlock Text="***this is where I'm having problems***" Padding="5" TextWrapping="WrapWholeWords"/>
</Grid>
<Grid Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*" MaxWidth="100"/>
<ColumnDefinition Width="2.5*"/>
<ColumnDefinition Width="2.5*"/>
<ColumnDefinition Width="2.5*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Button x:Name="cmdComment" Content="" Style="{StaticResource MetaButtons}" />
</Grid>
<Grid Grid.Column="1">
<Button x:Name="cmdRetweet" Content="" Style="{StaticResource MetaButtons}" />
</Grid>
<Grid Grid.Column="2">
<Button x:Name="cmdLike" Content="" Style="{StaticResource MetaButtons}" />
</Grid>
<Grid Grid.Column="3">
<Button x:Name="cmdMessage" Content="" Style="{StaticResource MetaButtons}" />
</Grid>
</Grid>
</Grid>
</DataTemplate>

If you want to use attached property, here is an example to start with :
public static class Twitter
{
public static readonly DependencyProperty InlinesProperty = DependencyProperty.RegisterAttached(
"Inlines", typeof(ICollection<Inline>), typeof(Twitter), new PropertyMetadata(default(ICollection<Inline>), PropertyChangedCallback));
private static void PropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (!(d is TextBlock tb)) return;
tb.Inlines.Clear();
if (!(e.NewValue is ICollection<Inline> inlines)) return;
foreach (var inline in inlines)
{
tb.Inlines.Add(inline);
}
}
public static void SetInlines(DependencyObject element, ICollection<Inline> value)
{
element.SetValue(InlinesProperty, value);
}
public static ICollection<Inline> GetInlines(DependencyObject element)
{
return (ICollection<Inline>) element.GetValue(InlinesProperty);
}
}
And in xaml :
<TextBlock local:Twitter.Inlines ="{x:Bind TwitterData}"></TextBlock>
Where TwitterData is a List<Inline>

Xamarin dynamic grid layout

I have a collection of objects that has a property like "ValueType", based on this property I invoke a DataTemplateSelector class that would return type of control to be displayed for that object.
<control:ControlDataTemplateSelector x:Key="personDataTemplateSelector"
RangeTemplate="{StaticResource rangeControl}"
EnumTemplate="{StaticResource pickControl}"
DateTemplate="{StaticResource dateControl}"/>
<DataTemplate x:Key="rangeControl">
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<control:ScreenLabel Grid.Row="0" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}" Text="{Binding Path=TraitDescription}" />
<Entry Grid.Row="1" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}" />
</Grid>
</ViewCell>
</DataTemplate>
<DataTemplate x:Key="dateControl">
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<control:ScreenLabel Grid.Row="0" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}" Text="{Binding Path=TraitDescription}" />
<DatePicker Grid.Row="1" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}"></DatePicker>
</Grid>
</ViewCell>
</DataTemplate>
<DataTemplate x:Key="pickControl">
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<control:ScreenLabel Grid.Row="0" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}" Text="{Binding Path=TraitDescription}" />
<Picker Grid.Row="1" Grid.Column="{Binding Path=SortOrder, Converter={StaticResource sortOrderToColIndexConverter}}" />
</Grid>
</ViewCell>
</DataTemplate>
I am having issue displaying these in grid with two column format, for example if there are 9 objects in the collection need to display a tabular view with 4 rows of 2 columns each and a 5th row that has one column.
With my current code, i get a zig zag kind of layout. But I need Like thisNeed some suggestions
Am looking for solution that would need to work in iOS and Droid

I would use StackLayouts instead of Grids inside of your ViewCells.
You can do:
<StackLayout VerticalOptions="FillAndExpand" >
<control:ScreenLabel Text="{Binding Path=TraitDescription}" />
<Entry />
</StackLayout>
Are you sure your Bindings are coming back properly? I haven't seen a comma separated Markup Extension setting on attribute.

Any one looking for answer, we resolved it by using FLowlist view control. It provides options to have side-by-side view

xaml reference an element that includes its children

I have several pages that include the same border and its child elements.
Each page has
<Border Grid.Column="1" Style="{StaticResource InstructionBox}" x:name="staticBorder">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Style="{StaticResource OnlyContentStyle}" Grid.Row="0" Grid.Column="0"
Click="Instruction_Click">
<Border >
<TextBlock Style="{StaticResource InstructionStyle}">
</TextBlock>
</Border>
</Button>
<Button Style="{StaticResource OnlyContentStyle}" Grid.Row="0" Grid.Column="1"
Click="Logs_Click">
<Border >
<TextBlock Style="{StaticResource LogStyle}">
</TextBlock>
</Border>
</Button>
<Border Grid.Row="2" Grid.ColumnSpan="2" x:Name="InstructionBorder">
<StackPanel x:Name="PanelInstructions" Style="{StaticResource InstructionTextStyle}">
</StackPanel>
</Border>
</Grid>
</Border>
Is there a way to make reference this border throughout all my pages?
Thanks

No, there is no direct way. XAML only allows an element to exist in a single location on the Visual Tree. To do this you need to convert your border into a user control. There are several ways to do this. In the example below, I've used dependency properties to provide variable content for the first button in the user control's code behind. For the click event, I recommend binding the buttons Command to an ICommand implementation, but you need to be doing MVVM for that. This sample adds a RoutedEventHandler instead.
public static readonly DependencyProperty InstructionButtonContentProperty = DependencyProperty.Register(
"InstructionButtonContent", typeof(FrameworkElement), typeof(InstructionBoxControl), new PropertyMetadata(default(FrameworkElement)));
public FrameworkElement InstructionButtonContent
{
get { return (FrameworkElement) GetValue(InstructionButtonContentProperty); }
set { SetValue(InstructionButtonContentProperty, value); }
}
public event RoutedEventHandler InstructionButtonClicked;
public InstructionBoxControl()
{
InitializeComponent();
}
private void InstructionButtonClick(object sender, RoutedEventArgs e)
{
InstructionButtonClicked?.Invoke(sender, e);
}
For the most part you can paste the border into the user control's XAML. Then you need to bind the dynamic parts to the user control's DependencyProperties. You also hook up the button's click event call the RoutedEventHandler in the code behind above.
<Border >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="20" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Grid.Row="0"
Grid.Column="0"
Click="InstructionButtonClick">
<Border>
<ContentPresenter Content="{Binding Path=InstructionButtonContent, RelativeSource={RelativeSource AncestorType={x:Type local:InstructionBoxControl}}}"/>
</Border>
</Button>
You can then use the new UserControl inplace of the border on any page like so:
<local:InstructionBoxControl InstructionButtonClicked="InstructionBoxControl_OnInstructionButtonClicked">
<local:InstructionBoxControl.InstructionButtonContent>
<TextBlock>Instructions</TextBlock>
</local:InstructionBoxControl.InstructionButtonContent>
</local:InstructionBoxControl>
The other button and satckpanel should work similarly.

ContentControl MouseDoubleClick event does not work when the content changes

I have a DataTemplate like this:
<!-- MULTI VIEW TEMPLATE -->
<DataTemplate x:Key="MultiViewTemplate" >
<Grid x:Name="MultiViewGrid" ShowGridLines="True" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentControl Content="{StaticResource BorderHwnd1}" Grid.Column="0" Grid.Row="0" x:Name="MultiViewBorder1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MouseDoubleClick="MultiViewBorder1_MouseDoubleClick"/>
<ContentControl Content="{StaticResource BorderHwnd2}" Grid.Column="1" Grid.Row="0" x:Name="MultiViewBorder2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MouseDoubleClick="MultiViewBorder2_MouseDoubleClick"/>
<ContentControl Content="{StaticResource BorderHwnd3}" Grid.Column="0" Grid.Row="1" x:Name="MultiViewBorder3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MouseDoubleClick="MultiViewBorder3_MouseDoubleClick"/>
<ContentControl Content="{StaticResource BorderHwnd4}" Grid.Column="1" Grid.Row="1" x:Name="MultiViewBorder4" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MouseDoubleClick="MultiViewBorder4_MouseDoubleClick"/>
</Grid>
</DataTemplate>
And the BorderHwnd1 is like this:
<Border x:Key="BorderHwnd1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" BorderBrush="Transparent" BorderThickness="0" Background="Transparent" >
<Image Margin="1" Source="/MyProject;component/Images/No_image_available.png" />
</Border>
My problem is that MultiViewBorder1_MouseDoubleClick event does not work after I remove and assign programmatically a new child to MultiViewBorder1. Initially MultiViewBorder1.Child is an image (No_image_available.png). In my code, I remove the image and assign a new child. This new child is a HwndHost.
Where is my mistake? any help is appreciated!

The child is changing from a WPF Image control....which is able to raise/flow "routed" "mouse" events through the visual tree....to some "hwnd" which you have inside the HwndHost, which is handling raw WIN32 mouses messages....and doesn't route them.
To be able to get mouse activity in your HwndHost into the visual tree, you could use a few different techniques to get them routed.
have an overlayed "transparent" window
handle the "mouse" messages in your WIN32/Hwnd, and then use "delegates" to raise
How can I convert Win32 mouse messages to WPF mouse events?
WPF WIN32 hwndhost WM_MOUSEMOVE WM_MOUSEHOVER

Checkbox in ItemTemplate

I have a <Checkbox/> in my <GridView.ItemTemplate>. How do I handle the <Checkbox/> as to the element in which it is?
For example, I want to delete item when checkbox checked.
I think should write here. But what?
private void CheckBox_Checked_1(object sender, RoutedEventArgs e)
{
}
Here's My XAML:
<GridView Margin="0,10,0,0"
RelativePanel.AlignHorizontalCenterWithPanel="True"
x:Name="GridColections"
IsItemClickEnabled="True"
SelectionMode="None"
ItemsSource="{x:Bind DS.AllRem, Mode=OneWay}"
ItemClick="GridColections_ItemClick" >
<GridView.ItemTemplate>
<DataTemplate x:DataType="local:GetRem" >
<Grid Margin="-2,0,-6,0" BorderBrush="LightGray" BorderThickness="1" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<TextBlock TextTrimming="CharacterEllipsis" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="{x:Bind ReminderName}" Margin="5,5,0,0" FontSize="20"/>
<TextBlock TextTrimming="CharacterEllipsis" Grid.Column="0" Grid.Row="1" Width="600" TextWrapping="Wrap" Text="{x:Bind ReminderDescription}" Margin="5,5,0,0" FontSize="12"/>
<CheckBox Grid.Column="2" Grid.Row="0" Grid.RowSpan="2" VerticalAlignment="Center" Checked="CheckBox_Checked_1"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>

The problem is that you almost certainly want to be able to use the DataContext in your click handler but you won't get that easily by just having a reference to the CheckBox which will be the sender argument in your callback. Normally what you would do here is create a Command on your item's view model and bind to that and any additional information that you would want to pass in you would pass in through the CheckBox's CommandParameter.
Once you do this you are now operating in your view model with a reference to whatever piece of information that you need through the command parameter (for instance you could set CommandParameter = "{Binding}" to pick up the entire data context which would be the item's view model and that would be accessible from your Command as an argument to it). You should be able to solve your issue this way.