Can Maui configure a shadow in a line? - xaml

I´m developing an app in .net maui and i have a question i have not answered myself through browsing.
I'm trying to apply a shadow to a border and the following code works perfectly.
<Border
Style="{StaticResource light-theme-border}"
Grid.Column="1"
Grid.Row="3"
Grid.ColumnSpan="7">
<Border.Shadow>
<Shadow
Brush="red"
Offset="1,11"
Radius="20"
Opacity="0.25"/>
</Border.Shadow>
</Border>
But when i write shadow directly inside the border properties it catches the property but i don't know how to dump the [brush, offset, radius & opacity] info:
<Border
Style="{StaticResource light-theme-border}"
Grid.Column="1"
Grid.Row="3"
Grid.ColumnSpan="7"
Shadow="???????????????????????????">
</Border>

You can then define and consume it as a resource (same what you did with Style property):
<ContentPage.Resources>
<ResourceDictionary>
<Shadow
x:Key="CommonShadow"
Brush="red"
Offset="1,11"
Radius="20"
Opacity="0.25"/>
<Border
Style="{StaticResource light-theme-border}"
Grid.Column="1"
Grid.Row="3"
Grid.ColumnSpan="7"
Shadow="{StaticResource CommonShadow}">
</Border>
Or integrate it in your existing style of Border
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="light-theme-border" TargetType="Border">
<Setter Property="WidthRequest" Value="20" />
<Setter Property="Shadow">
<Setter.Value>
<Shadow
Brush="red"
Opacity="1"
Radius="50"
Offset="20,20" />
</Setter.Value>
</Setter>
</Style>
<Border
Style="{StaticResource light-theme-border}"
Grid.Column="1"
Grid.Row="3"
Grid.ColumnSpan="7">
</Border>
Or integrate it in your existing style of Border as a static resource
<ContentPage.Resources>
<ResourceDictionary>
<Shadow
x:Key="CommonShadow"
Brush="red"
Offset="1,11"
Radius="20"
Opacity="0.25"/>
<Style x:Key="light-theme-border" TargetType="Border">
<Setter Property="WidthRequest" Value="20" />
<Setter Property="Shadow" Value="{StaticResource CommonShadow}"/>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<Border
Style="{StaticResource light-theme-border}"
Grid.Column="1"
Grid.Row="3"
Grid.ColumnSpan="7">
</Border>

Related

How Can I Reuse an Icon in Resources in UWP? In WPF, I'd use x:Shared=false

