We Keep Coding

WPF TextBox not trimming in DataTemplate

I have an odd problem with TextBox with TextTrimming set to CharacterElipsis used in a DataTemplate in WPF application. At the start of application everything works fine. But when I am resizing the window - reducing the width, the trimming is not working.
In an example below:
<Grid>
<DockPanel>
<DockPanel.Resources>
<DataTemplate x:Key="lowerLevel" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="34*" />
<ColumnDefinition Width="26*" />
<ColumnDefinition Width="26*" />
<ColumnDefinition Width="14*" />
</Grid.ColumnDefinitions>
<TextBlock Text="textboxvalue1" Grid.Column="0" FontWeight="Bold" VerticalAlignment="Center" Margin="15,10,0,10" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap" />
<TextBlock Text="textboxvalue2" Grid.Column="1" FontWeight="Bold" VerticalAlignment="Center" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap" />
<TextBlock Text="textboxvalue3" Grid.Column="2" FontWeight="Bold" VerticalAlignment="Center" Margin="0,10,0,10" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap" />
<CheckBox IsChecked="True" Content="ApprovedText" FontWeight="Bold" Grid.Column="3" VerticalAlignment="Center" Margin="0,10,15,10" />
</Grid>
</DataTemplate>
</DockPanel.Resources>
<ListView x:Name="listViewControl" ItemTemplate="{StaticResource lowerLevel}" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" />
</DockPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="34*" />
<ColumnDefinition Width="26*" />
<ColumnDefinition Width="26*" />
<ColumnDefinition Width="14*" />
</Grid.ColumnDefinitions>
<TextBlock Text="textboxvalue1" Grid.Column="0" FontWeight="Bold" VerticalAlignment="Center" Margin="15,10,0,10" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap" />
<TextBlock Text="textboxvalue2" Grid.Column="1" FontWeight="Bold" VerticalAlignment="Center" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap" />
<TextBlock Text="textboxvalue3" Grid.Column="2" FontWeight="Bold" VerticalAlignment="Center" Margin="0,10,0,10" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap" />
<CheckBox IsChecked="True" Content="ApprovedText" FontWeight="Bold" Grid.Column="3" VerticalAlignment="Center" Margin="0,10,15,10" />
</Grid>
</Grid>
I am having two identical Grids, but first one is placed in a DataTemplate and the second is just a separate control. TextBoxes in bottom grid are trimming correctly, when resizing window, however the TextBoxes from DataTemplate do not fit the width of parent columns while window resizing.
The code behind is:
public partial class MainWindow : Window
{
private ListCollectionView comparedFamiliesView;
public ListCollectionView ComparedFamiliesView
{
get
{
if (comparedFamiliesView == null)
{
comparedFamiliesView = new ListCollectionView(new List<Object>() { new Object(), new Object(), new Object() });
}
return comparedFamiliesView;
}
}
public MainWindow()
{
InitializeComponent();
listViewControl.ItemsSource = ComparedFamiliesView;
}
}
It basically adds three objects to have something to view on ListView.
I was trying different combinations of VerticalAlignment, VerticalContentAlignment - didn't work.
What I have tried was to place each TextBox in separate Grid in order to bind its Width to TextBox Width or MaxWidth, like:
<Grid Grid.Column="0" x:Name="grid1">
<TextBlock Text="textboxvalue1" FontWeight="Bold" VerticalAlignment="Center" Margin="15,10,0,10" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap" MaxWidth="{Binding ActualWidth, ElementName=grid1}" />
</Grid>
Didn't work either.
How can I force TextBoxes in DataTemplate to behave the same way as those in separate Grid?
Or what am I doing wrong with TextTrimming when using in DataTemplate.
Thank you for your help!!!
Regards,
Ariel

Try to set the ScrollViewer.HorizontalScrollBarVisibility attached property of the ListView to Disabled:
<ListView x:Name="listViewControl" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ...

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>

How do I add more options in a generic Combo Box

I want to have a combobox like this:
But in code there is no way of doing it. I'm using MVVM pattern. So I have a view:
<ComboBox Style="{StaticResource ComboStyle}" ItemsSource="{Binding ResultObjects}" SelectedItem="{Binding SelectedObject,Mode=TwoWay}" />
and ViewModel:
public IEnumerable<DateTime> ResultObjects { get;set; }
public DateTime SelectedObject{ get;set; }
The fact is that the -All- and -custom- are not DateTime. And it can't be in added to this list.
I remember that in MVC we had a "Dropdown helper".
What can I do here in MVVM?

