Develop Reference

Binding StaticResourse Key in uwp

i am trying to refix the hamburger menu with some FontAwesome Icons, my way to do this is a ResourseDictionoary in my app. Now i want to bind the keyFontAwesomeUserString for the glyph bellow . My property in the object is Icon with type string. In my list the Icon var of x:DataType="local:MenuItem" has the values from my resoursedictionary.
<FontIcon Grid.Column="0" FontFamily="{StaticResource FontAwesomeFontFamily}" Glyph="{StaticResource FontAwesomeUserString}" Foreground="White" />
<TextBlock Grid.Column="1" Text="{x:Bind Name, Mode=OneWay}" TextWrapping="Wrap" FontSize="16" VerticalAlignment="Center" Foreground="White"/>
Please tell me if/how i can bind the ResourceKey property of StaticResourse.
Thank you

You can change the values of a resource dictionary by replacing them through code like:
Application.Current.Resources["FontAwesomeUserString"] = "&glyphCode";
Do not forget that StaticResource are only read when the page is created.
Depending when you are updating your dictionary, it could be enough but if you want your application to properly update itself when you are changing something in the resource dictionary, you will have to use ThemeResource.
You can get more details about ThemeResource here.
<FontIcon Grid.Column="0"
FontFamily="{ThemeResource FontAwesomeFontFamily}"
Glyph="{ThemeResource FontAwesomeUserString}"
Foreground="White" />
Update
If you are just trying to set the glyph/font family for all your items, a regular binding is enough:
<DataTemplate x:Key="DefaultTemplate" x:DataType="local:MenuItem">
<Grid Width="240" Height="48">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<FontIcon Grid.Column="0" FontFamily="{x:Bind FontFamily}" Glyph="{x:Bind Icon}" Foreground="White" />
<TextBlock Grid.Column="1" Text="{x:Bind Name, Mode=OneWay}" TextWrapping="Wrap" FontSize="16" VerticalAlignment="Center" Foreground="White"/>
</Grid>
</DataTemplate>
You just have to define the FontFamily and the Icon in your view mod.
el
You can have a look at the hamburger menu from the UWP toolkit documentation

Layout of list with different elements type in WPF