I am trying to create a button Style that I can use for a "Lookup" button throughout my UWP app. However, the icon only appears on the first button on the screen. I tried this solution using templates, but it is not working for me. Thanks for the help.
Code:
<Page.Resources>
<ControlTemplate x:Key="FindSymbolTemplate">
<SymbolIcon Symbol="Find" Foreground="White" />
</ControlTemplate>
<Style TargetType="Button" x:Key="LookupButton">
<Setter Property="Content">
<Setter.Value>
<ContentControl Template="{StaticResource FindSymbolTemplate}" />
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
....
<Button x:Name="tourNumLookup"
Style="{StaticResource LookupButton}"
Grid.Column="1"
Margin="10,0"
VerticalAlignment="Center" />
....
<Button x:Name="customerIdLookup"
Style="{StaticResource LookupButton}"
VerticalAlignment="Center"
Grid.Column="1"
Grid.Row="1"
Margin="10,0" />
The two buttons in the UI. Only the first has the SymbolIcon content.
#Romasz's solution absolutely works, but what if you want a lightly different Foreground on the SymbolIcon inside another Button?
Here's a potentially more flexible way that I normally go with.
First let's create a base Style that holds some default values for all the icons.
<Style x:Key="Style-Icon-Base"
TargetType="ContentControl">
<!-- If you don't specify the Foreground, it will use its ancestor's -->
<!--<Setter Property="Foreground"
Value="White" />-->
<Setter Property="HorizontalContentAlignment"
Value="Center" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="Width"
Value="20" />
<Setter Property="Height"
Value="20" />
<Setter Property="Padding"
Value="0" />
</Style>
Then we create a new icon Style which inherits from the one above. Note within the ControlTemplate I have used TemplateBinding to make property values dynamic. TemplateBinding isn't available inside a DataTemplate.
<Style x:Key="Style-Icon-Find"
BasedOn="{StaticResource Style-Icon-Base}"
TargetType="ContentControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<!--
'cause you cannot change the size of the SymbolIcon, we insert a Viewbox here,
otherwise you don't need it.
-->
<Viewbox Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<SymbolIcon Symbol="Find"
Foreground="{TemplateBinding Foreground}" />
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This way you have created a highly reusable icon Style, to use it, have a look at the following Buttons:
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center">
<Button Margin="4"
Padding="8"
BorderBrush="LightBlue">
<ContentControl Width="36"
Height="36"
Foreground="DarkCyan"
Style="{StaticResource Style-Icon-Find}" />
</Button>
<!-- Note how I defined the Foreground at the Button level and it flows down to the icon -->
<Button Foreground="DarkGoldenrod"
Margin="4">
<StackPanel Orientation="Horizontal">
<ContentControl Style="{StaticResource Style-Icon-Find}"
Width="16"
Height="16" />
<TextBlock Text="Search"
VerticalAlignment="Center"
Margin="8,0,0,0" />
</StackPanel>
</Button>
<Button Margin="4"
Padding="4">
<ContentControl Style="{StaticResource Style-Icon-Find}" />
</Button>
</StackPanel>
And they look like:
Generally UI elements can be used once (or saying different - have only one parent) - this is probably why it only works for the first button in your case. One solution may be to define DataTemplate and use it as ContentTemplate, so each button creates its own icon:
<Page.Resources>
<DataTemplate x:Key="FindTemplate">
<SymbolIcon Symbol="Find" Foreground="White" />
</DataTemplate>
</Page.Resources>
...
<Button x:Name="tourNumLookup" ContentTemplate="{StaticResource FindTemplate}"
Grid.Column="1" Margin="10,0" VerticalAlignment="Center" />
<Button x:Name="customerIdLookup" ContentTemplate="{StaticResource FindTemplate}"
VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" Margin="10,0" />
You don't need to create ControlTemplate to reuse the icon. You can simply put this SymbolIcon to the resource dictionary and use as StaticResource for the buttons' Content.
<Page.Resources>
<SymbolIcon x:Key="FindSymbol" Symbol="Find" Foreground="White" />
</Page.Resources>
<Button x:Name="tourNumLookup"
Content="{StaticResource FindSymbol}"
Grid.Column="1"
Margin="10,0"
VerticalAlignment="Center" />
<Button x:Name="customerIdLookup"
Content="{StaticResource FindSymbol}"
VerticalAlignment="Center"
Grid.Column="1"
Grid.Row="1"
Margin="10,0" />
UPDATE
BTW this is possibly a bug in the UWP platform, because I tried the following code and only the first Button rendered the icon at desing time and none of the at runtime.
<Page.Resources>
<SymbolIcon x:Key="FindSymbol" Symbol="Find" Foreground="White" />
<Style TargetType="Button" x:Key="LookupButton">
<Setter Property="Content" Value="{StaticResource FindSymbol}"/>
</Style>
</Page.Resources>
<StackPanel>
<Button x:Name="tourNumLookup"
Style="{StaticResource LookupButton}"
Margin="10,0"
VerticalAlignment="Center" />
<Button x:Name="customerIdLookup"
Style="{StaticResource LookupButton}"
VerticalAlignment="Center"
Margin="10,0" />
</StackPanel>
I tried to assign the Setter's Value directly but I got the same result. And also tried with FontIcon.

How to define ResourceDictionary by adding Style in Xamarin xaml {GroupStyle}

