I am using the Windows Community Toolkit DataGrid control in my WinUI3 project.
I would like to make the group header text bold. How can I do this?
Currently the group header looks like this (not bold):
I have tried setting styles:
<ctWinUI:DataGrid ...>
<ctWinUI:DataGrid.RowGroupHeaderStyles>
<Style TargetType="ctWinUI:DataGridRowGroupHeader">
<Setter Property="PropertyNameVisibility" Value="Collapsed"/>
<Setter Property="ItemCountVisibility" Value="Collapsed"/>
<Setter Property="FontWeight" Value="Bold"/> <!--Ignored-->
</Style>
<Style TargetType="TextBlock">
<Setter Property="FontWeight" Value="Bold"/> <!--Ignored-->
</Style>
</ctWinUI:DataGrid.RowGroupHeaderStyles>
...
</ctWinUI:DataGrid>
You should be able to override the BodyTextBlockStyle theme resource:
<ctWinUI:DataGrid.Resources>
<Style x:Key="BodyTextBlockStyle" TargetType="TextBlock">
<Setter Property="FontWeight" Value="Bold" />
</Style>
</ctWinUI:DataGrid.Resources>
Related
I have the need to replace at runtime an implicit style that is located in a merged resource dictionary
for example lets suppose I have
<Style TargetType="Label">
<Setter Property="FontSize" Value="14" />
</Style>
Now I want to replace the all style with something else at runtime. Can this be done?
Above is just a sample.. Nothing todo with theming or anything else, I have the need to replace the all implicit style at runtime.
Can I detect based on TargetType ?
thanks
If I understand your problem correctly, I think that data triggers might help you. For example, you can change FontSize with something like this:
<Style x:Key="labelStyle" TargetType="Label">
<Setter Property="FontSize" Value="14" />
<Style.Triggers>
<DataTrigger TargetType="Label" Binding="{Binding isSmallDevice}" Value="True">
<Setter Property="FontSize" Value="10" />
</DataTrigger>
</Style.Triggers>
</Style>
Actually in this occasion I need to change some fontsizes at runtime based on whether is a small device or not
You can use OnIdiom markup extension to detect Phone or Table or desktop.
<Label Text="Welcome to Xamarin.Forms!">
<Label.Style>
<Style TargetType="Label">
<Setter Property="FontSize">
<Setter.Value>
<OnIdiom
x:TypeArguments="x:Double"
Phone="18"
Tablet="50" />
</Setter.Value>
</Setter>
</Style>
</Label.Style>
</Label>
In UWP, if I want to specify a default style for a custom control, I'd code it up like this:
public PriceControl()
{
// This allows the control to pick up a template.
this.DefaultStyleKey = typeof(PriceControl);
}
I can't find the equivalent in Xamarin.Forms. How do you tell a custom control that it should use a style by default?
Just define a style in App.Xaml of the typeof your control and don't give it a key just a target type and that should do the trick:
<Application.Resources>
<ResourceDictionary>
<Style TargetType="Button">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
<Setter Property="BorderColor" Value="Lime" />
<Setter Property="BorderRadius" Value="5" />
<Setter Property="BorderWidth" Value="5" />
<Setter Property="WidthRequest" Value="200" />
<Setter Property="TextColor" Value="Teal" />
</Style>
</ResourceDictionary>
</Application.Resources>
Just replace button with your control and it's properties Into the setter's and this will be your global default style for this control!
I#m a beginner with WPF. I want to make the same like css/sass. I want to reuse some definitions.
Here I want to reuse a color definition in an element (e.g. button). If I use binding with "staticresource", I get the following exception when running:
"An unhandled exception of type 'System.Windows.Markup.XamlParseException' occurred in PresentationFramework.dll
Additional information: "#FF8FA2AC" ist kein gültiger Wert für die Eigenschaft "Background"."
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Color x:Key="cyan3">#007ca9</Color>
<Color x:Key="mangenta2">#a8005c</Color>
<Color x:Key="wintergrey1">#e6ecf0</Color>
<Color x:Key="wintergrey2">#c3ced5</Color>
<Color x:Key="wintergrey3">#8fa2ac</Color>
<Color x:Key="wintergrey4">#506671</Color>
<Color x:Key="white">#FFFFFF</Color>
<Color x:Key="antrazit">#333333</Color>
<!-- Base style for button -->
<Style TargetType="Button" x:Key="btnStandard">
<!--Setter Property="Background" Value="#8fa2ac"/-->
<Setter Property="Background" Value="{StaticResource wintergrey3}"/>
<Setter Property="Foreground" Value="#ffffff"/>
<Setter Property="Width" Value="150" />
<Setter Property="Height" Value="30"/>
</Style>
</ResourceDictionary>
How can I use predefined definitions in other elements? Or what is wrong. I want do define 4 different button styles "Standard", "IsFocused", "IsDisabled" and "IsHero (background=mangenta2".
You should set the Background property to a Brush. If you set it to a SolidColorBrush you can then set the Color property of this one to your Color resource like this:
<Style TargetType="Button" x:Key="btnStandard">
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="{StaticResource wintergrey3}" />
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#ffffff"/>
<Setter Property="Width" Value="150" />
<Setter Property="Height" Value="30"/>
</Style>
I have created a Xamarin.Forms application and it has quite a long name.
When I start it on my 4.5" Windows 10 phone, it looks very strange.
The main page consists of a TabbedPage and it has the Title property, however it has no FontSizeproperty.
I use the following Style in my PCL project:
<Style TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource BaseColor}" />
<Setter Property="FontSize">
<Setter.Value>
<OnIdiom x:TypeArguments="x:Double"
Phone="18"
Tablet="28" />
</Setter.Value>
</Setter>
</Style>
However, if I remove it, the title is still very large.
Where can I modify the title font size to make the title smaller?
UPDATE:
I checked with the Live Property Editor, and it shows that the Title is inside the CommandBar and the FontSize is set to 24.
I tried to override its style (both in XAML and in code), but it doesn't work:
<forms:WindowsPage.BottomAppBar>
<CommandBar>
<CommandBar.Style>
<Style TargetType="CommandBar">
<Setter Property="FontSize" Value="4" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<TextBlock Text="Whatever" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</CommandBar.Style>
<CommandBar.Content>
<TextBlock Text="Whatever" />
</CommandBar.Content>
</CommandBar>
</forms:WindowsPage.BottomAppBar>
public MainPage()
{
this.InitializeComponent();
var bapp = BottomAppBar;
LoadApplication(new MyXamarinApp.App(IoC.Get<SimpleContainer>()));
BottomAppBar = bapp;
BottomAppBar.FontSize = 4;
}
Any idea?
UPDATE 2:
You can download a sample project from here.
You have to override one of the built-in styles:
<!-- Tab title -->
<Style x:Key="TitleTextBlockStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="18" />
<Setter Property="TextWrapping" Value="NoWrap" />
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
</Style>
I am developing windows phone app not silverlight just basic app.
Is there any way to make the buttons of my app look like tile. That means I want tiles for my buttons inside the pages.
I want to do something like this
but I am getting error like "the default namespace is not defined" in the line marked when i put this code on my page.
*<Style x:Key="TileListBoxItemStyle" TargetType="ListBoxItem">*
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="FontSize" Value="64"/>
<Setter Property="Margin" Value="12,12,0,0"/>
<Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Width" Value="173"/>
<Setter Property="Height" Value="173"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid>
<Rectangle Fill="{TemplateBinding Background}"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
On the link that you have provided, the BBC app are using HubTiles and attaching onClick event Handlers to make them seem as buttons.
Please use HubTile from telerik or something and you will achieve the SAME SAME result as that of BBC app