You could bind to an IEnumerable<KeyValuePair<DateTime?, string>> where the key represent the actual value and the value represents a custom string representation of that value:
public IEnumerable<KeyValuePair<DateTime?, string>> ResultObjects { get; set; }
public DateTime? SelectedObject { get; set; }
...
ResultObjects = new List<KeyValuePair<DateTime?, string>>()
{
new KeyValuePair<DateTime?, string>(null, "All"),
new KeyValuePair<DateTime?, string>(new DateTime(2018,04,17), new DateTime(2018,04,17).ToString("yyyy/MM/dd")),
new KeyValuePair<DateTime?, string>(new DateTime(2018,04,17), new DateTime(2018,04,17).ToString("yyyy/MM/dd # HH:mm:ss")),
new KeyValuePair<DateTime?, string>(new DateTime(2018,04,17), "Custom...")
};
...
XAML:
<ComboBox
ItemsSource="{Binding ResultObjects}"
SelectedValue="{Binding SelectedObject}"
DisplayMemberPath="Value"
SelectedValuePath="Key"/>
Obviosuly you cannot return anything but actual DateTime values from an IEnumerable<DateTime> to you should change the type of your source collection if you want to be able to represent other types of values as well.

The way I'd handle this is to define an ObservableCollection<object>.
When wpf comes across an object presented to the ui it first looks to see if it's got a template defined for the thing. If it hasn't, it will use ToString on the object. You can rely on that for simple cases and override .ToString() on any object you want to use.
If you want more sophisticated display than just a string then you can define a datatemplate which targets your objects based on their datatype.
One trick which can be handy.
You can even inherit from one base object and define a template for that, then more specific ones for sub types. A sub type inheriting from your base object will be dealt with by your "default".
Eg.
I have a map editor. The user is selecting from different terrains he's going to draw. I want to display different stuff for these. I have a BaseTerrainVM and then I inherit from that for river, contour, woods etc.
Here's a subset of the markup I use to template the items in a listbox:
<ListBox.Resources>
<DataTemplate DataType="{x:Type local:BaseTerrainVM}">
<Grid>
<TextBlock Text="{Binding DisplayType}" HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<TextBlock Text="{Binding ID}"
HorizontalAlignment="Right"
VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
<DataTemplate DataType="{x:Type local:ContourVM}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding DisplayType}"
Grid.Column="0"
VerticalAlignment="Center"/>
<StackPanel Orientation="Horizontal"
Grid.Column="1"
TextElement.FontFamily="Century Gothic"
TextElement.FontSize="{DynamicResource LargeFont}"
TextElement.FontWeight="Normal"
>
<TextBox MinWidth="50"
Text="{Binding Height}"
GotKeyboardFocus="TextBox_GotKeyboardFocus"
>
<i:Interaction.Behaviors>
<ui:TextBoxDecimalRangeBehaviour MaxDecimals="0"
MaxInteger="3"
Minimum="{StaticResource Zero}"
Maximum="{StaticResource TwoFiveFive}" />
<ui:SelectAllTextBoxBehavior/>
</i:Interaction.Behaviors>
</TextBox>
<TextBlock Text="units"
Margin="2,0,0,0"
ToolTip="Elevation is represented by a number 0-255 which is multiplied by a factor to give metres"
/>
</StackPanel>
<TextBlock Text="{Binding ID}"
Grid.Column="2"
VerticalAlignment="Center"
/>
</Grid>
</DataTemplate>
<DataTemplate DataType="{x:Type local:RiverVM}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding DisplayType}"
Grid.Column="0"
VerticalAlignment="Center"/>
<StackPanel Orientation="Horizontal"
Grid.Column="1"
TextElement.FontFamily="Century Gothic"
TextElement.FontSize="{DynamicResource LargeFont}"
TextElement.FontWeight="Normal"
>
<Button
Command="{Binding PressureFromStartCommand}"
Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
Height="20"
ToolTip="Widen from Start of stroke"
>
<Path Data="{StaticResource FlowRight}"
Stretch="Uniform"
Fill="LightBlue"
Stroke="DodgerBlue"
StrokeThickness="1"
/>
</Button>
<Button
Command="{Binding PressureConstantCommand}"
Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
Height="20"
ToolTip="Constant width for river"
>
<Rectangle
Width="18"
Height="6"
Fill="LightBlue"
Stroke="DodgerBlue"
StrokeThickness="1"
/>
</Button>
<Button
Command="{Binding PressureFromEndCommand}"
Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
Height="20"
ToolTip="Widen from End of stroke"
>
<Path Data="{StaticResource FlowRight}"
Stretch="Uniform"
Fill="LightBlue"
Stroke="DodgerBlue"
StrokeThickness="1"
RenderTransformOrigin="0.5,0.5"
>
<Path.RenderTransform>
<ScaleTransform ScaleX="-1" ScaleY="1" />
</Path.RenderTransform>
</Path>
</Button>
</StackPanel>
<TextBlock Text="{Binding ID}"
Grid.Column="2"
VerticalAlignment="Center"
/>
</Grid>
</DataTemplate>
<DataTemplate DataType="{x:Type local:BoundaryVM}">
<Grid>
( This may amuse Muds. )
My Terrains that presents these is actually a composite collection. In my case this is because I translate all the water on the map into one object so there's no border between one road and the next or a lake and the river flowing into it. I need to present the two representations of water but switch between them.