I'm trying to make something like set atribute to all labels inside a grid
I Know how to make it, just doing this:
<Grid RowSpacing="2" Padding="2,0,2,0">
<Grid.Resources>
<ResourceDictionary>
<Style BasedOn="{StaticResource Font-Awesome}" TargetType="Label"/>
</ResourceDictionary>
</Grid.Resources>
<Label Text="31 " Grid.Column="0" TextColor="#2764B5" XAlign="Start"/>
<Label Text="91 " Grid.Column="1" TextColor="#A0A1A2" XAlign="Center"/>
<Label Text="12 " Grid.Column="2" TextColor="#A0A1A2" XAlign="End"/>
</Grid>
But Its Ugly and redundant
I want to do smetthing like
<Grid RowSpacing="2" Padding="2,0,2,0" Style="{StaticResource grd-actions}">
<Label Text="31 " Grid.Column="0" TextColor="#2764B5" XAlign="Start"/>
<Label Text="91 " Grid.Column="1" TextColor="#A0A1A2" XAlign="Center"/>
<Label Text="Compartilhar " Grid.Column="2" TextColor="#A0A1A2" XAlign="End"/>
</Grid>
And On App Static Resources include the ResourceDictionary for the grid, something like:
<Style x:Key="gd-actions" TargetType="Grid">
<Setter Property="Resources">
<Setter.Value>
<ResourceDictionary>
<Style BasedOn="{StaticResource Font-Awesome}" TargetType="Label"/>
</ResourceDictionary>
</Setter.Value>
</Setter>
</Style>
I've being trying with a lot of ways but it's aways throw some kind of exception!
Can someone help-me Here?
I guess the most clean way to do this is by using Explicit Styles with Global Resources. Declare the style for that Labels in Application Resources and then in you label just add the Style Property:
Application:
<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="xforms_test.App">
<Application.Resources>
<ResourceDictionary>
<Style x:Key="labelAquaStyle" TargetType="Label">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="TextColor" Value="Aqua" />
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
And in your page:
<Grid RowSpacing="2" Padding="2,0,2,0">
<Label Grid.Column="0" Text="These labels" Style="{StaticResource labelAquaStyle}" />
<Label Grid.Column="1" Text="are demonstrating" Style="{StaticResource labelAquaStyle}" />
<Label Grid.Column="2" Text="explicit styles" Style="{StaticResource labelAquaStyle}" />
</Grid>

LayoutAnchorable Title font

