I'm making a ResourceDictionary of common styles that are used throughout my application and one of them is:
<Style x:Key="ME_BASE_AppbarButtonSaveStyle"
TargetType="AppBarButton">
<Setter Property="Label"
Value="Save" />
<Setter Property="ToolTipService.ToolTip"
Value="Save" />
<Setter Property="Icon">
<Setter.Value>
<FontIcon FontFamily="Segoe MDL2 Assets"
Glyph="" />
</Setter.Value>
</Setter>
</Style>
It's all ok if I apply the style only one AppbarButton on the Page, but if I want to have two buttons with the same style, I get the following error:
The parameter is incorrect
It's of ok (no error) if I remove the icon property out of the style...
But that's kind of missing the point...
Anyone experienced something similar? Perhaps...
Thank you for all the help.
Error HRESULT E_Fail has been returned from a call to a COM component.
This error will occurred when you use this style for the second AppBarButton. This error usually happens when a reference to a style or an event handler that does not exist or is not with the context of the XAML, you can see the exception information of your problem:
If you read this document: XAML resources must be shareable, you will find:
Custom types used as resources can't have the UIElement class in their inheritance, because a UIElement can never be shareable (it's always intended to represent exactly one UI element that exists at one position in the object graph of your runtime app).
Whether a Icon property of AppBarButton or a FontIcon derives from UIElement, so I guess this is the reason why can't this property be styled in the resource dictionary.
Besides, I will consider if this is a right direction to define the Icon property for each AppBarButton in the style, normally I'd like give each button a different icon as content.
But if you insist to do this, I can provide you a workaround method by defining the Content of the AppBarButton, this is the construction of your AppBarButton:
You use a FontIcon as the content of the AppBarButton, so we can modify your style like this:
<Style x:Key="ME_BASE_AppbarButtonSaveStyle" TargetType="AppBarButton">
<Setter Property="Label" Value="Save" />
<Setter Property="ToolTipService.ToolTip" Value="Save" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<FontIcon FontFamily="Segoe MDL2 Assets"
Glyph="" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I am trying to learn how to use Styles most effectively in WinUI 3 (from WindowsAppSDK 1.1.1) but I'm having difficulty getting simple inheritance to work.
Consider the NavigationViewItem class. I'd like to modify the default style to bind the FontSize and Height properties. The following works in my Page XAML:
<NavigationViewItem x:Uid="Shell_05" helpers:NavigationHelper.NavigateTo="ViewModels._05CreditViewModel"
FontSize="{Binding ViewModel.RootShellFontSize, ElementName=shellPage}"
Height="{Binding ViewModel.CurrentMenuItemHeight, ElementName=shellPage}">
<NavigationViewItem.Icon>
<BitmapIcon UriSource="\Images\credit.png"/>
</NavigationViewItem.Icon>
</NavigationViewItem>
But adding the two properties to a page resource does not (although the FontSize property works in each of the following. It's the Height that doesn't):
<Page.Resources>
<Style TargetType="NavigationViewItem" >
<Setter Property="FontSize" Value="{Binding ViewModel.RootShellFontSize, ElementName=shellPage}" />
<Setter Property="Height" Value="{Binding ViewModel.CurrentMenuItemHeight, ElementName=shellPage}" />
</Style>
</Page.Resources>
Neither does adding the style to a resource dictionary and merging. I've read over what I can find about inheriting styles and the BasedOn="" extension is an explicit way to derive from an existing style in WinUI versions prior to 2.6 (I think). Apparently, WinUI 3 does not require BasedOn. In any case, simply specifying TargetType="NavigationViewItem" doesn't work, but nor does
<Style TargetType="controls:NavigationViewItem" BasedOn="DefaultNavigationViewItemStyle">
The source code for v1.1.1 of the SDK declares a default style for the NavigationViewItem in generic.xaml, but there is no definition for DefaultNavigationViewItemStyle.
I also cannot derive from the default style using
<Style TargetType="controls:NavigationViewItem" BasedOn="{StaticResource {x:Type NavigationViewItem}}">
because x:Type is undefined.
I can do all of the bindings I want in code but I assume it's both clearer and more efficient to do it in XAML.
How do I inherit, derive from, or override a portion of the default style for a WinUI 3 control (not a custom control) in a desktop application, please?
Thanks for any help. Pointers to good XAML for WinUI 3 documentation (or books and articles) would also be greatly appreciated.
In your case the height is most probably not working since page.resources get compiled before object initialization and the height of the CurrentMenuItemHeight is 0. To solve it just set the mode to one way as such
{Binding ViewModel.CurrentMenuItemHeight,Mode=OneWay , ElementName=shellPage}
When you wish to use BasedOn, just say BasedOn={ThemeResource styleName}.
Just make sure the style is actually defined in Generic.xaml file which u can find in "C:\Users\AdminName.nuget\packages\microsoft.windowsappsdk\1.1.1\lib\uap10.0\Microsoft.UI\Themes"
So your final page.resources should be as such:
<Page.Resources>
<Style TargetType="NavigationViewItem" >
<Setter Property="FontSize" Value="{Binding ViewModel.RootShellFontSize, ElementName=shellPage}" />
<Setter Property="Height" Value="{Binding ViewModel.CurrentMenuItemHeight, Mode=OneWay, ElementName=shellPage}" />
</Style>
</Page.Resources>
But it would be much better to use x:Bind instead of Binding. You can view this page to learn more about it https://learn.microsoft.com/en-US/windows/uwp/data-binding/data-binding-in-depth
Given a style in a Page.Resource:
<Style x:Name="ItemTitle" TargetType="TextBlock">
<Setter Property="FontSize" Value="16"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
</Style>
It is correctly applied to any regular TextBlock on the same page.
However, when I use a DataTemplate for an Item in a GridView on that page, this style does not apply.
<DataTemplate x:Key="Output" x:DataType="vm:Output">
<TextBlock Text="{x:Bind Text}"></TextBlock>
</DataTemplate>
It does work when I apply the style explicitly on the DataTemplate, e.g.:
<DataTemplate x:Key="Output" x:DataType="vm:Output">
<TextBlock Style="{StaticResource ItemTitle}" Text="{x:Bind Text}"></TextBlock>
</DataTemplate>
Does anyone know what's up?
It's expected and intentional. If it doesn't derive from Control (like DataTemplate) then it won't inherit an implicit style unless they're in the application resource dictionaries as global defaults.
Or more specifically;
Templates are viewed as an encapsulation boundary when looking up an implicit style for an element which is not a subtype of Control.
Hope this helps. Cheers.
Addendum:
If it's a situation where you have a lot of the same element nested in a Template you can just set it once and allow it to inherit to all the nested controls of the type like (in pseudo);
<Parent>
<Parent.Resources>
<Style TargetType="TextBlock" BasedOn="{StaticResource ItemTitle}"/>
<Parent.Resources>
<!-- These will all inherit the Style resource now,
without explicit style setting individually. -->
<TextBlock/>
<TextBlock/>
<TextBlock/>
</Parent>
When using a listitem in a w8 app, how can I determine what gives the hover and click styles?
My listview looks like this:
<ListView x:Name="itemsListView"
TabIndex="1"
Visibility="Visible"
Padding="10,0,0,0" Foreground="Black"
ItemsSource="{Binding Nodes.Nodes}"
behaviors:ListViewItemClickedToAction.Action="{Binding SelectNodeAction}"
IsItemClickEnabled="True" FontFamily="Global User Interface"
>
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
When I hover using the mouse I get white letters and an almost white background.
I have tried reusing parts of the adventureworks shopper app, so there are styles from there copied. However, I can't understand what is applied to the ListView items.
You maybe already new this but if you check this screenshot you can see how you easily in VS2012 can create a copy of a built in style. When you press the "Edit a copy ..." a dialog will appear where you can choose where in the Project you want the style to be placed.
You can inherit styles. The inheritence of styles work in the following way:
<Style x:Name="BasicStyle" TargetType="Button">
<Setter Property="Background" Value="Green" />
</Style>
<Style x:Name="ButtonStyle" TargetType="Button" BasedOn="{StaticResource BasicStyle}">
<Setter Property="Foreground" Value="Red" />
</Style>
You can do inheritence in several steps so Another button style can inherit the "ButtonStyle".
You can thus make a style that only contains the Template property if you want to seperate it or reuse the behaviour and look of your style. But you cannot split the Visual State Manager into several styles since if you inherit a style which sets the template property and then if you want to change the Hover state of that style you need to make a copy of the whole template and only change that part in the code.
I Think this would be a nice improvement by MS if you could make a style which only contains the pressed state and then Another style which only contains the hover effect and so on.
I hope this answers your questions :) I would love to answer more questions regarding XAML if you have any!
I've trawled the entire internet, every forum, every blog, ever, anywhere. I now literally contain the internet... except this one last thing ;-). Here's the problem: I have a WPF DataGrid that has a column defined thus:
<tk:DataGridTemplateColumn Header="First name" Width="100" x:Name="colFirstName">
<tk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBox x:Name="tbFirstName" Validation.ErrorTemplate="{DynamicResource errorTemplateYourDetailsGrid}">
<TextBox.Text>
<Binding Path="Firstname" UpdateSourceTrigger="PropertyChanged" NotifyOnValidationError="True">
<Binding.ValidationRules>
<val:RequiredValidationRule ErrorMessage="Invalid or missing first name" ValidatesOnTargetUpdated="True"></val:RequiredValidationRule>
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
</TextBox>
</DataTemplate>
</tk:DataGridTemplateColumn.CellTemplate>
</tk:DataGridTemplateColumn>
As you can see I've defined a Validation template called errorTemplateYourDetailsGrid.
The page has a continue button that I want to disable until all the fields in this grid are valid:
<Button x:Name="btnNext" HorizontalAlignment="Right" DockPanel.Dock="Right" Content="Continue" Command="{Binding YourDetailsNextCommand}" >
<Button.Style>
<Style TargetType="Button" BasedOn="{StaticResource BtnContinue}">
<Setter Property="IsEnabled" Value="false" />
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding ElementName=tbFirstName, Path=(Validation.HasError)}" Value="false" />
<Condition Binding="{Binding ElementName=tbSurname, Path=(Validation.HasError)}" Value="false" />
...etc
</MultiDataTrigger.Conditions>
<Setter Property="IsEnabled" Value="true" />
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
A colleague has got this sort of thing working fine with a straight form-based layout (not using a datagrid). So I'm guessing I need some syntax that will reference the TextBox in the cell in the column in the DataGrid so that the Triggers fire. Simply using ElementName isn't working. The button stays disabled even though the validation template disappears as expected when you enter text into those fields.
I'm using MVVM so any code behind-based solution isn't an option.
The MVVM way of performing validations is using INotifyDataErrorInfo (or IDataErrorInfo if you're using .NET 4.0 or below), so you won't define validation logic in your XAML, but in your model and viewmodel classes.
Once you implement it, you'll have one central place to query for errors and you could bind your button's trigger to your viewmodel's INotifyDataErrorInfo.HasErrors property.
Check these articles to see if they can help you find the data template elements:
How to: Find DataTemplate-Generated Elements
C#/WPF: Get Binding Path of an Element in a DataTemplate
I want to disable Tile effect that is some kind of pushed effect and hover background color effect of ListView control, how can i do that?
Thanks
After some googling I found that the highlighting happens in the ListViewItemPresenter, which turns out to be pretty hidden. It's located inside the ControlTemplate of an ListViewItem, which is the ItemContainer for the ListView. The simplest way I've found to disable the effect is to simply override this ControlTemplate:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<TextBlock Text="List Item" />
...
<TextBlock Text="List Item" />
source: https://blog.jonstodle.com/uwp-listview-without-highlighting-and-stuff/
Look at this question:
Disable cross-slide selection for a listview
You can also make changes to the template to remove any visual states and adornments - go to the designer and right click your ListView/Edit Additional Templates/Edit Generated Item Container (ItemContainerStyle)/Edit a Copy... - that will extract the template you can modify using your preferred method.