SystemAccentColor + Converter - xaml

[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

Related

"Shortcut" for Setting ListViewItem Selected Background

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.

Implement IE/Microsoft Edge bottom bar in XAML

I am a huge fan of the browser on Windows phone and I want to port a similar bottom bar to my app. Right now, I am using a standard CommandBar.
<Page.BottomAppBar>
<CommandBar>
<AppBarButton Icon="Go" Click="Go"/>
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Setting" Label="Settings" Click="ShowSettings"/>
</CommandBar.SecondaryCommands>
</CommandBar>
</Page.BottomAppBar>
As this wastes screen space, I really want to make use of the remaining space of the bar to add something like app status (in place of the address bar of Edge/IE), something like download/upload progress. Unfortunately, the CommandBar does not allow introducing things like TextBlock or ProgressRing. To make use of those controls, we need to change to an AppBar instead. But then, I cannot use the features of CommandBar like the adding 3 dots buttons to open up the hidden buttons.
Is there an easy way to achieve this i.e. combining the flexibility of AppBar and the 3-dot feature of CommandBar?
CommandBar only accept the control that inherit ICommandBarElement interface.
We can create one UserControl which inherit ICommandBarElement, simply did a small test without optimize the code, take a look to see if it helps:
public sealed partial class MyUserControl1 : UserControl, ICommandBarElement
{
public MyUserControl1()
{
this.InitializeComponent();
}
private bool _IsCompact = true;
bool ICommandBarElement.IsCompact
{
get
{
return _IsCompact;
}
set
{
_IsCompact = value;
}
}
}
Also the UserControl XAML:
<UserControl
x:Class="App10.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignWidth="400" Height="38.027">
<Grid>
<TextBlock Foreground="DarkBlue">asdsadasdasdasdasda</TextBlock>
</Grid>
And then we use the userControl in the CommandBar, here we go:
http://i.stack.imgur.com/Bgug9.png
Note: please further optimize it for instance register some Text dependency properties to enable accept the data binding.
Per the documentation on MSDN you can use the CommandBar.Content property which corresponds to the empty area to the side of any primary commands. To alter the alignment of the content you'd need to change the CommandBar.HorizontalContentAlignment property.
<CommandBar HorizontalContentAlignment="Stretch">
<AppBarButton Icon="Go" Click="Go"/>
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Setting" Label="Settings" Click="ShowSettings"/>
</CommandBar.SecondaryCommands>
<CommandBar.Content>
<Grid>
<TextBox HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Margin="12,8"/>
</Grid>
</CommandBar.Content>
</CommandBar>
And as of Win10 the recommendation is to place the CommandBar inline instead of using the Page.TopAppBar or Page.BottomAppBar properties. The one scenario in which you may still want to use the Page.BottomAppBar property is to ensure the CommandBar remains visible when the software keyboard appears.

UAP xaml triggers/data-triggers

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>

How to set a background to a textBlock that changes its content

Background
I'm trying to put a textBlock control at the bottom of the screen (with a small margin below it), and I also wish to set a background for it, so that no matter what is shown behind the textBlock, it will be easy to read.
On Android, you could simply set the background to it, and tell it to have the width and height to be WRAP_CONTENT, so that it will take only the space it needs, but I can't find a similar thing on WP8.
Current status
This is the xaml I've created:
...
<Grid >
<Image x:Name="fullScreenImage" Stretch="Fill"
Visibility="Collapsed" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Bottom"
Margin="0,0,0,200" FontSize="40" x:Name="pictureLabel" TextWrapping="Wrap"
Foreground="#ff000000" />
</Grid>
The problem
Since the textBlock doesn't have a background property, I had to use something that wraps it. However, since its content changes dynamically, I can't simply set a size for it.
The question
For now, I would like to simply set its background color.
I would also very appreciate if it would be possible to use a rounded corners rectangle for the background, or a 9-patch image.
How can I achieve setting a background for the textBlock?
The solution is very simple. Just set the HirizontalAlignment to Left. Hope this will work in your case.
<StackPanel HorizontalAlignment="Left">
<Border Background="#66FFFFFF">
<TextBlock/>
</Border>
</StackPanel>
According to this question (which is for Silverlight - but is xaml nonetheless), there is no way to explicitly set a background color for a TextBlock. Your best bet is to wrap your TextBlock in a Grid or Border.
If a Grid does not work, this article suggests a Border will do the trick:
A simple border will do, and by not setting its width and height
properties, it will shrink/grow based on the size of the TextBlock.
I've come up with the next solution , which works quite fine , but what i really would like to also have is a way to set a min font and max font size , so that if there is a single word , the font might need to be of some size, and if the text is too long , the font will be of a smaller size , all in a dynamic way.
code:
label.Text = label;
label.Measure(new Size(RenderSize.Width, RenderSize.Height));
border.Width = label.DesiredSize.Width + border.Padding.Left + border.Padding.Right + border.BorderThickness.Left + border.BorderThickness.Right;
border.Height = label.DesiredSize.Height + border.Padding.Top + border.Padding.Bottom + border.BorderThickness.Bottom + border.BorderThickness.Top;
and the xaml:
<Border BorderBrush="#ff000000" BorderThickness="2" CornerRadius="8" Visibility="Collapsed" Padding="5" Background="#bfff0000" Margin="10,0,10,200" VerticalAlignment="Bottom" x:Name="border">
<StackPanel>
<TextBlock FontSize="40" x:Name="pictureLabel" TextWrapping="Wrap" Foreground="#ff000000" />
</StackPanel>
</Border>

How to centre an item over a point in a Canvas?

I'm using a ListBox with its DataTemplate containing a Canvas. I then bind the Left/Top of the Grid containing that Canvas to move it to a certain point.
I want to then have the child Grid centred at the X,Y coordinates I've specified, where the size of the child Grid is variable based on its content. I was planning on achieving this by using a TranslateTransform to move the Grid by half of its width.
I can't see how I can set that TranslateTransform however as ElementName binding doesn't work within a DataTemplate. Any ideas how I can achieve this?
<ItemsControl ItemsSource="{TemplateBinding SomeCollection}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas>
<Grid x:Name="Container"
Canvas.Left="{Binding X}"
Canvas.Top="{Binding Y}"
Background="#88000000">
<Grid.RenderTransform>
<TranslateTransform X="{Binding ActualWidth, ElementName=Container, Converter={StaticResource NegativeHalfConverter}}"
Y="{Binding ActualHeight, ElementName=Container, Converter={StaticResource NegativeHalfConverter}}" />
</Grid.RenderTransform>
<TextBlock Text="{Binding SomeValue}" FontSize="36" Foreground="White" />
</Grid>
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
`
I think ElementName binding should work in the name scope of a DataTemplate, but I have seen people complaining about bindings not updating correctly when binding to ActualWidth/Height properties. Perhaps instead of doing the complicated setup you have you could just implement an attached behavior that takes a Point parameter and updates the Canvas.Left/Top properties whenever the parameter or size of the associated object (your grid) changes.
Looks like the fault wasn't with the binding itself, but with a feature that means the ActualWidth/ActualHeight properties aren't bindable. Thanks Filip.
To fix this I created a derived Grid with a couple of new dependency properties that I update in the SizeChanged events to have the ActualWidth/Height. I then use my DataTemplate as above, binding to these new DPs to translate and centre my Grid on a point. Seems to work a treat.
To move an object by half of its size you can use 2 rotations or scales: first is over 0.25,0.25 relative point, second is over the enter point 0.5,0.5. If you use rotations then angels are 180 degrees and -180 degrees. If you use scales then scale factors are -1,-1 and -1,-1.
Do not forget about RenderTransformOrigin property. And to apply two transforms you can apply them to two nested elements.