I need to fix a list with elements that have different types. Each of the type has it's own datatype to represent the viewmodel for each type. The following code works for me, but for some reason the data inside gets truncated, to some value (looks like default). I need to remove this trancation.
Here is what I have. This code is in the control, that could be placed in a list as well (it could be doubled or tripled). But I Don't think it's relevant.
<ScrollViewer VerticalScrollBarVisibility="Visible">
<ListView DockPanel.Dock="Top" Name="testCaseResultListView"
ItemsSource="{Binding LogItems}"
ItemContainerStyleSelector="{StaticResource fixSideViewLogItemStyleSelector}"
SelectionMode="Single"
>
<ListView.View>
<GridView x:Name="gridView2">
<GridView.ColumnHeaderContainerStyle>
<Style TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="Visibility" Value="Collapsed" />
</Style>
</GridView.ColumnHeaderContainerStyle>
<GridViewColumn CellTemplateSelector="{StaticResource fixSideViewLogItemTemplateSelector}"/>
</GridView>
</ListView.View>
</ListView>
</ScrollViewer>
</DockPanel>
fixSideViewLogItemTemplateSelector and fixSideViewLogItemStyleSelector are the selectors, that return different datatypes or styles for each of the type in LogItems. The common datatype is a grid with two columns, but that also seems irrelevent - I tried to put a textbox there, and it still gets truncated.
I would like this column to be stretched to the whole gridView. When I set width, of the column, I see the column resizing, but I want it to occupy the whole space. This should be elastic - if I put one control in the window, it should occupy the whole window, and properly resize (with it's column) when the window is resized. If I put two controls, they should divide the space by halves, and still should be resized when the window is resized.
Any help, tips?
Upd
Here is an example of the template I'm using.
<DataTemplate x:Key="testCaseDataResultTemplate">
<!-- Test case results -->
<Grid Margin="50,0,0,0" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<!--Test case result property-->
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<!--Is retry / Name-->
<RowDefinition />
<!--Test case number-->
<RowDefinition />
<!--Low limit-->
<RowDefinition />
<!--High limit-->
<RowDefinition />
<!--Measured-->
<RowDefinition />
<!--State-->
<RowDefinition />
<!--Test time-->
<RowDefinition />
<!--Comment-->
</Grid.RowDefinitions>
<!--Is retry / Name-->
<Image Grid.Column="0" Grid.Row="0"
Source="..\Resources\retry16.png"
Stretch="None" HorizontalAlignment="Left"
Visibility="{Binding Path=IsRetry, Converter={StaticResource boolToVisibilityConverter}}" />
<TextBlock Text="fh fhgfhg fhfhfhgfhg fhgfhfhgfhgfhgfhgfhgfhgf hgfhgfhgfhgfhgfhg fhfhgfhgf hgfhgfhfhg fhfhgf rdederserswerv 2" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" TextWrapping="Wrap" MaxWidth="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}}"/>
<!--Test case number-->
<TextBlock Text="Number:" Grid.Column="0" Grid.Row="1" />
<TextBlock Text="{Binding Path=TestCaseNumber}" Grid.Column="1" Grid.Row="1" />
<!--Low limit-->
<TextBlock Text="Low limit:" Grid.Column="0" Grid.Row="2" />
<TextBlock Text="{Binding Path=TestCaseData.LimitData.LowLimit}" Grid.Column="1" Grid.Row="2" />
<!--High limit-->
<TextBlock Text="High limit: " Grid.Column="0" Grid.Row="3" />
<TextBlock Text="{Binding Path=TestCaseData.LimitData.HighLimit}" Grid.Column="1" Grid.Row="3" />
<!--Measured-->
<TextBlock Text="Measured" Grid.Column="0" Grid.Row="4" />
<TextBlock Text="{Binding Path=MeasuredValue, Converter={StaticResource valasaConverter}}" Grid.Column="1" Grid.Row="4" />
<!--State-->
<TextBlock Text="Passed: " Grid.Column="0" Grid.Row="5" />
<TextBlock Text="{Binding Path=Passed}" Grid.Column="1" Grid.Row="5" />
<!--Test time-->
<TextBlock Text="Test time: " Grid.Column="0" Grid.Row="6" />
<TextBlock Text="{Binding Path=TestTime, StringFormat={}{0:hh':'mm':'ss'.'ff}}" Grid.Column="1" Grid.Row="6" />
<!--Comment-->
<TextBlock Text="{Binding Path=ShortMessage}"
Grid.Column="0" Grid.Row="7" Grid.ColumnSpan="2"
Visibility="{Binding Path=HasComment, Converter={StaticResource boolToVisibilityColConverter}}"
VerticalAlignment="Stretch"
MaxWidth="400"
TextAlignment="Center">
<TextBlock.ToolTip>
<StackPanel>
<TextBlock Text="{Binding Path=FullMessage}"/>
</StackPanel>
</TextBlock.ToolTip>
</TextBlock>
</Grid>
</DataTemplate>
It's a bit messy, but it is very simple. It has two columns - the captions, and the values. These columns are nothing to do with truncation.
I have tried also this template:
<DataTemplate x:Key="testCaseDataResultTemplate">
<TextBlock Text="Long long text goes here...... ->" HorizontalAlignment="Stretch"/>
</DataTemplate>
The text was of course longer :) It was still truncating, so I blame the listView/GridView, but not the inner template.