You need to use CompositeCollection, that can handle more than one collection/s and other objects.
Try something like this
<ComboBox>
<ComboBox.ItemsSource>
<CompositeCollection>
<ComboBoxItem Content="--All--" />
<CollectionContainer Collection="{Binding Source=ResultObjects}" />
<ComboBoxItem Content="--Custom--" />
</CompositeCollection>
</ComboBox.ItemsSource>
</ComboBox>

How to change GridView.ItemTemplate while app is running?

In my app I have page with GridView and ComboBox. I want to change GridView.ItemTemplate property according to selected item in ComboBox. How should I implement it?
btw, I know about this question, but it is quite old and it does not look like "best practice". (How visibility/invisibility of ui control affects cpu/gpu load?)
My GridView:
<GridView x:Name="gridViewMain" Grid.Row="1" SelectionMode="None" IsItemClickEnabled="True"
ItemsSource="{Binding CurrentList}" ItemTemplate="{StaticResource gridViewMainItemTemplate}"
Loaded="gridViewMain_Loaded" LayoutUpdated="gridViewMain_LayoutUpdated">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="ItemClick">
<core:CallMethodAction MethodName="GridViewClick"
TargetObject="{Binding Mode=OneWay}" />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</GridView>
One of my templates:
<DataTemplate x:Key="gridViewMainItemTemplate">
<Grid x:Name="gridATemplate" Width="185" Height="288">
<Image x:Name="imgATemplate" Source="{Binding image_url}" Stretch="UniformToFill"
HorizontalAlignment="Center" VerticalAlignment="Center" />
<Grid Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}" VerticalAlignment="Bottom">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock x:Name="textBlockTitle" Text="{Binding title}"
TextWrapping="Wrap" Style="{StaticResource BodyTextBlockStyle}" Margin="5,0,0,0"
Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Foreground="White" FontWeight="Bold"
MaxHeight="50" />
<TextBlock x:Name="textBlockType" TextWrapping="Wrap" Style="{StaticResource BodyTextBlockStyle}"
Margin="5,0,0,0"
Grid.Column="0" Grid.Row="1" Foreground="White" Text="{Binding type}" FontWeight="Bold" />
<StackPanel Grid.Row="1" Grid.Column="1" Orientation="Horizontal">
<TextBlock x:Name="textBlockProgressL" TextWrapping="Wrap"
Style="{StaticResource BodyTextBlockStyle}" FontWeight="Bold" Foreground="White"
Text="Progress:" />
<TextBlock x:Name="textBlockProgressV" TextWrapping="Wrap"
Style="{StaticResource BodyTextBlockStyle}" FontWeight="Bold" Foreground="White"
Text="{Binding watched_episodes}" Margin="10,0,0,10" />
</StackPanel>
</Grid>
</Grid>
</DataTemplate>

Sure you can do this! In XAML you can do anything. What you cannot do is change the Template on the fly without re-rendering. Remember, this is like telling your printer to use card stock. It will obey. If you change the setting to use notebook paper, it will obey that, too. You will just have to print again since it has already printed on card stock.
There are a few ways for you to re-render a GridView. One way is to navigate away from the page and navigate back. That's not ideal sounding in your scenario. Odds are, in your scenario, you just need to reset the ObservableCollection you are using. Like this:
void Reset<T>(ObservableCollection<T> collection)
{
var original = collection.ToArray();
collection.Clear();
foreach (var item in original)
collection.Add(item);
}
Best of luck!

You'll want to use datatemplateselector
http://blogs.msdn.com/b/bryanbolling/archive/2012/12/08/how-to-control-the-datatemplateselector-in-windows-store-apps.aspx
You can create multiple itemtemplates and choose which one to display based on any condition.
You'll have to refresh the gridview whenever the selection changes.

WPF create button with custom content template

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>