I am trying to create a header template for a GroupBox (for now, and others later on).
Currently I have
<!--GroupBox-->
<Style TargetType="GroupBox">
<Setter Property="BorderBrush" Value="{StaticResource wspCharcoalDarkBrush}"/>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}" Style="{StaticResource wspTitleBlockBold}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Which works well if I have
<GroupBox Margin="3" Header="TEST">
</GroupBox>
The Header says "TEST"
If I want to customise it for a one off and use this
<GroupBox Margin="3">
<GroupBox.Header>
<StackPanel Orientation="Horizontal">
<Image/>
<TextBlock Text="TEST"/>
</StackPanel>
</GroupBox.Header>
</GroupBox>
All I get for a header is "System.Windows.Controls.StackPanel" in the header.
Is there a way around this so that I can have the option of specifying the header either way and not have to create 2 separate styles?
Thanks,
Brent
Related
I would like to change ComboBox placeholder color in my demo UWP app. So I tried to create static resources:
<UserControl.Resources>
<Style x:Key="ComboBoxStyle" TargetType="ComboBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<ContentControl x:Name="PlaceholderTextContentPresenter"
Content="{TemplateBinding PlaceholderText}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
Using:
<ComboBox Grid.Row="1" Foreground="White" HorizontalAlignment="Stretch" Background="Transparent"
PlaceholderText="Выбор оператора" Style="{StaticResource ComboBoxStyle}">
<x:String>iPhone 11</x:String>
<x:String>iPhone 12</x:String>
<x:String>Xiaomi Red Mi</x:String>
<x:String>Samsung Galaxy 10</x:String>
<ComboBox.Resources>
<Style TargetType="ContentControl">
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="15" />
</Style>
</ComboBox.Resources>
</ComboBox>
Foreground in placeholder changed correctly but ComboBox is disappeared. How can I will change ComboBox placeholder foreground?
How to change ComboBox placeholder foreground in UWP
UWP ComboBox contains PlaceholderForeground propety, if you want to chage the default one, you just need to give it specific value like the following. And please not the property avaiable in version 16299 or higher.
<ComboBox
Grid.Row="1"
HorizontalAlignment="Stretch"
Background="Transparent"
Foreground="White"
PlaceholderText="Выбор оператора"
PlaceholderForeground="DarkBlue">
<x:String>iPhone 11</x:String>
<x:String>iPhone 12</x:String>
<x:String>Xiaomi Red Mi</x:String>
<x:String>Samsung Galaxy 10</x:String>
</ComboBox>
I would like to build a validation text box, which would be a normal UWP TextBox wrapped within a StackPanel, which also contains a TextBlock. The intent is that a validation message can be shown beneath the text box when there is a validation error.
I know I can do this by creating a custom control, but this would require me to implement all the properties I need and create a bunch of dependency properties, etc.
I'm hoping there is an easier way, where I can just completely derive the text box, but override the display template for it and include a label beneath it.
You can get most of the way there in XAML using the built-in IDataErrorInfo-based validation machinery and defining a control template for the TextBox's Validation.ErrorTemplate. There's a pretty good article at this link:
The XAML from the article at the link above follows, also check out this discussion on WPF's built-in validation here.
<Style TargetType="{x:Type Label}">
<Setter Property="Margin" Value="5,0,5,0" />
<Setter Property="HorizontalAlignment" Value="Left" />
</Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="0,2,40,2" />
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<DockPanel LastChildFill="true">
<Border Background="OrangeRed" DockPanel.Dock="right" Margin="5,0,0,0"
Width="20" Height="20" CornerRadius="5"
ToolTip="{Binding ElementName=customAdorner,
Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
<TextBlock Text="!" VerticalAlignment="center" HorizontalAlignment="center"
FontWeight="Bold" Foreground="white" />
</Border>
<AdornedElementPlaceholder Name="customAdorner" VerticalAlignment="Center" >
<Border BorderBrush="red" BorderThickness="1" />
</AdornedElementPlaceholder>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I want to strech a ListBox with its ListBoxItem. Streching the ListBox itself isn't a problem. The problem seems to be, to tell the ListBoxItem to use the available space in the ListBox.
<Page.Content>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Height="200">
<ListBox VerticalContentAlignment="Stretch" VerticalAlignment="Stretch" Background="Green" ItemsSource="{x:Bind Path=ChessFieldList}" >
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Yellow" BorderBrush="Red" BorderThickness="3" >
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Page.Content>
The image below shows the above and expected result.
How can I achieve the expected result?
[Edit] An other and in my opinion the correct solution: Set Width and Height of ItemsControl Children
This is a common problem. All you need to do is set the HorizontalContentAlignment of the ListBoxItems too:
<ListBox Background="Green" ItemsSource="{x:Bind ChessFieldList}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Background="Yellow" BorderBrush="Red" BorderThickness="3" Height="50">
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Since the StackPanel doesn't contain any content, it won't have any height, so I've just added Height="50" to it for the purpose of this demonstration.
Simply add
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
If you use grouping, you should include:
<ListView.GroupStyle>
<GroupStyle HidesIfEmpty="False">
<GroupStyle.HeaderContainerStyle>
<Style TargetType="ListViewHeaderItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
</GroupStyle.HeaderContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
It's a bit more than you asked for, but it's a little-known technique.
I have tried to create a Style to apply to any Page (like a Master Style) to include a little watermark in a corner, but this kind of style doesn't work.
<Style x:Key="WatermarkPageStyle" TargetType="Page">
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="Page">
<Grid>
<ContentPresenter/>
<TextBlock TextAlignment="Right" VerticalAlignment="Bottom" FontSize="25" Foreground="Blue" Text="Watermark"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
What's the problem? Is there a workaround?
Microsoft employee says that this is a known issue and you should set these values locally.
is it possible to make the Hint text in the PhoneTextBox of the Windows Phone Toolkit wrap? I have looked into the code and it seems that this is only possible by changing the whole ControlTemplate. Have I missed something? Is there an easier solution?
Thanks in advance,
Christoph
I found out that I can replace the ContentControl via the hint style without re-styling the whole control like this:
<Style x:Key="HintContentControlStyle" TargetType="ContentControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Grid>
<TextBlock Text="{TemplateBinding Content}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeNormal}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and then apply it to the PhoneTextBox:
<tk:PhoneTextBox Text="{Binding Text, Mode=TwoWay}" TextWrapping="Wrap" HintStyle="{StaticResource HintContentControlStyle}" Hint="{Binding LocalizedResources.Hint, Mode=OneWay, Source={StaticResource LocalizedStrings}}" />