I think that this issue maybe is that you need to set the ListView.HorizontalContentAlignment to Stretch. Also the item container style and the item template must have the HorizontalAlignment to Stretch and the Width property must be Auto. Hope this tips helps...
EDIT
Also I think the problem could be the width of the GridViewColumn, that fix the items width
to it's own width. If you are using a single column, maybe you can change the ListView to a ListBox or an ItemsControl, just an idea.

I don't know what your templates looks like but I see a problem like this, it normally lies with a TextBlock that isn't wrapping and/or that the TextBlock's width is longer than it's parent.

Cannot say that I solved the puzzle, but at least it works as I expected. I removed the whole definition with GridView and columns inside, and put ItemTemplateSelector directly in ListView.
So my ListView looks now like this:
<ListView DockPanel.Dock="Top" Name="testCaseResultListView"
ItemsSource="{Binding LogItems}"
ItemContainerStyleSelector="{StaticResource fixSideViewLogItemStyleSelector}"
SelectionMode="Single"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
ItemTemplateSelector="{StaticResource fixSideViewLogItemTemplateSelector}">
That did it! Hope that will help to somebody as well.

No success binding an Image

I am trying to bind an image on the main window with a string (stored in another class) which represents the file path of the image I want to display.
But nothing shows up.
Here is my main window code xaml code:
<HierarchicalDataTemplate x:Key="categoryTemplate"
ItemsSource="{Binding Path=Items}"
ItemTemplate="{StaticResource animalTemplate}">
<Grid MouseEnter="DockPanel_MouseEnter" MouseLeave="DockPanel_MouseLeave">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="16" />
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Center" Source="{Binding Path=IconFilePath}" VerticalAlignment="Center" Width="16" Height="16" Grid.Column="0" />
<TextBlock Text="{Binding Path=Name}" Margin="5,0,0,0" FontWeight="Bold" FlowDirection="{Binding Path=FlowDirection}" FontSize="14" HorizontalAlignment="Stretch" Grid.Column="1" />
<Border CornerRadius="2" Background="Lavender" Grid.Column="2" Margin="0,0,5,0">
<TextBlock Text="30" Foreground="DodgerBlue" HorizontalAlignment="Center" FontWeight="Bold" FontSize="13" />
</Border>
<aea:MenuButton Margin="0,0,2,0" Opacity="0" HorizontalAlignment="Right" Grid.Column="3" SnapsToDevicePixels="False" Width="16" Height="16" DisplayStyle="Text" IsEnabled="True" IsDropDownOpen="False">
<aea:SplitButtonItem IsSelected="True" Visibility="Collapsed">
<Image HorizontalAlignment="Center" Source="Assets\FeedMenu.png" VerticalAlignment="Center"/>
</aea:SplitButtonItem>
<aea:SplitButtonItem Tag="{Binding Path=me}" Selected="Subscription_MarkAllAsRead">Mark all as Read</aea:SplitButtonItem>
<aea:SplitButtonItem Tag="{Binding Path=me}" Selected="Subscription_AddAllToFavorites">Add all to Favorites</aea:SplitButtonItem>
<aea:SplitButtonItem Tag="{Binding Path=me}" Selected="Subscription_ReadAllLater">Read all Later</aea:SplitButtonItem>
<aea:SplitButtonItem Tag="{Binding Path=me}" Selected="Subscription_OpenAllBrowser">Open all in browser</aea:SplitButtonItem>
</aea:MenuButton>
</Grid>
<!--<TextBlock Text="{Binding Path=Name}" FontWeight="Bold"/>-->
</HierarchicalDataTemplate>
Here is my other class:
public string IconFilePath { get; private set; }
public Subscription()
{
this.IconFilePath = #"C:\Users\Din\Din\Programming\Webs\Ended Projects\CodeCaged\Products\Read 360\Read 360\Read 360\bin\Release\feeds\1.ico";
}

You are binding relative to the DataContext so you need to make sure its an instance of that class. Also check for binding errors, not more to be said with this little context.

