I'm unable to left-align the contents of a Flyout.
Windows seems to automatically right-align flyout contents that display on the right side of the window. I tried setting the HorizontalAlignment property of the children, setting the Flyout.FlyoutPresenterStyle property HorizontalContentAlignment, and other HorizontalContentAlignment properties without success.
<StackPanel Orientation="Horizontal"
FlowDirection="RightToLeft">
<!-- Settings menu -->
<Button.Flyout>
<Flyout>
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/><!-- No -->
</Style>
</Flyout.FlyoutPresenterStyle>
<StackPanel HorizontalAlignment="Left"><!-- No -->
<TextBlock HorizontalAlignment="Left" HorizontalTextAlignment="Left">Settings</TextBlock><!-- No -->
…
</Button.Flyout>
</StackPanel>
I expect the flyout contents to align left, but they stay on the right.
Creating a reproducible example made me realize my error. The property FlowDirection was accidentally set as RightToLeft in a parent StackPanel. Reverting this solves the problem.
Related
I am using AdaptiveGridView from UWP Community toolkit.
The Very first Item displays horribly wrong and all other Items are displayed just fine.
See in the picture below the 1st item has bigger Folder Image than others.
XAML
<Style TargetType="controls:AdaptiveGridView" x:Key="MainAdaptiveStyle">
<Setter Property="SelectionMode" Value="None"/>
<Setter Property="StretchContentForSingleRow" Value="False"/>
<Setter Property="DesiredWidth" Value="220"/>
<Setter Property="IsItemClickEnabled" Value="True"/>
<Setter Property="animations:ReorderGridAnimation.Duration" Value="400"/>
</Style>
<PivotItem Header="Folders">
<controls:AdaptiveGridView Name="FoldersLibraryGridView"
Style="{StaticResource MainAdaptiveStyle}"
ItemsSource="{x:Bind ViewModel.Folders}">
<controls:AdaptiveGridView.ItemTemplate>
<DataTemplate x:DataType="data:FolderItem">
<userTemplates:FolderTemplate />
</DataTemplate>
</controls:AdaptiveGridView.ItemTemplate>
</controls:AdaptiveGridView>
</PivotItem>
<....below is user control which is used the DataTemplate, known as FolderTemplate...>
<Grid >
<Grid.Resources>
<Style TargetType="Image" x:Key="ThumbImageStyle" >
<Setter Property="Stretch" Value="UniformToFill"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="8"/>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="8*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<Border x:Name="ThumbImage" Grid.Row="0">
<Border.Background>
<SolidColorBrush Color="{ThemeResource SystemAccentColor}" Opacity="0.5"/>
</Border.Background>
<Image Source="ms-appx:///Assets/FolderIcon.png"
Style="{StaticResource ThumbImageStyle}"
/>
</Border>
<Border Background="{ThemeResource SystemAltHighColor}" Grid.Row="1" Padding="8,0,4,0">
<TextBlock Text="{x:Bind FolderItem.MyFolder.DisplayName}"
Style="{StaticResource GridViewVideoName}"/>
</Border>
</Grid>
UPDATE
as You can see in the picture below, market with red line, right side of each item is faded where the folder name textblock ends, and this occurs only when ItemHeight is Explicitly set on the ApativeGridView
I think the fix is simple. First have a look at the description of this control on GitHub -
/// <remarks>
/// The number and the width of items are calculated based on the
/// screen resolution in order to fully leverage the available screen space. The property ItemsHeight define
/// the items fixed height and the property DesiredWidth sets the minimum width for the elements to add a
/// new column.</remarks>
I believe ItemsHeight is a typo there. It really should be ItemHeight. You just need to specify it (e.g. <controls:AdaptiveGridView ItemHeight="280" ... /> and the problem should go away.
Update
Your second issue is related to the DropShadowPanel in the toolkit. If you resize the window a bit you will notice that the shadows then render properly.
I had a look at the default style of the control and the HorizontalContentAlignment property is set to Left initially. So it looks like the control doesn't properly resize its inner shadow component when the size is changed.
But since you have already got a local style, you can just set it to Stretch and the issue should go away.
<Style TargetType="controls:DropShadowPanel"
x:Key="MainDropShadow">
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
Update 2
OK, so here is the reason why initially the shadow is not stretching -
The shadow size is calculated based on the Content of the DropShadowPanel control, but the shadow only monitors the SizeChanged event of the control to update its size.
What's happening in your case is that your Grid (direct child of the DropShadowPanel control) was initially arranged with a smaller size, then the shadow size was set, and then when the size of your Grid updates, because the size of DropShadowPanel is still with the same size, no SizeChanged will be invoked, hence the shadow size is not re-calculated. If you have the toolkit source code, you should be able to simply switch to monitor the SizeChanged of the Content instead and the problem should go away.
When you are setting HorizontalContentAlignment to Stretch, you are effectively saying "the child should have the same size of the parent". So when the shadow is initially sized, your Grid is already at the same size of its parent. But I feel like they must have been using Left for a reason and this should just be a temporary fix for your case.
How can I display a textbox beside a button like in this picture?
A Flyout would be suitable here.
<Button Content="Edit">
<Button.Flyout>
<Flyout Placement="Right">
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
</Style>
</Flyout.FlyoutPresenterStyle>
<TextBox Width="250" Height="100" TextWrapping="Wrap"/>
</Flyout>
</Button.Flyout>
</Button>
Play around with the styles to get the appearance you want.
I'd like to have page headers in my app with either an icon or text centered in a 50px high bar at the top of the page. Optionally with a back-button.
For this reason I use a UserControl on each page which gets either one of those styles applied: PageHeaderStyle or PageHeaderBackStyle.
My implementation of one of those is the following (style definition in my App.xaml):
<Style x:Key="PageHeaderBaseStyle" TargetType="UserControl">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Height" Value="50" />
<Setter Property="Width" Value="NaN" />
<Setter Property="Background" Value="{StaticResource CDColor}" />
</Style>
<Style x:Key="PageHeaderStyle" TargetType="UserControl" BasedOn="{StaticResource PageHeaderBaseStyle}">
<Setter Property="Content">
<Setter.Value>
<Grid Background="{StaticResource CDColor}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DataContext="{StaticResource MainPageModel}">
<TextBlock Style="{StaticResource PageHeaderTextBlockStyle}" Text="{Binding Title}" Visibility="{Binding TitleVisibility}" />
<Image Style="{StaticResource PageHeaderIconStyle}" Source="{Binding Icon}" Visibility="{Binding IconVisibility}" />
</Grid>
</Setter.Value>
</Setter>
</Style>
Applied like it should be:
<UserControl Style="{StaticResource PageHeaderStyle}" />
Now first I had used "Template" and applied a DataTemplate with the grid component. But this didn't work. Then I changed it to directly set the Content of the UserControl. This does work: After building the designer shows the page header (before it showed only the blue selection border, but no content - it was transparent).
But as soon as I start debugging the app on the emulator it disappears and the running app only shows a blank spot where it should be.
Why is this so? I mean after all the designer already shows it, why does it disappear then, though?
FYI: I do not get any binding exceptions nor any other. It just doesn't show up.
PS: I tried setting the Background in the base style while setting the grid's background to transparent. This didn't work either - only a blank spot.
Solved the problem: Best approach is probably to use a ContentControl. Using the Content property did not work, though. You have to use the ContentTemplate property. Using that one does work just fine.
Can anyone explain, how to change the fontfamily of the flyoutpicker(the overflow menu that appears when there are more than 5 items in a combobox) ?
I've tried many ways, but not able to get the solution.
Please help.
The link to the screenshot ->
http://i.stack.imgur.com/237XW.png
I somehow mananged to change the header font[marked by yellow rectangle] and also the background colour[marked red *]
But i want to change the font family of the text[marked by red rectangle].
Please help me...
try to override ListPickerFlyoutPresenter
<Style TargetType="ListPickerFlyoutPresenter">
<Setter Property="FontFamily" Value="{StaticResource MyFontFamily" />
<Style/>
UPDATE:
You need override following DataTemplate for customizing FontFamily
<!-- DataTemplate holding the content for ListPickerFlyoutPresenter's ItemsHostPanel -->
<DataTemplate x:Key="ListPickerFlyoutPresenterContentTemplate">
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="FontSize" Value="32"/>
<Setter Property="FontFamily" Value="{StaticResource LoraBoldFontFamily}"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.Footer>
<Border Height="{ThemeResource ListPickerFlyoutFooterThemeHeight}" Width="1" />
</ListView.Footer>
</ListView>
</DataTemplate>
Donwnload sample from OneDrive
I am writing a Store app with XAML and C#. I want to use Border and ViewBox. I got border styled, so I do not have to set properties that many times. I set BorderThickness to 2, and color to White, but this causes problems in my Viewbox.
Here it is in XAML:
<Viewbox Grid.Row="1" Stretch="Uniform">
<Grid Width="600" Height="600">
<Grid.Resources>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="White" />
<Setter Property="BorderThickness" Value="2" />
</Style>
<Style TargetType="Grid">
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Width" Value="150" />
<Setter Property="Height" Value="150" />
</Style>
</Grid.Resources>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<Grid>
<Border>
<Viewbox>
<TextBlock Text="T" />
</Viewbox>
</Border>
</Grid>
The result of this is:
The problem is the scaled border around the letter "T".
I do not want to remove above styling for Border in Grid.Resources. I found only one solution so far...
<Viewbox>
<Viewbox.Resources>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="White" />
<Setter Property="BorderThickness" Value="0" />
</Style>
</Viewbox.Resources>
<TextBlock Text="T" />
... what would give correct result:
, but I do not want to put these lines after each ViewBoxes, because there will be many.
I also tried to make a component, what has this default "resource" of zero thick border, but that had bad scaling.
So my question is how to to remove that border?
You're right to use the zero value for BorderThickness. There just might be another element in the visual tree hierarchy that also holds a default value that causes this.
I can't test this right now, but I can recommend this tool to you:
http://blois.us/Snoop/
You can inspect the visual tree with this by dragging the crosshair above your running debug application. Every time I stumbled upon a problem like this I found it highly useful to see which controls really appear at runtime, because with xaml it can be really tough to know it all. Hope you can find it!