For the XAML below I'm using AvalonDock 2.0.2. I'm wanting to set the font of the Title property of the LayoutAnchorable
<xcad:DockingManager Name="TabItemDockingManager"
AllowMixedOrientation="True"
BorderBrush="Black"
BorderThickness="0" Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
AnchorablesSource="{Binding Anchorables, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" viewModels:AvalonDockLayoutSerializer.LoadLayoutCommand="{Binding ADLayout.LoadLayoutCommand}" viewModels:AvalonDockLayoutSerializer.SaveLayoutCommand="{Binding ADLayout.SaveLayoutCommand}">
<xcad:DockingManager.LayoutUpdateStrategy>
<pane:LayoutInitializer/>
</xcad:DockingManager.LayoutUpdateStrategy>
<xcad:DockingManager.LayoutItemTemplateSelector>
<pane:PanesTemplateSelector>
<pane:PanesTemplateSelector.MyViewTemplate>
<DataTemplate>
...
</DataTemplate>
</pane:PanesTemplateSelector.MyViewTemplate>
</pane:PanesTemplateSelector>
</xcad:DockingManager.LayoutItemTemplateSelector>
<xcad:DockingManager.LayoutItemContainerStyleSelector>
<pane:PanesStyleSelector>
<pane:PanesStyleSelector.ToolStyle>
<Style TargetType="{x:Type xcad:LayoutAnchorableItem}">
<Setter Property="Title" Value="{Binding Model.Title}"/>
<Setter Property="IconSource" Value="{Binding Model.IconSource}"/>
<Setter Property="Visibility" Value="{Binding Model.IsVisible, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}, ConverterParameter={x:Static Visibility.Hidden}}"/>
<Setter Property="ContentId" Value="{Binding Model.ContentId}"/>
<Setter Property="IsSelected" Value="{Binding Model.IsSelected, Mode=TwoWay}"/>
<Setter Property="IsActive" Value="{Binding Model.IsActive, Mode=TwoWay}"/>
</Style>
</pane:PanesStyleSelector.ToolStyle>
</pane:PanesStyleSelector>
</xcad:DockingManager.LayoutItemContainerStyleSelector>
<xcad:LayoutRoot x:Name="_LayoutRoot">
<xcad:LayoutPanel Orientation="Vertical">
<xcad:LayoutAnchorablePane Name="AnchorablesPane" DockHeight="150">
</xcad:LayoutAnchorablePane>
</xcad:LayoutPanel>
</xcad:LayoutRoot>
</xcad:DockingManager>
I can set the Title text (which is done via reading/loading the layout), however I don't see a Font/FontFamily property I can set
Does anyone know how this can be done ?
Thanks to Attila (apols that I cannot mark his answer as I don't have enough points)
AvalonDock 2.2 - Full width TitleTemplate (fill parent container)
AvalonDock is a fantastic library - that said implementing it with MVVM is a challenge but the below seems to work well
<xcad:DockingManager.Resources>
<DataTemplate x:Key="DockingWindowTitleDataTemplate" DataType="{x:Type xcad:LayoutContent}">
<Label>
<TextBlock Text="{Binding Path=Title}" Margin="5,0,0,0" VerticalAlignment="Center" FontSize="14" />
</Label>
</DataTemplate>
</xcad:DockingManager.Resources>
<xcad:DockingManager.AnchorableTitleTemplate>
<StaticResource ResourceKey="DockingWindowTitleDataTemplate" />
</xcad:DockingManager.AnchorableTitleTemplate>

Windows Phone Jump List With Fixed Color

I'm trying to create a group sorted long list selector for a windows phone 8 app and I need it's color to be fixed, to mach the app's color theme... I'm being able to set the background color with no problem, but what is happening is that the disabled letters background does not appear grayed-out, instead they are appear with the same color as the enabled ones... This is the code:
What I'm doing:
<phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>
<Style x:Key="AddrBookJumpListStyle" TargetType="phone:LongListSelector">
<Setter Property="GridCellSize" Value="113,113"/>
<Setter Property="LayoutMode" Value="Grid" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Border **Background="#FF00a3e8"** Width="113" Height="113" Margin="6" >
<TextBlock Text="{Binding Key}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="48" Padding="6"
Foreground="{Binding Converter={StaticResource ForegroundConverter}}" VerticalAlignment="Center"/>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
What will show the disabled items grayed-out, but bind the background color to the phone's theme:
<phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/>
<phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>
<Style x:Key="AddrBookJumpListStyle" TargetType="phone:LongListSelector">
<Setter Property="GridCellSize" Value="113,113"/>
<Setter Property="LayoutMode" Value="Grid" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Border **Background="{Binding Converter={StaticResource BackgroundConverter}}"** Width="113" Height="113" Margin="6" >
<TextBlock Text="{Binding Key}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="48" Padding="6"
Foreground="{Binding Converter={StaticResource ForegroundConverter}}" VerticalAlignment="Center"/>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
You should add the Enabled and Disabled properties to the JumpListItemBackgroundConverter. Like so:
<phone:JumpListItemBackgroundConverter
x:Key="BackgroundConverter"
Enabled="YellowGreen"
Disabled="DarkGreen" />
If you just want the standard gray-ish color for the disabled items, just leave out the Disabledproperty.

Why does the following xaml code not work?

Why does this xaml code not work?
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid.Resources>
<ControlTemplate x:Key="btnTemplate" TargetType="{x:Type Button}">
<Grid>
<Ellipse Name="el1" Fill="Orange" Width="100" Height="100" />
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter TargetName="el1" Property="Background" Value="Blue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Grid.Resources>
<Button Content="Klick mich" Template="{StaticResource btnTemplate}"/>
</Grid>
</Page>
You are trying to set the Background property in your Trigger, but the Ellipse doesn't have a Background property. It has a Fill property. So you need to use:
<Grid>
<Grid.Resources>
<ControlTemplate x:Key="btnTemplate" TargetType="{x:Type Button}">
<Grid>
<Ellipse Name="el1" Fill="Orange" Width="100" Height="100" />
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter TargetName="el1" Property="Fill" Value="Blue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Grid.Resources>
<Button Content="Klick mich" Template="{StaticResource btnTemplate}" />
</Grid>