I am using ComponentOne C1DataGrid. I have been able to style it to the full extent except row header column.
How can I style it in XAML?
You can see the image:
here
Thanks,
flot
Answering my own question in case somebody else is interesting:
There is a special presenter, DataGridRowHeaderPresenter, that can be styled.
I wanted to replace a standard row details toggle with the tree-like "+" and "-" signs and I did it as follows:
<Style x:Key="DataGridRowHeaderStyle2" TargetType="{x:Type c1:DataGridRowHeaderPresenter}">
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type c1:DataGridRowHeaderPresenter}">
<!-- BulletDecorator is used to provide baseline alignment between the sign and the Content -->
<BulletDecorator Background="#BFEFF2F5">
<BulletDecorator.Bullet>
<Grid Width="13" Height="13">
<Image Name="sign" Source="/myControls;component/Resources/Images/plus.png" />
</Grid>
</BulletDecorator.Bullet>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Source" Value="/myControls;component/Resources/Images/minus.png" TargetName="sign"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I have the following flyout that i show when i press a button
<Flyout x:Name="saveDiscardMenu" Placement="Bottom" >
<Grid >
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<ListView Name="SaveDiscardList" ItemClick="SaveDiscardList_ItemClick" >
<ListViewItem Style="{StaticResource ListViewItemPDF}">
<TextBlock x:Uid="SaveChanges" Name="saveChanges" Grid.Row="0" Tapped="saveChanges_Tapped"></TextBlock>
</ListViewItem>
<ListViewItem Style="{StaticResource ListViewItemPDF}">
<TextBlock x:Uid="DiscardChanges" Name="discardChanges" Grid.Row="1" Margin="0,20,0,0" Tapped="discardChanges_Tapped" ></TextBlock>
</ListViewItem>
</ListView>
</Grid>
</Flyout>
it looks like this
and i use this as my ListViewItem style
<Style TargetType="ListViewItem" x:Key="ListViewItemPDF">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Margin" Value="0,0,0,0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Padding" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
ContentTransitions="{TemplateBinding ContentTransitions}"
Padding="{TemplateBinding Padding}"
SelectionCheckMarkVisualEnabled="True"
CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}"
CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}"
CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
PointerOverBackground="{StaticResource MyLightBlue}"
SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}"
SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}"
SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}"
SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
PointerOverBackgroundMargin="1"
ContentMargin="4" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
What i would like to know is how to remove the left and right padding each items appears to have, i've tried setting the margins and padding to 0 but it allways seem to have a space between the sides of the items and the edge of the flyout.
Since I just got poked for my bad habit of so many quickie answers in comments...
Looking at the structure of the default control style template for FlyoutPresenter we notice there's a padding bound to a resource of;
<Thickness x:Key="FlyoutContentThemePadding">12,11,12,12</Thickness>
Which is often the culprit when you notice your Flyout content getting a bit squished. While yes ListView and other ItemsControl variants generally have their own templated Paddings/Margins that can interfere, the more we embed something into additional templated controls, the more layers there are to sort through to find our culprit.
Glad it helped. :)
Try to override Margin and Padding in ItemContainerStyle:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="MinWidth" Value="0"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
Might be MinWidth and MinHeight will be required to set 0 as well.
I am using the following style with a group of radiobuttons:
<Style x:Key="RadioTextStyle" TargetType="{x:Type RadioButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Label Content="{TemplateBinding Content}" Foreground="Red"/>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="Green"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The trigger is not executed and I assume this is because it is looking for the IsChecked property of the Label. How can I properly ensure that the label colour properly tracks the IsChecked state of the underlying RadioButton?
I am still trying many variants of this and currently have the following:
<Style x:Key="RadioTextStyle" TargetType="{x:Type RadioButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Label x:Name="RadioLabel" Content="{TemplateBinding Content}" Foreground="Red"/>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsChecked}" Value="True">
<Setter Property="Foreground" Value="Green"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This looks right to me and intellisense suggests most of the values. However, it still doesn't actually change selected labels to green.
Thanks,
Andy
Keep your original try. You just need to tell your trigger what it's actually changing something on with TargetName like;
<Style x:Key="RadioLabel" TargetType="{x:Type RadioButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Label x:Name="RadioLabel"
Content="{TemplateBinding Content}" Foreground="Red"/>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="RadioLabel"
Property="Background" Value="Green"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Hope this helps, cheers.
I have a style for a button.
<Style x:Key="btnBackStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Image Source="/Assets/Icons/ic_arrow_back_white_48dp.png" Margin="8"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content=""/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
When a user clicks on it I need the image to be a different one and when he clicks again the image need to be the first one again. As i use this style over several places in the project I don't want to use C# code is it possible to set this via XAMl code ?
I tried the following with trigger
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Source" Value="/Assets/Icons/ic_arrow_back_blue_48dp.png" />
</Trigger>
</ControlTemplate.Triggers>
I also got the error
The attachable property 'Triggers' was not found in type 'ControlTemplate'
If you need the image to change ONLY whilst pressed (and by pressed, i mean you are literally pressing down on it with a mouse/finger/pen), then this will do:
<ControlTemplate TargetType="Button">
<Grid>
<Image x:Name="ImageOne"></Image>
<Image x:Name="ImageTwo"></Image>
<ContentPresenter></ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="False">
<Setter TargetName="ImageOne" Property="Visibility" Value="Visible"></Setter>
<Setter TargetName="ImageTwo" Property="Visibility" Value="Collapsed"></Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="ImageOne" Property="Visibility" Value="Collapsed"></Setter>
<Setter TargetName="ImageTwo" Property="Visibility" Value="Visible"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
If you need it to -stay- changed once pressed until pressed again, then you will need to replace the Button with a ToggleButton and feed it this template:
<ControlTemplate TargetType="ToggleButton">
<Grid>
<Image x:Name="ImageOne"></Image>
<Image x:Name="ImageTwo"></Image>
<ContentPresenter></ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="ImageOne" Property="Visibility" Value="Visible"></Setter>
<Setter TargetName="ImageTwo" Property="Visibility" Value="Collapsed"></Setter>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="ImageOne" Property="Visibility" Value="Collapsed"></Setter>
<Setter TargetName="ImageTwo" Property="Visibility" Value="Visible"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
If you want the contents animated as they make this transition, then i suggest using blend to target the Triggers shown here and create a storyboard that executes the animation(s) you're after.
The idea is to have two images one behind other, so when the button is pressed just change the visibility of the image to collaped when the button ispressed.
You can do that by making changes in the visual state of the button.
From your scenario it appears that you are looking for checkbox. That displays different images for the checked states.
In ListViews on windows universal platform, there is an ugly seperator line below the group header, when you use ListView grouping. Even Microsoft themselves removed this line in their Apps. In the Live Visual Tree you can see that it is a rectangle in a GridViewHeaderItem. I've read that it's possible to set its height to 0. How can I do this?
Here's the code which sets the text of the header item:
<ListView.GroupStyle>
<GroupStyle HidesIfEmpty="True" >
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
You can find all the default styles in generic.xaml at
C:\Program Files (x86)\Windows
Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic
Digging into that file, you'll find the default style for the ListViewHeaderItem as well:
<!-- Default style for Windows.UI.Xaml.Controls.ListViewHeaderItem -->
<Style TargetType="ListViewHeaderItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ListViewHeaderItemThemeFontSize}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Margin" Value="0,0,0,4"/>
<Setter Property="Padding" Value="12,8,12,0"/>
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="MinHeight" Value="{ThemeResource ListViewHeaderItemMinHeight}"/>
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewHeaderItem">
<StackPanel Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter x:Name="ContentPresenter"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle Stroke="{ThemeResource SystemControlForegroundBaseLowBrush}"
StrokeThickness="0.5"
Height="1"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Margin="12,8,12,0"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Simply copy over that style into your project's ResourceDictionary and remove the culprit Rectangle (so only the ContentPresenter is left as child element).
<Rectangle Stroke="{ThemeResource SystemControlForegroundBaseLowBrush}"
StrokeThickness="0.5"
Height="1"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Margin="12,8,12,0"/>
In a previous question How to Change Pivot Header Template in Windows Phone 8 I retemplated the Pivot Header, but I was wondering how it would be possible to remove the headers all together, while maintaining the functionality of a PivotControl.
Here's a solution that I use for the same purpose, it works fine:
<phone:PhoneApplicationPage.Resources>
<Style x:Key="PivotStyle1" TargetType="phone:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<primitives:PivotHeadersControl x:Name="HeadersListElement" />
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="PivotItemStyle1" TargetType="phone:PivotItem">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
</Style>
</phone:PhoneApplicationPage.Resources>
<phone:Pivot x:Name="MyPivot"
Style="{StaticResource PivotStyle1}" ItemContainerStyle="{StaticResource PivotItemStyle1}">
<phone:Pivot.ItemTemplate>
<DataTemplate><!-- dummy content to show that no header is on the screen -->
<Border BorderBrush="Blue" BorderThickness="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid Background="Red" />
</Border>
</DataTemplate>
</phone:Pivot.ItemTemplate>
<!-- we need empty header template to hide the pivotitem title completely -->
<phone:Pivot.HeaderTemplate>
<DataTemplate />
</phone:Pivot.HeaderTemplate>
</phone:Pivot>