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

Hub with dynamic HubSections with GridViews and DataBinding

I would like to create a Hub with several HubSections via code. Each HubSection owns a single GridView so it look like every HubSection is a table (fullscreen) and I swipe left/right to view every table.
In my XAML page is only Hub the other stuff should be done by code. The HubSections should be created at runtime. For this I use a local settings storage to save some information about this, like how many HubSections etc.
Creating new HubSections is no problem but I'm stuck at adding a GridView to each HubSection because I don't understand the logic here. It looks like I have to add a DataTemplate and a GridView but my attempts all failed.
Note: each GridView has also it's own databinding from a Observable Collection.
So how to add a (?DataTemplate?) GridView with databinding to a HubSection ?

With a DataTemplate you build your layout. I have used in a Project following template to show a few data per day and create one Section for each day:
<Page.Resources>
<CollectionViewSource x:Name="HubViewModel"/>
<DataTemplate x:Key="DataTemplate">
<Grid Background="Transparent" Width="300" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,20">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" HorizontalAlignment="Center">
<TextBlock Text="{Binding SumShipmentsSA}" Style="{ThemeResource HeaderTextBlockStyle}" TextAlignment="Center" TextWrapping="NoWrap"/>
</StackPanel>
<StackPanel Grid.Row="1" HorizontalAlignment="Center">
<StackPanel Orientation="Horizontal">
<TextBlock x:Uid="SummaryHubNat" Text="National" FontSize="10" Width="100" VerticalAlignment="Center" Margin="0,0,20,0"/>
<TextBlock Text="{Binding CountShipmentsNationalSA}" Style="{ThemeResource BodyTextBlockStyle}" TextWrapping="NoWrap"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock x:Uid="SummaryHubInt" Text="International" FontSize="10" Width="100" VerticalAlignment="Center" Margin="0,0,20,0"/>
<TextBlock Text="{Binding CountShipmentsInternationalSA}" Style="{ThemeResource BodyTextBlockStyle}" TextWrapping="NoWrap"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock x:Uid="SummaryHubCharter" Text="Charter" FontSize="10" Width="100" VerticalAlignment="Center" Margin="0,0,20,0"/>
<TextBlock Text="{Binding CountShipmentsCharterSA}" Style="{ThemeResource BodyTextBlockStyle}" TextWrapping="NoWrap"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</Page.Resources>
.
.
<Hub x:Name="MainHub" DataContext="{Binding Source={StaticResource HubViewModel}}" Margin="0,0,0,20"/>
In the Code page I used the following method to create to the Section:
private void AddHubSection(IEnumerable<DaySummary> list)
{
if (list != null)
{
list = list.OrderByDescending(x => x.Date);
foreach (var item in list)
{
if (item.Date.Date.Equals(DateTime.Now.Date))
{
continue;
}
HubSection hubSection = new HubSection();
TextBlock headerTextBlock = new TextBlock();
headerTextBlock.Text = item.Date.ToString("dddd dd.MMM");
headerTextBlock.FontSize = 15;
hubSection.Header = headerTextBlock;
hubSection.Margin = new Thickness(0);
object dataTemplate;
this.Resources.TryGetValue("DataTemplate", out dataTemplate);
hubSection.ContentTemplate = dataTemplate as DataTemplate;
hubSection.DataContext = item;
hubSection.DoubleTapped += HubSection_DoubleTapped;
MainHub.Sections.Add(hubSection);
}
}
}
I think the example can help you have fun while trying.

Why I can't bind the Command to the button?

