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>

UWP XAML Button with image and text in a Hub [duplicate]

This question already has an answer here:
How do I place a text over a image in a button in WinRT
(1 answer)
Closed 5 years ago.
I am learning different ways of achieving certain layouts with XAML in UWP (I know I'm late to the party but I just started with the UWP stuff!)
What I am trying to achieve is a main navigation page kind of thing from a hub control on my main page. At every HubSection, I will have button on each column of a 2-column grid, which will contain buttons. Ive'tried something similar to this post but the debugger kept failing to attach to my UWP app when I used images instead of textblocks.
Essentially, what I've got until now is something like this: (I've shared my code down below)
But what I am trying to achieve is each button having its own image background and a separate TextBlock with semi-transparent background at the bottom centre of the button... (I've only photo shopped it, this is the thing I am trying to achieve...)
So this is what I've tried so far... I've also tried the relative panel but no luck...
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" Margin="10,10,10,0">
<Button HorizontalAlignment="Stretch">
<Grid>
<TextBlock HorizontalAlignment="Center">Column 0 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</Grid>
<StackPanel>
<TextBlock>Column 0 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Grid>
My complete code looks something like this for this page.
<Page
x:Class="VaultManager.Terminal.Views.MainPage"
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"
mc:Ignorable="d">
<Grid Background="Black">
<Hub SectionHeaderClick="Hub_SectionHeaderClick">
<Hub.Header>
<Grid Margin="0,20,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="pageTitle" Text="My Hub Sample" Style="{StaticResource SubheaderTextBlockStyle}" Grid.Column="1" IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Top"/>
</Grid>
</Hub.Header>
<HubSection Header="Overview">
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="150" />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" Margin="10,10,10,0">
<Button HorizontalAlignment="Stretch">
<StackPanel>
<TextBlock>Column 0 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Button>
<Button HorizontalAlignment="Stretch" >
<RelativePanel>
<TextBlock>Column 0 Item 2</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</RelativePanel>
</Button>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="1" Margin="10,10,10,10">
<Button HorizontalAlignment="Stretch">
<StackPanel>
<TextBlock>Column 1 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Button>
<Button HorizontalAlignment="Stretch" >
<StackPanel>
<TextBlock>Column 1 Item 2</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Button>
</StackPanel>
</Grid>
</DataTemplate>
</HubSection>
<HubSection Header="Videos" Name="Videos">
<!-- yada yada -->
</HubSection>
<HubSection Header="Audios" Name="Audios">
<!-- blah blah -->
</HubSection>
</Hub>
</Grid>

Good job giving us all that info. You may want to take a look here since the asker in that question seems to have had a similar issue. The answerer suggested using a Grid instead of a StackPanel. Hope that helps. After that, you should be able to adjust the transparency of the text. If you are using visual studio you can just click on the text element and adjust the background brush from the Properties tab. The button w/ the image should look like this:
<Button HorizontalAlignment="Stretch">
<Grid>
<TextBlock Text = "Column 0 Item 1">
<TextBlock.Background>
<SolidColorBrush Color="(**Colour here**)" Opacity = "(**Opacity Here {1 being opaque and 0 being transparent}**)/>
</TextBlock.Background></TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</Grid>
</Button>

Getting a Report Viewer to fill a grid?

I am trying to use WPF to present a report to the user. I went ahead and used the report wizard to create the chart that I wanted. My issue is that I cannot seem to get the actual chart to fill the Grid/WindowsFormsHost that it is nested in.
It seems to want to stay at whatever width and height that I stretched it to in the RDLC designer. Is there any way to set it to fill its parent when I initialize it?
Edit:
Heres my XAML:
<Window x:Class="CloudMonitor.Client.UI.Start"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Start" Height="972" Width="1315"
xmlns:convert="clr-namespace:CloudMonitor.Client.Convert"
xmlns:rv="clr-namespace:Microsoft.Reporting.WinForms;assembly=Microsoft.ReportViewer.WinForms" >
<Window.Resources>
<convert:ConnectionStatusConverter x:Key="ConnectionStatusConverter"/>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=".9*"/>
<RowDefinition Height=".1*"/>
</Grid.RowDefinitions>
<Grid x:Name="ReportGrid" Grid.Row="0">
<WindowsFormsHost >
<rv:ReportViewer x:Name="_reportViewer"/>
</WindowsFormsHost>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button x:Name="InitializeHubButton" Grid.Column="0" Content="Init Hub" Width="50" Height="20" HorizontalAlignment="Center" Click="InitializeHubButton_OnClick"></Button>
<Button x:Name="SendSimpleHailButton" Grid.Column="1" Content="Simple Hail" Width="90" Height="20" HorizontalAlignment="Center" Command="{Binding SendTestHail}" ></Button>
</Grid>
<Rectangle Fill="{Binding IsConnected, Converter={StaticResource ConnectionStatusConverter}}" Grid.Column="1" HorizontalAlignment="right" Height="20" Stroke="Black" VerticalAlignment="Bottom" Width="20"/>
</Grid>
</Window>

You need to create a Usercontrol and put the Report Viewer there then set it to your Grid.

Try replace this line from Window Definition:
Title="Start" Height="972" Width="1315"
With this:
Title="Start" d:DesignHeight="972" d:DesignWidth="1315"

Cannot access the TextBox in MainPage.xml.cs file

I am creating a Windows Store Blank application. Following is my code:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="100"></RowDefinition>
<RowDefinition Height="100"></RowDefinition>
<RowDefinition Height="700"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="Sample Search Application" Margin="30" FontSize="36" />
<StackPanel Grid.Row="1" Orientation="Horizontal">
<TextBox x:Name="txtsearch" Width="200" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="30" TextChanged="txtsearch_TextChanged"></TextBox>
<Button x:Name="BtnPrint" Content="GetValue" Click="BtnPrint_Click"></Button>
</StackPanel>
<StackPanel Grid.Row="2" Orientation="Horizontal">
<TextBlock x:Name="Result" FontSize="36"></TextBlock>
</StackPanel>
</Grid>
As you see that I have defined a textbox. But in the cs file I am unable to access this textblock. Following is my cs file snapshot:

Hit F5 and try again. Maybe it is not yet compiled.

You need to define the TextBlock name,
<TextBlock Name="txtTest" Text="Flickr Search Application" Margin="30" FontSize="36" />
EDIT:
Since you have TextBlock inside a parent control, you can use FindName method.

How to make controls fill the container in WPF?

Below is my xaml code :
<Window x:Class="ScoresBank.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow">
<DockPanel LastChildFill="True">
<WrapPanel DockPanel.Dock="Top">
<ToolBar Height="25"></ToolBar>
</WrapPanel>
<WrapPanel DockPanel.Dock="Bottom">
<StatusBar Name="stbBottom" Height="25"
BorderThickness="2"
BorderBrush="Black">Example</StatusBar>
</WrapPanel>
<StackPanel DockPanel.Dock="Left">
<DockPanel LastChildFill="True">
<WrapPanel DockPanel.Dock="Top">
<Button Name="btnBrowseTags">TAGS</Button>
<Button Name="btnBrowseTitles">TITLES</Button>
</WrapPanel>
<ComboBox DockPanel.Dock="Top" Name="cbxCategory">
Example
</ComboBox>
<WrapPanel DockPanel.Dock="Bottom">
<TextBox Name="txtKeyword"></TextBox>
<Button Name="btnFind">Find</Button>
</WrapPanel>
<ListBox Name="lbxBrowse">
</ListBox>
</DockPanel>
</StackPanel>
<StackPanel DockPanel.Dock="Right">
<Button>Example</Button>
</StackPanel>
<Canvas>
</Canvas>
</DockPanel>
And this is my current layout view :
So, what I mean with filling the container are :
Making lbxBrowse to fill the mid-space of the DockPanel inside the left StackPanel.
Making txtKeyword to fill the WrapPanel.
Making stbBottom to fill the WrapPanel.
What I've tried :
It seems i've put them in a DockPanel with LastChildFill="True". But it seems doesn't work.
I don't know about this, since it's not possible to put it into a DockPanel first.
I don't know anything about this.
I don't use fixed size, since I need them to keep neat even when resized in multiple screen resolution. The fixed size on ToolBar and StatusBar seems required, otherwise, the text will be unseen.
P.S. If possible, I prefer the solution to be XAML code, rather than the C# code. Otherwise, C# code is fine too.
Thank you.

You should use a Grid. It is more easier to configure. Here is an example (I don't know exactly how you want to setup your layout).
<Window x:Class="SampleWpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="400" Width="600">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Margin="5" Content="TAGS"
Grid.Column="0" Grid.Row="0" />
<Button Margin="5" Content="TITLES"
Grid.Column="1" Grid.Row="0" />
<Button Margin="5" Content="EXAMPLES"
Grid.Column="2" Grid.Row="0"
HorizontalAlignment="Right"/>
<ComboBox Margin="5"
Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" />
<ListBox Margin="5"
Grid.Column="2" Grid.Row="1" Grid.RowSpan="2" />
<Button Margin="5" Content="EXAMPLE"
Grid.Column="2" Grid.Row="3" HorizontalAlignment="Left" />
</Grid>
</Window>
And the result:
With a grid you can set the height and the width of the columns and rows to a specific value (in points, pixels, cm, etc.), to column content (Auto) or proportional to the grid (with *).

Instead of using a StackPanel and DockPanel you can use Grid and set Grid.ColumnDefinitions and Grid.RowDefinitions. You can specify directly each row Height and each column Width. It's easier to use and it automaticly fit to content and container.