It is hard without a full code listing of how this control is setup (e.g. where and how is the DataContext set?, and how is the list of 'Items' populated?)
But on the surface it appears you're expecting to get both 'Name' and 'IconFilePath' from an Items element, so to confirm the Subscription Class defines both IconFilePath and Name?
A tool like Snoop can automatically display binding errors in a running applications visual tree; and I would expect it to list such in this case.
Also to reduce possible headaches (and this may well be the issue) it may be worth mentioning INotifyPropertyChanged for your data class. Property changes on your data class will not automatically progate otherwise.

LoopingSelector doesn't show up

I'm using the LoopingSelector as shown in this tutorial: WP7-LoopingSelector-in-depth--Part1. I just copied their XAML and C# code. I modified the XAML a bit to fit my layout but it's still similar to their tutorial though.
Here is my XAML code where I put the LoopingSelector:
<Grid>
<StackPanel Grid.Row="2">
<TextBlock Text="Countdown Time" HorizontalAlignment="Center"
FontSize="28" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<toolkitPrimitives:LoopingSelector x:Name="hSelector"
ItemMargin="2,3,3,2" ItemSize="100,100" />
<TextBlock Text=":" VerticalAlignment="Center" FontSize="64"
FontFamily="{StaticResource Digital7}"/>
<toolkitPrimitives:LoopingSelector x:Name="mSelector"
ItemMargin="2,3,3,2" ItemSize="100,100" />
<TextBlock Text="'" VerticalAlignment="Center" FontSize="64"
FontFamily="{StaticResource Digital7}"/>
<toolkitPrimitives:LoopingSelector x:Name="sSelector"
ItemMargin="2,3,3,2" ItemSize="100,100" />
</StackPanel>
</StackPanel>
</Grid>
where toolkitPrimitives is defined as:
xmlns:toolkitPrimitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assem‌​bly=Microsoft.Phone.Controls.Toolkit"
And here is what I did in the code behind:
this.hSelector.DataSource = new IntLoopingDataSource()
{
MinValue = 0,
MaxValue = 23,
SelectedItem = 0
};
this.mSelector.DataSource = new IntLoopingDataSource()
{
MinValue = 0,
MaxValue = 59,
SelectedItem = 1
};
this.sSelector.DataSource = new IntLoopingDataSource()
{
MinValue = 0,
MaxValue = 59,
SelectedItem = 0
};
I would have used TimePicker instead however it doesn't support picking Second. I need to pick Hour, Minute, and Second.

You need to set Width and Height and ItemSize on the looping selector. This control doesn't handle cases without an absolute size very well. That's why it doesn't work in a StackPanel.
StackPanels provide an infinite width and height.
Normally controls are supposed to handle those cases, but being a primitive control, they've made the assumption that those values will be set.

Through some experiments, I found out that, for some unknown reasons, LoopingSelector doesn't like StackPanel at all. If you want to have many LoopingSelector, the best way to achieve it is making a grid.
Here is my modified XAML:
<Grid>
<StackPanel Grid.Row="2">
<TextBlock Text="Countdown Time" HorizontalAlignment="Center" FontSize="28" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<toolkitPrimitives:LoopingSelector Grid.Column="0" x:Name="hSelector" ItemMargin="2,3,3,2" ItemSize="100,100" Height="300"/>
<TextBlock Grid.Column="1" Text=":" VerticalAlignment="Center" FontSize="64" FontFamily="{StaticResource Digital7}"/>
<toolkitPrimitives:LoopingSelector Grid.Column="2" x:Name="mSelector" ItemMargin="2,3,3,2" ItemSize="100,100" Height="300"/>
<TextBlock Grid.Column="3" Text="'" VerticalAlignment="Center" FontSize="64" FontFamily="{StaticResource Digital7}" />
<toolkitPrimitives:LoopingSelector Grid.Column="4" x:Name="sSelector" ItemMargin="2,3,3,2" ItemSize="100,100" Height="300"/>
</Grid>
</StackPanel>
</Grid>
Feel free to correct me if I'm wrong.
p.s. for someone who's familiar with StackOverflow, please help me format those XAML in my post because I don't know how to format it correctly.