I work on a project target on Windows Phone 7.5 and above.
What I have
ListBox
<ListBox HorizontalAlignment="Left"
VerticalAlignment="Top"
SelectedItem="{Binding singleFavListItem, Mode=TwoWay}"
ItemTemplate="{StaticResource userFavBoardListItemTemplate}"
ItemsSource="{Binding userfavboardlist}"
ScrollViewer.VerticalScrollBarVisibility="Disabled" Margin="12,0,0,12"/>
ItemTemplate
<DataTemplate x:Key="userFavBoardListItemTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70*"/>
<ColumnDefinition Width="30*"/>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Left"
TextWrapping="Wrap"
Text="{Binding boardName}"
VerticalAlignment="Center"
FontSize="{StaticResource PhoneFontSizeMedium}"
Foreground="{StaticResource TitleColor}"/>
<Button Command="{Binding quitBoardCommand}"
CommandParameter="{Binding boardUrl}"
Content="Quit"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Grid.Column="1"
FontSize="{StaticResource PhoneFontSizeSmall}"
BorderBrush="{StaticResource DateArticalCategoryColor}"
Foreground="{StaticResource DateArticalCategoryColor}">
</Button>
</Grid>
</DataTemplate>
ViewModel
public MyFavListViewModel()
{
this._quitBoardCommand = new DelegateCommand(this.quitBoardAction);
}
private ICommand _quitBoardCommand;
public ICommand quitBoardCommand
{
get
{
return this._quitBoardCommand;
}
}
private void quitBoardAction(object p)
{
//my business logic here
}
Error
I found a error in the OutPut windows:
'xicihutong.Model.UserFavBoardListRawData' (HashCode=55845053).
BindingExpression: Path='quitBoardCommand'
DataItem='xicihutong.Model.UserFavBoardListRawData'
(HashCode=55845053); target element is
'System.Windows.Controls.Button' (Name=''); target property is
'Command' (type 'System.Windows.Input.ICommand')..
What's the problem
What confuse me is that the quitBoardCommand never get triggered when I tap the button? It seems that I can't bind the Command to the button, the DelegateCommand part is right, because I can use it to bind command in other pages. And the SelectedItem of the ListBox works right, also.
Why I can't bind this one?

You need to reference the DataContext of your ListBox to bind to your command. To fix this, give your ListBox a name then reference the command property
<ListBox x:Name="myLB"
<!-- rest of your stuff -->
/>
<Button
Command="{Binding Path=DataContext.quitBoardCommand, ElementName=myLB}"
CommandParameter="{Binding boardUrl}"
Content="Quit" />

Can you try this code. You don't forget to change "datacontext" name.
<DataTemplate x:Key="userFavBoardListItemTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70*"/>
<ColumnDefinition Width="30*"/>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Left"
TextWrapping="Wrap"
Text="{Binding boardName}"
VerticalAlignment="Center"
FontSize="{StaticResource PhoneFontSizeMedium}"
Foreground="{StaticResource TitleColor}"/>
<Button Command="{Path=quitBoardCommand,Source={StaticResource datacontext}}"
CommandParameter="{Binding boardUrl}"
Content="Quit"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Grid.Column="1"
FontSize="{StaticResource PhoneFontSizeSmall}"
BorderBrush="{StaticResource DateArticalCategoryColor}"
Foreground="{StaticResource DateArticalCategoryColor}">
</Button>
</Grid>
</DataTemplate>

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.

How to change datatemplate through code

I have ListBox and DataTemplate
I need Set GroupBox Heigth = 300
How to do it?
<DataTemplate x:Key="data_template">
<GroupBox Header="Категория" Width="300" HorizontalAlignment="Stretch" x:Name="GroupBox">
<DockPanel Tag="{Binding id}">
<Button Click="Button_Click" DockPanel.Dock="Top" >
<Button.Content>
<DockPanel>
<TextBlock Text="{Binding title}" TextWrapping="Wrap" DockPanel.Dock="Top" Padding="5" HorizontalAlignment="Center" Foreground="#FFB51414" />
<l:ScrollViewerEx VerticalScrollBarVisibility="Auto" >
<TextBlock Text="{Binding description}" DockPanel.Dock="Top" TextWrapping="Wrap" Padding="5" IsHitTestVisible="False" />
</l:ScrollViewerEx>
</DockPanel>
</Button.Content>
</Button>
</DockPanel>
</GroupBox>
</DataTemplate>

In case, someone tried to resolve my previous question, I did it like the following:
DataTemplate mycolumnDataTemplate = null;
var dataTemplateStream = new SomeClass().GetType().Assembly.GetManifestResourceStream("Some.Namespace.SomeReosurceName.xaml");
string dataTemplateString = new System.IO.StreamReader(dataTemplateStream).ReadToEnd();
dataTemplateString = dataTemplateString.Replace("[0]", browserColumn.ColumnName);
mycolumnDataTemplate = XamlReader.Load(dataTemplateString) as DataTemplate;

What are you trying to achieve? Do you want the GroupBox Height to be changed at the runtime of your application, when some event occurred or some data has changed? If so, then what you are probably looking for is a data trigger or event trigger, which you simply need to add to your DataTemplate.