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>
Related
I have a TabView whose ItemTemplate is like this:
<controls:TabView.ItemTemplate>
<DataTemplate x:DataType="data:Playlist">
<local:HeaderedPlaylistControl
IsPlaylist="True"
Loaded="HeaderedPlaylistControl_Loaded"
MusicCollection="{x:Bind Mode=OneWay}" />
</DataTemplate>
</controls:TabView.ItemTemplate>
This is part of the HeaderedPlaylistControl:
<local:PlaylistControl
AllowReorder="False"
AlternatingRowColor="True"
ItemsSource="{x:Bind MusicCollection.Songs, Mode=OneWay}">
<local:PlaylistControl.Header>
<controls:ScrollHeader Mode="Sticky">
<UserControl>
<Grid
x:Name="PlaylistInfoGrid"
Padding="10"
Background="{ThemeResource SystemColorHighlightColor}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image
x:Name="PlaylistCover"
Grid.RowSpan="3"
Width="180"
Height="180"
Margin="20"
Source="Assets/monotone_bg_wide.png" />
<TextBlock
x:Name="PlaylistNameTextBlock"
Grid.Column="1"
Margin="0,5"
VerticalAlignment="Center"
FontSize="36"
Foreground="White"
Style="{StaticResource HeaderTextBlockStyle}"
Text="{x:Bind MusicCollection.Name, Mode=OneWay}" />
<TextBlock
x:Name="PlaylistInfoTextBlock"
Grid.Row="1"
Grid.Column="1"
Margin="0,5"
VerticalAlignment="Top"
Foreground="White"
Text="{x:Bind MusicCollection.Songs, Converter={StaticResource SongCountConverter}, Mode=OneWay}" />
</Grid>
</UserControl>
</controls:ScrollHeader>
</local:PlaylistControl.Header>
</local:PlaylistControl>
When I switch between tabs, the HeaderedPlaylistControl doesn't update it's content. Why is that?
Is it because of the MusicCollection property (it is of type Playlist) doesn't notify the binding when switching tabs? If so, where should I put the notification? The definition of Playlist is here.
HeaderedPlaylistControl is here:
Yes, as you suspected, the problem is that the MusicCollection property is an ordinary property which does not notify about changes. To make your code work, you need to make the MusicCollection property a dependency property (see docs). This is a kind of properties which are best for data-bound properties of visual controls and have many additional features as well.
public static readonly DependencyProperty MusicCollectionProperty =
DependencyProperty.Register(
nameof(MusicCollection), typeof(Playlist),
typeof(HeaderedPlaylistControl), null
);
public Playlist MusicCollection
{
get { return (bool)GetValue(MusicCollectionProperty); }
set { SetValue(MusicCollectionProperty, value); }
}
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>
I am have a text which is has bold, underline and italic html characters. For example
<b> hello<b> how are <i>you</i>. I am <u>fine</u>
I have to show it in formatted form in a textblock on WP7. I have a listbox like this
<ListBox x:Name="LBayaDetail" Loaded="LBayaDetail_Loaded" Margin="6,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="ayaContent" Margin="0,6,0,0" Hold="ayaContent_Hold" Tap="ayaContent_Tap" Loaded="ayaContent_Loaded" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="6"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="6" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Background="#FFC5AC88" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock x:Name="ayaIndex" Text="{Binding aya}" FontSize="36" Margin="0" FontWeight="Bold" HorizontalAlignment="Center" />
<StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Center">
<Image Source="{Binding BookmarkImage}" HorizontalAlignment="Center" Width="48" Height="48" Margin="0,0,0,12" />
<Image Source="{Binding NoteImage}" HorizontalAlignment="Center" Width="48" Height="48" Margin="0,0,0,12" />
<Image Source="{Binding TagImage}" HorizontalAlignment="Center" Width="48" Height="48" Margin="0,0,0,12" />
</StackPanel>
</Grid>
<Grid Grid.Row="1" Background="#FFC5AC88" x:Name="Media" Tap="Media_Tap" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Image Source="/Images/Media-Play(1).png" Width="30" Height="30" HorizontalAlignment="Center" Margin="12,0,0,0" VerticalAlignment="Top" />
</Grid>
<!--ini pak dimana tempat untuk ayat dan translasi-->
<Grid Grid.Column="2" Background="#FFAC9574" Margin="6,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock x:Name="aya" TextWrapping="Wrap" Text="{Binding text}" HorizontalAlignment="Right" FontFamily="/Fonts/me_quran2.ttf#me_quran2" FontSize="{Binding FontSizeAya}" Foreground="Black" Margin="24,0,12,-12" TextAlignment="Right" Visibility="{Binding visibility1}" />
</Grid>
<Grid Grid.Column="2" Grid.Row="1" Margin="6,0,0,0" Background="#FFAC9574" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<StackPanel>
<TextBlock Visibility="{Binding visibility2}" x:Name="translation" Text="{Binding translation}" TextWrapping="Wrap" HorizontalAlignment="Right" FontFamily="/Fonts/ARIALUNI.TTF#Arial Unicode MS" FontSize="{Binding FontSizeTranslation}" Foreground="#FF5D2A07" Margin="12,6,6,0" />
<TextBlock Visibility="{Binding visibility3}" x:Name="translation2" Text="{Binding translation2}" TextWrapping="Wrap" HorizontalAlignment="Right" FontFamily="/Fonts/ARIALUNI.TTF#Arial Unicode MS" FontSize="{Binding FontSizeTranslation}" Foreground="DarkGreen" Margin="12,20,6,0" />
</StackPanel>
</Grid>
<!-- -->
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I fetch from database like
App.Listxyz = (Application.Current as App).db.SelectList<Aya>(strSelect);
And assign it to Listbox like this
LBayaDetail.ItemsSource = App.ListAyaBySurah;
And shows the text as it is and do not format it which is obvious. I searched for it and I was able to format individual textblock by using "RUN" but I am unable to do it in listbox.
I also tried to use HTMLTextBlock but it also doesn't format the text and shows it like this
Hi
How
Are
You
Any help will be much appreciated that how do I format a textblock with different text decorations.
Thanks
You should place a grid and a stackpanel inside the listbox. Something like the following
<Grid>
<StackPanel Grid.Column="1">
<TextBlock Padding="0,5,0,2" TextWrapping="Wrap">
<Run Text="{Binding test}" FontWeight="Bold" /> <Run Text="{Binding test2}" />
<LineBreak/>
<Run Text="{Binding test3}" />
</TextBlock>
</StackPanel>
</Grid>
One way to do that is:
public class FormattedText
{
public string Text { get; set; }
public bool IsBold { get; set; }
public bool IsItalic { get; set; }
public bool IsUnderlined { get; set; }
}
Have a method that converts the HTML you stored in your db to a list of the class you have above
example:
From this:
<b> hello<b> how are <i>you</i>. I am <u>fine</u>
to this:
First element:
Text = "hello"
IsBold = true
skip what not needed since bool default value is false
Second element
Text =" how are"
skip what not needed since bool default value is false
Third item
Text ="you"
IsItalic=true;
skip what not needed since bool default value is false
and so on....
and then have another method that from that list creates a list of Runs to be added to your TextBlock or
maybe create a custom TextBlock witch take the List<FormattedText> from DataContext and process it by adding the Run elements to self
I have a DataTemplate for my WPF ListBox:
<DataTemplate DataType="{x:Type local:LogEntry}" x:Key="lineNumberTemplate">
<Grid IsSharedSizeScope="True">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Index" Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid Cursor="/LogViewer;component/Template/RightArrow.cur">
<Rectangle Fill="{Binding Path=LineNumbersBackgroundColor, ElementName=LogViewerProperty}" Opacity="0.4" />
<TextBlock Grid.Column="0" Margin="5,0,5,0" Style="{StaticResource MyLineNumberText}" x:Name="txtBoxLineNumbers" />
</Grid>
<TextBlock Grid.Column="1" Margin="5,0,0,0" Style="{StaticResource MyTextEditor}" />
</Grid>
</DataTemplate>
Is it possible that the selection box begins not at the beginning (MyLineNumberText) but at MyTextEditor? Sorry I don't know how to describe it in the right way.
Yes, it is possible. You have to modify the style of the listbox. If you are using Blend this is easy. Otherwise you could get the style for Listbox and ListboxIten here: http://msdn.microsoft.com/en-us/library/cc278062(v=vs.95).aspx
Copy the style to your project and then change the style acordingly.
I have application in WPF where I need to create a number of buttons with the same content layout. It is currently defined in the Window as:
<Button Grid.Row="0" Grid.Column="0" Margin="4" >
<Button.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.85*" />
<RowDefinition Height="0.25*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" TextAlignment="Center" Text="Primary Text that can wrap" TextWrapping="Wrap" FontSize="14.667" />
<TextBlock Grid.Row="1" TextAlignment="Left" Text="smaller text" FontSize="10.667" />
</Grid>
</Button.Content>
</Button>
What I would ideally like to do is change that to:
<controls:MultiTextButton Grid.Row="0" Grid.Column="0" PrimaryText="Primary Text that can wrap" SecondaryText="smaller text" />
Rightly or wrongly I've created the following class:
public class MultiTextButton : Button
{
public static readonly DependencyProperty PrimaryTextProperty = DependencyProperty.Register("PrimaryText", typeof(String), typeof(MultiTextButton));
public static readonly DependencyProperty SecondaryTextProperty = DependencyProperty.Register("SecondaryText", typeof(String), typeof(MultiTextButton));
static MultiTextButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(MultiTextButton), new FrameworkPropertyMetadata(typeof(MultiTextButton)));
}
public string PrimaryText
{
get { return (string)GetValue(PrimaryTextProperty); }
set { SetValue(PrimaryTextProperty, value); }
}
public string SecondaryText
{
get { return (string)GetValue(SecondaryTextProperty); }
set { SetValue(SecondaryTextProperty, value); }
}
}
I'm now unsure of how to set the 'template' to display the content in the format as the original code in the Window. I've tried:
<ControlTemplate x:Key="MultiTextButtonTemplate" TargetType="{x:Type controls:MultiTextButton}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.85*" />
<RowDefinition Height="0.25*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" TextAlignment="Center" Text="{Binding PrimaryText}" TextWrapping="Wrap" FontSize="14.667" />
<TextBlock Grid.Row="1" TextAlignment="Left" Text="{Binding SecondaryText}" FontSize="10.667" />
</Grid>
</ControlTemplate>
but in Blend and Visual Studio the button is not rendered.
You're after TemplateBinding:
<TextBlock Grid.Row="0" TextAlignment="Center" Text="{TemplateBinding PrimaryText}" TextWrapping="Wrap" FontSize="14.667" />
<TextBlock Grid.Row="1" TextAlignment="Left" Text="{TemplateBinding SecondaryText}" FontSize="10.667" />
This binding is for use specifically in control templates -- it refers to a dependency property in the control. (Note that a regular binding, by contrast, refers to a property in the current DataContext.)
Edit
To make it look like a button, copy the default control template for Button and replace its ContentPresenter with something like below:
<ContentControl Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True"
ContentTemplate="{TemplateBinding ContentTemplate}">
<ContentControl.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.85*" />
<RowDefinition Height="0.25*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" TextAlignment="Center" Text="{Binding PrimaryText}" TextWrapping="Wrap" FontSize="14.667" />
<TextBlock Grid.Row="1" TextAlignment="Left" Text="{Binding SecondaryText}" FontSize="10.667" />
</Grid>
</ContentControl.Content>
</ContentControl>