EventBinding in a codebehind generated DataTemplate

lets begin with the scenario:
I have an ItemsControl inside a UserControl. In this ItemsControl I have a dynamicly created DataTemplate which is created and added in codebehind. As there doesn't seem to be a nice way to create a DataTemplate in codebehind I had to programmatically generate the xaml code for my DataTemplate into a string and then create a DataTemplate object out of it through XamlReader:
StringBuilder stringBuilder = new StringBuilder();
XmlWriter xmlWriter = XmlWriter.Create(stringBuilder);
... // use xmlWrite to generate desired xaml
// substring is use to cut out the xml declaration
DataTemplate template = (DataTemplate)XamlReader.Load(stringBuilder.ToString().Substring(39));
myItemsControl.ItemTemplate = template;
The generated XAML code looks like this and is actually used (the items get rendered as expected):
<DataTemplate xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Grid HorizontalAlignment="Stretch" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding b0}" Grid.Column="0" />
<TextBox Text="{Binding b1, Converter={StaticResource customConverter}}" HorizontalAlignment="Stretch" Grid.Column="1" LostFocus="TxtAttribute_LostFocus" />
<TextBox Text="{Binding b2, Converter={StaticResource customConverter}}" HorizontalAlignment="Stretch" Grid.Column="2" LostFocus="TxtAttribute_LostFocus" />
<TextBox Text="{Binding b3, Converter={StaticResource customConverter}}" HorizontalAlignment="Stretch" Grid.Column="3" LostFocus="TxtAttribute_LostFocus" IsReadOnly="True" />
</Grid>
In case you wonder: the xmlns attribute is needed by the XamlReader to render the control, else you'll get an exception when reaching the code.
My problem:
now while the items look like expected and data is correctly bound neither my customConverter that should reformat the bound data, nor the LostFocus event are correctly applied. I don't get any error messages or warnings, converter and event just don't get called. Anyone an idea why and how I can get this to work?
Update:
I reached a point where I have to solve this problem or to try a different approach.
In my last tests I tried to add the Converter directly in the DataTemplate but I had no luck. The generated code now looks like this:
<DataTemplate xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Conv="clr-namespace:my.Namespace" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Grid HorizontalAlignment="Stretch" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Conv:DecimalConverter x:Name="cnvDecimalConverter" />
</Grid.Resources>
<TextBlock Text="{Binding b0}" Grid.Column="0" />
<TextBox Text="{Binding b1, Converter={StaticResource cnvItemsDecimalConverter}}" HorizontalAlignment="Stretch" Grid.Column="1" LostFocus="TxtAttribute_LostFocus" />
<TextBox Text="{Binding b2, Converter={StaticResource cnvItemsDecimalConverter}}" HorizontalAlignment="Stretch" Grid.Column="2" LostFocus="TxtAttribute_LostFocus" />
<TextBox Text="{Binding b3, Converter={StaticResource cnvItemsDecimalConverter}}" HorizontalAlignment="Stretch" Grid.Column="3" LostFocus="TxtAttribute_LostFocus" IsReadOnly="True" />
</Grid>
</DataTemplate>
Any ideas?
Update 2:
As I just found out XamlReader.Load() just is not able to hook up events. See this Thread in the Silverlight Forums
The Converters should work, I guess I still have some kind of namespace problem I don't see. I'm kind of out of options with my "simple" ItemsControl approach so I think it's time to look for another method to reach my needs.

Just to clear up the situation: It is not possible to generate dynamic DataTemplates with events through generating an xaml string and extract the control from this. The only option to parse xaml code with events is through Application.LoadComponent which needs a URI to work.
I ended up using nested ItemControls to create my "dynamic" behaviour.