I'm using Anniversary Update (14393).
I can use this code to set ListViewItem Background.
<SolidColorBrush x:Name="ListViewItemBackground" Color="AntiqueWhite" />
Is it possible using this technique to set color for ListViewItem Selected/PointOver Background?
Yes, you can override the selected background brush for the ListView, so that it will use your color rather than the default. You do this by providing a ListView resource with the same key defined by the control.
<ListView>
<ListView.Resources>
<SolidColorBrush x:Key="ListViewItemBackgroundSelected" Color="Yellow"/>
<SolidColorBrush x:Key="ListViewItemForegroundSelected" Color="LimeGreen"/>
<SolidColorBrush x:Key="ListViewItemBackgroundSelectedPointerOver" Color="Blue"/>
</ListView.Resources>
</ListView>
UWP defines global brushes for all of its controls to make theming easy. By setting the resource within the ListView.Resources collection, these changes only affect this instance of the ListView.
If you want to set the same color scheme for the page or the entire app, you can override these brushes either in the Page or App resource dictionaries.
Related
The template is defined as:
<ContentPage.Resources>
<DataTemplate x:Key="MenuOptionTemplate">
<controls:MenuButtonControl />
</DataTemplate>
</ContentPage.Resources>
<ScrollView Orientation="Vertical">
<FlexLayout
AlignContent="Start"
AlignItems="Start"
BindableLayout.ItemTemplate="{StaticResource MenuOptionTemplate}"
BindableLayout.ItemsSource="{Binding MenuOptions}"
JustifyContent="SpaceEvenly"
VerticalOptions="Start"
Wrap="Wrap" />
</ScrollView>
The MenuButtonControl is define as:
...
<ImageButton
Source="{AppThemeBinding Light={Binding LightImageSource},
Dark={Binding DarkImageSource}}"/>
...
MenuOptions is is dynamically generated based on the user's role, but basically each menu option is create like so:
new MenuOption {
Title = "My Title",
LightImageSource = "sample_light",
DarkImageSource = "sample_dark"
}
{Binding LightImageSource} does not work.
So what is the correct way to implement this?
Because AppThemeBinding.Light is a markup extension (inherit from IMarkupExtension) property and not a BindableProperty you cannot use DynamicResource or Binding with it.
Thus you cannot use AppThemeBinding in this case. But you can use bindings (without AppThemeBinding), converters.. (see answers on the linked question), you just need to add the logic to conditionally set the appropriate image source based on the active theme using:
Application.Current.RequestedTheme;
Binding image source dynamically on xamarin forms
AppThemeBinding source
RequestedTheme
Edit
To react on theme changes use the event rather than testing the property RequestedThemeChanged:
How to detect Xamarin Forms System Theme Change
[UWP] I created a SolidColorBrush resource from SystemAccentColor color, I tried to add a converter to lighten the color but it work only at runtime... I see the color lighter but if I go in the settings OS and I change the accent color, it change in other texts while my color with converter doesn't work. Is there a method to "update" my resource when I change the system accent color?
In my app:
<Grid Background="{ThemeResource AuraAccent}"/>
<Grid Background="{ThemeResource AuraAccentLight1}"/>
ResourceDictionary:
<SolidColorBrush x:Key="AuraAccent" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="AuraAccentLight1" Color="{Binding Source={ThemeResource SystemAccentColor}, Converter={ThemeResource shade}, ConverterParameter=30}"/>
AuraAccent work in runtime and when I change the accent color.
AuraAccentLight1 work in runtime but doesn't work when I change the accent color.
How actually it work:
http://sharex.lucapatera.it/uploads/2016-08-31_19-34-32.mp4
I went through few of the resource dictionary files and noticed that The Dictionary will be loaded when App Initially Loads. The changes for Actual Theme Resource will be updated but not custom Brushes ( In your case AuraAccentLight1 because it uses a converter).
This is what I did. Instead of creating a ResourceDictionary with a Shade colour which works only once, I bound the second Grid to first grid saying when first Grid's colour change, second Grid Colour also should be updated.
So below is my XAML
<Grid x:Name="grid" Background="{ThemeResource AuraAccent}"/>
<Grid>
<Grid.Background>
<SolidColorBrush Color="{Binding Background.Color, Converter={StaticResource ColorHelper}, ElementName=grid,ConverterParameter=30}" />
</Grid.Background>
</Grid>
Let me know if this Helps.
Inspired by AVK Naidu, I have resolved in this way:
<SolidColorBrush x:Key="AuraAccentLight1" Color="{Binding Color, Source={ThemeResource AuraAccent}, Converter={ThemeResource shade}, ConverterParameter=30}"/>
Thanks to everyone
Final result:
http://sharex.lucapatera.it/uploads/2016-09-10_19-33-45.gif
In the Universal Windows Platform API, how do I use x:Bind inside of a User Control (intended to be the layout for a GridView's ItemTemplate) to bind to instance properties of a GridView's ItemSource?
Background
I'm trying to re-create the layout found in Windows 10 stock apps like Sports, News, Money, etc.
I'm using a two GridViews for the main area of the app; one for "featured articles" (2 large photos w/ headlines) and one for all the other articles (smaller photos w/ headlines).
I'm able to bind to a data source that I supply in the code behind (a List where NewsItem is a POCO with a Image and Headline property) Here's the pertinent parts of the MainPage.xaml:
<Page ...
xmlns:data="using:NewsApp.Models" />
....
<GridView Name="FeaturedItems" Grid.Row="0">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:NewsItem">
<Grid Name="mainPanel" HorizontalAlignment="Stretch" Width="500" >
<Image Source="{x:Bind Image}" HorizontalAlignment="Stretch" />
<TextBlock Text="{x:Bind Headline}" />
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
....
The Image and Headline bind just fine (even though they've not been styled correctly). However, instead I think I need to bind to a User Control to get the styling options I want, control over resizing esp. when using Visual State Triggers and to simplify the XAML in general (at least, this was the technique suggested to me.)
So, I added a new User Control to the project (FeaturedItemControl.xaml), and copied in the DataTemplate's child Grid:
<UserControl ... >
<Grid Name="mainPanel" HorizontalAlignment="Stretch" Width="500" >
<Image Source="{x:Bind Image}" HorizontalAlignment="Stretch" />
<TextBlock Text="{x:Bind Headline}" />
</Grid>
</UserControl>
And then back in the MainPage.xaml, I change the DataTemplate to reference the new FeaturedItemControl:
<GridView Name="FeaturedItems" Grid.Row="0">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:NewsItem">
<local:FeaturedItemControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
However, I get the error message for both Image and Headline properties: Invalid binding path 'Headline': Property 'Headline' can't be found on type 'FeaturedItemControl'.
I've tried a few things but am flailing just throwing code at the problem without understanding what I'm doing. Any help would be greatly appreciated.
Thank you for your kind attention.
Using Depechie's answer, I formulated this little cheat cheat for posterity:
Do note that you MUST use this technique to utilize the VisualStateManager with items inside your data bound controls' (GridView, ListView) data templates.
1) Create a User Control.
2) Cut the content of the DataTemplate in your page and paste it into the User Control replacing the template's Grid.
3) Reference the User Control from inside the Data Template:
4) Modify the contents of the User Control changing x:Bind statements to utilize object.property notation:
<UserControl>
<StackPanel>
<Image Source="{x:Bind NewsItem.LeadPhoto}" />
<TextBlock Text="{x:Bind NewsItem.Headline}" />
<TextBlock Text="{x:Bind NewsItem.Subhead}" />
</StackPanel>
</UserControl>
5) Add this in the User Control's Code Behind:
public Models.NewsItem NewsItem { get { return this.DataContext as Models.NewsItem; } }
public ContactTemplate()
{
this.InitializeComponent();
this.DataContextChanged += (s, e) => Bindings.Update();
}
Well it's possible to use x:Bind in user controls, but you'll need to add some extra code behind.
I encountered the same problem in my project, you can see the result here : https://github.com/AppCreativity/Kliva/tree/master/src/Kliva/Controls
So what you need to do is, create a property in the code behind of your user control that points to the correct DataContext.
If you do that, you can use properties of that DataContext in the xaml of your control: for example:
Do note that in the constructor of your control you do need to add: DataContextChanged += (sender, args) => this.Bindings.Update(); because the datacontext will change depending on the page where your control is used!
Then on the page where you are placing this control, you'll also need to do the same to enable the x:bind to work.
You'll see this in my example on the MainPage.DeviceFamily-Mobile.xaml and MainPage.xaml.cs files.
Hope this helps.
x:Bind isn't really hierarchical like Binding/DataContext is. Additionally when you're not directly inside a DataTemplate (such as inside your user control) the object that x:Bind tries to use is 'this' rather than 'this.DataContext'. My current line of thinking on how to solve this sort of issue is to try not to use UserControls anywhere. Instead preferring DataTemplates contained within a ResourceDictionary. There are some pretty strong caveats to this approach though, you will for example crash the xaml compiler if you use x:Bind inside a data template that was created from the ResourceDictionary item template (add new item). you can find a pretty complete example here https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlBind its important to note in the sample where they show the ResourceDictionary being used that its not actually just a ResourceDictionary.xaml its also a ResourceDictionary.xaml.cs (this is where the generated code from x:Bind ends up)
Another option is to add Headline and Image as properties on your user control and x:Bind them from the template, then inside the user control x:Bind as you are currently doing, but now the x:Bind generated path 'this.Headline' will exist. Unfortunately the order things are actually bound means that the x:Bind's you have inside your user control will have to be OneWay rather than the default OneTime. this is because x:Bind OneTime does the bind inside the InitializeComponent call, and any set of properties/DataContext stuff doesn't get done until after that has already run.
So to sum this up, you have two options, use data templates everywhere, or bind to properties that are directly on the user control.
I am trying to design a simple tabbed app using universal windows platform (UWP) using Pivot control.
I have customized header that includes other controls than just a textblock. I am targeting to change color of those controls/graphics on selection of particular PivotItem using triggers in xaml. Default color updates on selection & hover only apply on textblock but not on other controls.
I can try binding color of other controls with forecolor of textblock because I cannot find template binding not control template in UWP xaml. binding with textblock will still give less space for customization as I am targeting AccentColor for header controls/graphics which are defined by MSFT in UAP sdk and we can access them as static resource from generic.xaml. e.g. SystemControlBackgroundAccentBrush. I looked in to xaml triggers as MSFT new xaml architecture allows us to define VisualStateGroups and work using AdaptiveTriggers & StateTrigger. I can't find any other type of triggers like datatriggers, eventtriggers nothing...
<PivotItem>
<PivotItem.Header>
<StackPanel Orientation="Horizontal">
<Path Stretch="Uniform"
Fill="{StaticResource PivotForegroundThemeBrush}"
Width="32pt"
Height="32pt"
Data="M0,33.893959L4.4794149,33.893959 4.4794149,44.677959 48.903614,44.677959 48.903614,33.893959 53.333035,33.893959 53.333035,49.104958 0,49.104958z M24.842734,0L28.513577,0 28.513577,24.615005 35.345016,17.78297 40.346104,17.78297 40.436089,17.883007 26.673088,31.644001 24.072548,29.047991 12.910089,17.883007 13.010208,17.78297 18.001283,17.78297 24.842734,24.615005z"/>
<TextBlock Text="Downloads"
VerticalAlignment="Center" Margin="5"
FontSize="{StaticResource PivotHeaderItemFontSize}"/>
</StackPanel>
</PivotItem.Header>
<Grid></Grid>
</PivotItem>
I want to change selected item background color of my GridView based on pages. I define a Color property in each ViewModels, then assign the ViewModel to the view's DataContext. I edit the ItemContainerStyle in app.xaml and want to bind the ViewModel's color property to the selectionbackground, so that the background color of selected item is different in each views, but it doesn't work, I couldn't see the expected color. Anyone can help?
If we apply styles in the app.xaml page they will apply to all our application.
I think you can do this by defining your resources at page level using "UserControl.Resources" in your page.
<UserControl.Resources>
<Style TargetType="...">
...
</Style>
</UserControl.Resources>
You can even set key property in the style and apply to the control like bellow
<UserControl.Resources>
<Style x:Key="my_key" TargetType="...">
....
</Style>
</UserControl.Resources>