I'm developing a Panorama App for Windows Phone 8 and I got a small problem. I added an image to the header of one of my Panorama.Item (and it shows up fine) but I'd love it to be centered and not aligned left. I don't even know if it's possible or if you can't change the alignment at all. Here's the code for the header I'm talking about:
<phone:PanoramaItem.Header>
<Image x:Name="Logo" Height="100" HorizontalAlignment="Center" Tap="Logo_Tap" />
</phone:PanoramaItem.Header>
The HorizontalAlignment="Center"-Property unfortunately doesn't seem to do it. Any help would be appreciated.
I would avoid using a hard coded width. The proper way to do this would be to override the Template on the PanoramaItem, like this (They key part being changing the HorizontalAlignment on the header ContentControl)
<ControlTemplate x:Key="CenteredHeaderPanoramaItemTemplate" TargetType="phone:PanoramaItem">
<Grid Background="{TemplateBinding Background}" Margin="12,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentControl x:Name="header" CharacterSpacing="-35" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" FontSize="66" FontFamily="{StaticResource PhoneFontFamilySemiLight}" Margin="12,-2,0,38" HorizontalAlignment="Stretch">
<ContentControl.RenderTransform>
<TranslateTransform x:Name="headerTransform"/>
</ContentControl.RenderTransform>
</ContentControl>
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
Then just assign the Template using a StaticResource
<phone:PanoramaItem Template="{StaticResource CenteredHeaderPanoramaItemTemplate}">
<phone:PanoramaItem.Header>
<Image x:Name="Logo" Height="100" HorizontalAlignment="Center" Tap="Logo_Tap" />
</phone:PanoramaItem.Header>
<Grid x:Name="PanoramaItemContent">
</Grid>
</phone:PanoramaItem>
The simplest way is:
<phone:PanoramaItem.Header>
<Grid Width="432">
<Image x:Name="Logo"
Height="100"
HorizontalAlignment="Center"
Tap="Logo_Tap" />
</Grid>
</phone:PanoramaItem.Header>
<phone:PanoramaItem.Header>
<Grid HorizontalAlignment="Center">
<Image x:Name="Logo" Height="100" Tap="Logo_Tap" />
</Grid>
</phone:PanoramaItem.Header>
try this
Related
I am trying to vertically align a checkbox. The actual box appears at the top. I want it to appear in the middle.
This is the XAML:
<CheckBox FontSize="100" Content="Test" VerticalContentAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" HorizontalContentAlignment="Center"/>
This is what it looks like:
I have seen similar questions on SO, but the answer was to use VerticalContentAlignment. This does not work. Some answers have suggested using negative padding or margins, which does not scale. So please don't mark as duplicate, this has not really been answered. Or perhaps it was answered for WPF but not for UWP.
I am aware that you can change the style of the control, but that is a lot of work for something that should just work out of the box.
I am using VS 2019 16.6.2 with UWP v6.2.10
Update
This is what I would like my CheckBox to look.
How to vertically align XAML UWP checkbox
For the requirement, the better way is modify the checkbox's default layout. The default layout is Column, we need to change it to Row. And I will share the a part of style and you could use it directly.
<Grid
x:Name="RootGrid"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
>
<Grid.RowDefinitions>
<RowDefinition Height="32" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid
Height="32"
HorizontalAlignment="Center"
VerticalAlignment="Top"
>
<Rectangle
x:Name="NormalRectangle"
Width="20"
Height="20"
Fill="{ThemeResource CheckBoxCheckBackgroundFillUnchecked}"
Stroke="{ThemeResource CheckBoxCheckBackgroundStrokeUnchecked}"
StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
UseLayoutRounding="False"
/>
<FontIcon
x:Name="CheckGlyph"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="20"
Foreground="{ThemeResource CheckBoxCheckGlyphForegroundUnchecked}"
Glyph=""
Opacity="0"
/>
</Grid>
<ContentPresenter
x:Name="ContentPresenter"
Grid.Row="1"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="Center"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
TextWrapping="Wrap"
/>
For the complete style please refer this link.
Update
If do not want to edit the default style, we could make custom checkbox, and edit the layout in OnApplyTemplate method.
public class CustomCheckBox : CheckBox
{
protected override void OnApplyTemplate()
{
base.OnApplyTemplate();
var normalRectangle = GetTemplateChild("NormalRectangle") as Rectangle;
var rootGrid = normalRectangle.Parent as Grid;
Grid.SetColumnSpan(rootGrid, 2);
rootGrid.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center;
var contentPresenter = GetTemplateChild("ContentPresenter") as ContentPresenter;
Grid.SetColumn(contentPresenter, 0);
Grid.SetColumnSpan(contentPresenter, 2);
contentPresenter.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center;
}
}
Usage
<local:CustomCheckBox FontSize="100" Content="Test" VerticalAlignment="Center" HorizontalAlignment="Center" />
Update 1
use the following to replace OnApplyTemplate content.
var normalRectangle = GetTemplateChild("NormalRectangle") as Rectangle;
var rootGrid = normalRectangle.Parent as Grid;
Grid.SetColumnSpan(rootGrid, 2);
rootGrid.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Left
rootGrid.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Center;
I'm using the NavigationView control to provide the left pane hamburger menu navigation in my UWP app.
I'd like to change the color of the selection indicator (the little rectangle that shows up next to the item you selected).
In generic.xaml I can see the color is being set to the system accent color:
<Style TargetType="NavigationViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="NavigationViewItem">
<Grid
x:Name="LayoutRoot"
Height="40"
Background="{TemplateBinding Background}"
Control.IsTemplateFocusTarget="True">
<!-- Wrap SelectionIndicator in a grid so that its offset is 0,0 - this enables the offset animation. -->
<Grid
HorizontalAlignment="Left"
VerticalAlignment="Center">
<Rectangle
x:Name="SelectionIndicator"
Width="6"
Height="24"
Fill="{ThemeResource NavigationViewSelectionIndicatorForeground}"
Opacity="0.0"/>
</Grid>
<Border
x:Name="RevealBorder"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
<Grid Height="40" HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="IconColumn" Width="48" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Viewbox x:Name="IconBox"
Child="{TemplateBinding Icon}"
Margin="16,12"/>
<ContentPresenter x:Name="ContentPresenter"
Grid.Column="1"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Is there a way in my pages XAML file (that uses the NavigationView) to change the color of the rectangle Fill from NavigationViewSelectionIndicatorForeground to some value I set?
I know I could copy over the entire template and update the copy, and set the template on the NavigationView, but it seems like a lot of overhead just to change one value.
You can just define your own brush with x:Key="NavigationViewSelectionIndicatorForeground" for example in App.xaml:
<Application ...>
<Application.Resources>
<SolidColorBrush x:Key="NavigationViewSelectionIndicatorForeground"
Color="Yellow" />
</Application.Resources>
</Application>
Alternatively you could also declare the resource in the scope of your Page or even in your NavigationView's Resources, it just needs to be in the path in the XAML tree leading to the NavigationView.
Because your resource goes later in the cascade, it will override the default NavigationViewSelectionIndicatorForeground with your defined brush.
I have a ListView defined like this:
<ListView x:Name="phonesListView"
Grid.Row="5"
Background="Black"
IsItemClickEnabled="True"
Foreground="Gray" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid>
<Border x:Name="myback" Background="Transparent">
<ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="20, 0, 20, 0"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="auto" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid
Grid.Row="0">
<Grid.ColumnDefinitions >
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ComboBox
Grid.Column="0"
VerticalAlignment="Center"
Background="Black"
Foreground="White" >
<ComboBoxItem Content="Home" IsSelected="True"/>
<ComboBoxItem Content="Work"/>
<ComboBoxItem Content="Office"/>
<ComboBoxItem Content="Fax"/>
<ComboBoxItem Content="School"/>
</ComboBox>
<Button
Grid.Column="1"
Height="30"
Width="30"
Foreground="Black"
Margin="0, 5, 0, 5"
HorizontalAlignment="Center" Click="RemovePhone">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Assets/appbar.close.png" />
</Button.Background>
</Button>
</Grid>
<TextBox
Grid.Row="1"
Background="White"
Foreground="Black"
FontSize="18"
Text="{Binding Number}"
InputScope="TelephoneNumber" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In code i have attribute:
ObservableCollection<Phone> phones = new ObservableCollection<Phone>();
Everything works fine, I can add and delete items in list view by either
phones.Add or phones.Remove
The problem is for when I'm leaving a page or Save button is pressed the count of this collections is exactly it is supposed to be but there are no data i have filled in input field. Could you help me with that? Thanks.
If you want that the edited data in your ListView flows back to the items so you can save the edits, you'll have to use 2-way binding. When the control (in the sample below your TextBox) loses focus, the value of Text property gets stored back into the bound field (in your sample Number).
<TextBox
Grid.Row="1"
Background="White"
Foreground="Black"
FontSize="18"
Text="{Binding Number, Mode=TwoWay}"
InputScope="TelephoneNumber" />
For more details about binding, read the MSDN article.
I'm facing problem with handling different screen sizes and the problem is text!
I have next section:
This is display 1024x768
This is display 2560x1440
On Stack someone gave me hint that ViewBox can help me to solve this problem, ok i try this:
But what is this?
When text doesn't fit, it shrinks - that is nice, but how to tell other ( same-level elements ) to take the same shrink level?
In other words, i want all text the same size.
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="9*"/>
</Grid.RowDefinitions>
<Image HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="arrow_step_1.png" Stretch="Fill" />
<Image Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="arrow_step_1.png" Stretch="Fill"/>
<Image Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="arrow_step_1.png" Stretch="Fill"/>
<Image Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="arrow_step_1.png" Stretch="Fill"/>
<Viewbox>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="One" FontSize="20"/>
</Viewbox>
<Viewbox Grid.Column="1">
<TextBlock Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Two" FontSize="20"/>
</Viewbox>
<Viewbox Grid.Column="2">
<TextBlock Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Threeeeeeeeeee" FontSize="20"/>
</Viewbox>
<Viewbox Grid.Column="3">
<TextBlock Grid.Column="3" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Four" FontSize="20"/>
</Viewbox>
</Grid>
Try placing your ViewBox at the root level instead.. it should look something like this:
<ViewBox>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
...
</Grid>
</ViewBox>
You may want to play around with the Stretch property of the ViewBox to achieve your desired result. But I'd reckon to use the "Fill" option.
I've been using this method for my games and apps to adapt to different screen ratios and sizes.
I'm trying to design a windows phone 8 app where I need a listbox containing information. I'm using a data template to show my data. The datatemplate looks like this:
<DataTemplate x:Key="NewPortfolioHoldingTemplate">
<Grid Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="35*"/>
<ColumnDefinition Width="30*"/>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<toolkit:PhoneTextBox x:Name="Ticker" Grid.Column="0" HorizontalAlignment="Left" Height="80" TextWrapping="Wrap" VerticalAlignment="Top" Width="Auto" Text="{Binding Ticker}" Hint="Ticker" FontSize="32" />
<toolkit:PhoneTextBox x:Name="Shares" Grid.Column="1" HorizontalAlignment="Left" Height="80" TextWrapping="Wrap" Text="{Binding Share}" VerticalAlignment="Top" Width="Auto" Hint="Shares" />
<toolkit:PhoneTextBox x:Name="Price" Grid.Column="2" HorizontalAlignment="Left" Height="80" TextWrapping="Wrap" VerticalAlignment="Top" Width="Auto" Hint="Price"/>
<Button x:Name="Add" Content="+" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Column="3" FontSize="32" />
<Button x:Name="Remove" Content="-" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Column="4" FontSize="32" />
</Grid>
</DataTemplate>
And I'm using this datatemplate like this:
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock x:Name="NewPortNameBlock" Grid.Row="0" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Name" VerticalAlignment="Top" Margin="19,19,0,0" FontSize="24"/>
<TextBox x:Name="NewPortNameBox" Grid.Row="0" HorizontalAlignment="Left" TextWrapping="Wrap" Text="PortName" VerticalAlignment="Top" Margin="87,0,0,0" FontSize="24" Width="369"/>
<TextBlock x:Name="NewPortCashBlock" Grid.Row="1" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Cash" VerticalAlignment="Top" Margin="19,19,0,0" FontSize="24"/>
<TextBox x:Name="NewPortCashBox" Grid.Row="1" HorizontalAlignment="Left" TextWrapping="Wrap" Text="CashAmt" VerticalAlignment="Top" Margin="87,0,0,0" FontSize="24" Width="369"/>
<TextBlock x:Name="NewPortHoldingBlock" Grid.Row="2" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Holding" VerticalAlignment="Top" Margin="19,10,0,0" FontSize="24"/>
<ListBox x:Name="NewPortHoldingList" Grid.Row="2" Margin="10,47,10,10" ItemsSource="{Binding Holdings}" ItemTemplate="{StaticResource NewPortfolioHoldingTemplate}">
</ListBox>
</Grid>
Notice the template for ListBox. When I run it in the emulator(WVGA 512MB) I can't see any of the buttons for some reason. What did I do wrong? The template looks just fine when I'm editing it in Blend.
This is a side effect of the Style of the Button control. Within the ControlTemplate of the Button is a Grid with a Border control. The Border has a Margin set to the value of the "PhoneTouchTargetOverhang" resource. It does this to ensure that there is enough space to touch the button (harder to touch with a finger than it is with a mouse pointer). To remove this Margin, do the following
Right click on your ListBox (in design view) and select Edit Additional Templates -> Edit Item Template -> Edit Current. Now you will be editing your DataTemplate.
Now right click the Button, and select Edit Template -> Edit a copy... This will create a style resource for the button.
In the style, remove the Margin property (with the value noted above) from the Border control (it should be located under the VisualStateManager element).
The Border for your Button style should look like this
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" CornerRadius="0" >
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>