.NET MAUI set focus to control into ControlTemplate - xaml

I have this ControlTemplate (two controls on it):
<Style TargetType="controls:QuickSearch">
<Setter Property="ControlTemplate">
<Setter.Value>
<ControlTemplate>
<VerticalStackLayout HorizontalOptions="Fill">
<Entry
x:Name="EntryFilter"
Text="{TemplateBinding Filter}"
Completed="Entry_Completed"
behaviors:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference LstResults}"
Focused="Entry_Focused"
ClearButtonVisibility="WhileEditing"
Placeholder="{TemplateBinding PlaceHolder,Mode=TwoWay}">
<Entry.Triggers>
<EventTrigger Event="Completed">
</EventTrigger>
</Entry.Triggers>
</Entry>
<ListView
x:Name="LstResults"
Margin="5"
Background="{DynamicResource PN_ColorFondoPrimario}"
ZIndex="999"
ItemsSource="{TemplateBinding Results}"
SelectionMode="Single"
SelectedItem="{TemplateBinding SelectedItem,Mode=TwoWay}"
IsVisible="{TemplateBinding PerforminigSearch}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text="{Binding DisplayField}" Margin="9"/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Triggers>
</ListView.Triggers>
</ListView>
</VerticalStackLayout>
<-- MAUI don't allow to set triggers here -->
<ControlTemplate.Triggers>
</ControlTemplate.Triggers>
<-- ======================================= -->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And I want to set the focus into EntryFilter when my control template receives focus. I was trying with a trigger, but MAUI doesn't allow me to put some triggers into the <ControlTemplate> tag.
<Style TargetType="controls:QuickSearch">
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="EntryFilter" Property="IsFocused" Value="True"/>
</Trigger>
</Style.Triggers>
. . . .
. . . .
</Style>
I tried with MAUI toolkit, but where should I put SetFocusOnEntryCompletedBehavior?

Related

Can Maui configure a shadow in a line?

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>

Change Image with trigger in xaml based on boolean

Hey I am trying to show different pictures based on boolean values with triggers, I have one image a simple where it shows the green one when it is true, that works but wiht the triggers, I get an empty unhandled exception.
What am I missing?
Thanks
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Content}" FontSize="26"></Label>
<Image Source="green.png" HorizontalOptions="EndAndExpand" Aspect="AspectFit" IsVisible="{Binding Done}"></Image>
<Image>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding Done}" Value="false">
<Setter Property="Source" Value="red.png"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Done}" Value="true">
<Setter Property="Source" Value="green.png"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

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>

ListView ItemTemplate 100% width

How can I make content of each ListView item expands to 100% width when using a DataTemplate?
I have tried HorizontalContentAlignment="Stretch" in the ListView and HorizontalAlignment="Stretch" in the DataTemplate, but nothing seems to work, content is still aligned to the left.
I have something like this:
<ListView x:Name="questionsView" Background="{StaticResource ApplicationPageBackgroundThemeBrush}" HorizontalContentAlignment="Stretch">
<ListView.ItemTemplate>
<DataTemplate>
<Border Background="BlueViolet" HorizontalAlignment="Stretch">
<Grid HorizontalAlignment="Stretch">
<TextBlock Text="{Binding}" />
<TextBlock HorizontalAlignment="Right">16 minutes ago</TextBlock>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I guess there is one more layer between the ListView and the ItemTemplate.
I got it. Setting the ListView.ItemContainerStyle with a HorizontalContentAlignment setter makes the trick. I.e.:
<ListView x:Name="questionsView" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<ListView.ItemTemplate>
<DataTemplate>
<Border Background="BlueViolet">
<Grid HorizontalAlignment="Stretch" Margin="0">
<TextBlock Text="{Binding}" />
<TextBlock HorizontalAlignment="Right">16 minutes ago</TextBlock>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
Set the item container's property of HorizontalContentAlignment to Stretch, try this
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
What is important here is the ScrollViewer.HorizontalScrollBarVisibility, TextWrapping and ItemContainerStyle with HorizontalContentAlignment. The rest is fluff.
<ListView VerticalAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Prop1}" TextWrapping="Wrap"/>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>

How do I prevent excessive nesting of tags in XAML?

Consider the following code where a cell's color changes depending on whatever (attributes stripped for brevity):
<UserControl>
<Grid>
<ListView>
<ListView.View>
<GridView>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock>
<TextBlock.Style>
<Style>
<Style.Triggers>
<Trigger>
<Setter>
<Setter.Value>
<LinearGradientBrush>
<GradientStop/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</Grid>
</UserControl>
Are there any advanced techniques in XAML that go beyond reducing indentation from 4 to 2 and trying to shove as much stuff as I can into the top level (UserControl's in this case) resource dictionary?
PS: I'm stuck with VS 2008.
Make use of Resources to simplify your XAML. It also makes for better reuse and organization. For example, with the above XAML you could break it apart into the following:
<UserControl>
<UserControl.Resources>
<LinearGradientBrush x:Key="MyBrush">
<GradientStop/>
</LinearGradientBrush>
<Style x:Key="ItemTextBlockStyle" TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource MyBrush}"/>
</Trigger>
</Style.Triggers>
</Style>
<DataTemplate x:Key="ItemTemplate">
<TextBlock Style="{DynamicResource ItemTextBlockStyle}"/>
</DataTemplate>
<Style x:Key="MyListViewStyle" TargetType="{x:Type ListView}">
<Setter Property="View">
<Setter.Value>
<GridView>
<GridViewColumn CellTemplate="{DynamicResource ItemTemplate}"/>
</GridView>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid>
<ListView Style="{DynamicResource MyListViewStyle}"/>
</Grid>
</UserControl>