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}}" />
Related
I'm doing an UWP project and I wan't to customize the HeaderTemplate of the group items, but I m unable to find how to fully customize it.
<ListView ItemsSource="{x:Bind ContactsCVS.View}"
ItemTemplate="{StaticResource ContactListViewTemplate}"
SelectionMode="Single"
ShowsScrollingPlaceholders="True"
Grid.Row="1"
Grid.ColumnSpan="2">
<ListView.GroupStyle>
<GroupStyle >
<GroupStyle.HeaderTemplate>
<DataTemplate x:DataType="data:GroupInfoList">
<TextBlock Text="{x:Bind Key}"
Style="{ThemeResource itleTextBlockStyle}"/>
<!-- Can't fully customize this part ?-->
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
I m basing my test on this official example :
https://github.com/Microsoft/Windows-universal-samples/blob/de1bb527ec0327b767397d4c1a74a797356f4357/Samples/XamlListView/cs/Samples/SimpleListViewSample/SimpleListViewSample.xaml
I try to replace the letters A, B, C... With a blue strip and custom text. Looks very simple but can't figure out how it works.
Thanks
The HeaderTemplate defines the template of the header content, but the actual control that displays this content is a ListViewHeaderItem. You can actually simply do this if you want:
<GroupStyle.HeaderTemplate>
<DataTemplate x:DataType="data:GroupInfoList">
<Border Background="LightSkyBlue">
<TextBlock Text="My custom text" />
</Border>
</DataTemplate>
</GroupStyle.HeaderTemplate>
When the ListView is rendered, the ListViewHeaderItem for each group will show the above content, but the control itself still has its own default style.
If you want to style the control as well, to maybe make it stretch horizontally or something, you'll have to create your own style for HeaderContainerStyle:
<GroupStyle.HeaderContainerStyle>
<Style TargetType="ListViewHeaderItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewHeaderItem">
<ContentPresenter
x:Name="ContentPresenter"
Background="Red"
Margin="0"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="Stretch"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.HeaderContainerStyle>
The ContentPresenter is responsible for showing the Content of the control, in this case the content is whats inside the HeaderTemplate.
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
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.
I've got this bit of code in my page.xaml
<TextBox x:Name="NameTextField" Grid.ColumnSpan="7" Grid.Column="1" Text="{Binding Name, Mode=TwoWay}" Style="{StaticResource TextBoxStyle}" />
It refers to this style:
<Style x:Key="TextBoxStyle" TargetType="TextBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid x:Name="grid" Height="55" Background="White">
<Rectangle Stroke="#FFD9D9D9" StrokeThickness="6"/>
<ContentPresenter x:Name="contentPresenterText" VerticalAlignment="Center" Margin="6,0" Height="42" >
<TextBox Text="{TemplateBinding Text}" FontSize="21.333" FontFamily="Arial" FontWeight="Bold"/>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This works ok when pre-populating data from the bind but does not seem to work the other way, when data is entered.
Is there something obvious I'm missing here?
Many thanks
Try changing:
<TextBox Text="{TemplateBinding Text}" FontSize="21.333" FontFamily="Arial" FontWeight="Bold"/>
to:
<TextBox Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay, Path=Text}" FontSize="21.333" FontFamily="Arial" FontWeight="Bold"/>
TemplateBinding seems to default to a one-way bind.