While thinkering a bit I found some (for me) unexpected behaviour of the Border element in XAML. That is when the BorderThickness of a side is set to 0, there appears to be an overflow of the border on the side adjacent.
To demonstrate I made a quick sample
<Page
x:Class="TestApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Canvas>
<Rectangle Height="20" Width="300" Fill="Blue" Margin="50, 30, 0 ,0" />
<Border Height="20" Width="300" Background="Green" Margin="50, 50, 0 ,0" BorderBrush="Red" BorderThickness="0,0,0,4" />
</Canvas>
</Page>
This results in the visual representation following (zoomed in for better visibility)
As you can see, the red border overlaps the actual Border element by 1px. The blue Rectangle is to verify, that it is not the green background but the red border being out of place.
Now the interesting part. When I edit the code so BorderThickness="4,0,0,4", the left overflow is gone but instead there is one on the top.
Now to my questions:
Is this overflow the expected behaviour for Border?
Is there a way to avoid this without using multiple Rectangle and thus further increase complexity?
Related
I have come across a layout / template problem with CommandBar of which symptoms are seen in several pages:
UWP - CommandBar blank space under Buttons
https://github.com/microsoft/microsoft-ui-xaml/issues/1024
It seems that the UWP CommandBar elements inside the CommandBar have an actual height of 44px, which is cropped in a control of 40px.
When IsOpen="False", the AppBarButtons are vertically centered and the bottom 4px of the CommandBar.Content section is not shown
When IsOpen="Top", the AppBarButtons are shifted up, an ugly gap appears under them and the bottom 4px of the CommandBar.Content section is suddenly shown
Besides the ugly gap, it makes it very difficult to correctly vertically center elements in CommandBar.Content.
About the vertical position of the CommandBar
When the CommandBar is at the top of the Page, the CommandBar itself does not vertically resize.
When the CommandBar is at the bottom of the Page, the CommandBar itself grows vertically with 4px.
In all cases, the other symptoms happen
At bottom of page
The red line visualizes the bottom 4px of the CommandBar.Content section. Also, with the Reveal effect to the left of the mouse cursor you can see that the buttons shift up. The whole CommandBar grows vertically
At top of page
Trying to vertically align the content (hint: does not work)
Question
Is there any way to workaround this issue? Microsoft has qualified this more than a year ago as something they might fix in WinUI 3 which is far away.
Bug repro repository
https://github.com/hansmbakker/CommandBar.BugRepro
Relevant code to reproduce
<Page x:Class="CommandBar.BugRepro.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CommandBar.BugRepro"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.BottomAppBar>
<CommandBar
VerticalContentAlignment="Bottom"
Background="#BB555555"
DefaultLabelPosition="Right">
<AppBarButton Icon="Back"
Label="Back" />
<AppBarButton Icon="Save"
Label="Save" />
<AppBarSeparator />
<AppBarButton Label="Title" />
<AppBarButton Label="Description" />
<AppBarButton Label="Pictures"
Icon="Pictures" />
<CommandBar.Content>
<Rectangle Fill="Red"
Height="4"
Width="200" />
</CommandBar.Content>
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Setting"
Label="Settings">
<AppBarButton.KeyboardAccelerators>
<KeyboardAccelerator Modifiers="Control"
Key="I" />
</AppBarButton.KeyboardAccelerators>
</AppBarButton>
</CommandBar.SecondaryCommands>
</CommandBar>
</Page.BottomAppBar>
<Grid>
</Grid>
</Page>
UWP CommandBar moves vertically when IsOpen changes
During the testing, AppBarSeparator cause this behavior. Currently there is a work around that could fix this, please give AppBarSeparator specific height less than 40px.
<AppBarSeparator Height="40"/>
I'm creating a basic application to test some functionality in a XAML based Windows 8 app.
I have created the following structure to simplify my example but in the real app it'll be more complex:
<Page
x:Name="pageRoot"
x:Class="ScrollingTest.Xaml.MainPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ScrollingTest.Xaml"
xmlns:common="using:ScrollingTest.Xaml.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ScrollViewer
HorizontalScrollMode="Auto"
HorizontalScrollBarVisibility="Auto"
VerticalScrollMode="Disabled"
VerticalScrollBarVisibility="Hidden" Margin="0,0,0,10" VerticalContentAlignment="Stretch" BorderBrush="#FF0BC8FF" BorderThickness="1" Grid.Row="1" >
<Frame Content="Frame" Name="theFrame" Margin="100" Width="3000" BorderBrush="Red" BorderThickness="1"
ScrollViewer.VerticalScrollMode="Enabled"
ScrollViewer.VerticalScrollBarVisibility="Visible" />
</ScrollViewer>
</Grid>
</Page>
The page, which is loaded into the Frame is of variable height (it contains a listview).
The issue is that as the height of the sub-page increases, so does the height of the ScrollViewer, meaning that the content is forced off the bottom of the screen.
What I'd want to achieve is horizontal scrolling for the parent but then use vertical scrolling on the sub-page. In the real application there will be many sub-pages, probably within a grid.
It seems that putting the frame inside a ScrollViewer breaks the frame's internal scrolling capabilities.
If anyone could let me know of either a better way to achieve my end result or of some property I need to change then I'd be very grateful.
I ended up using the solution from the following comment:
XAML: Limiting size of control nested in ScrollViewer (to scroll nested within the ScrollViewer)
Height="{Binding ElementName=scrollViewer, Path=ActualHeight}"
Not really what I wanted as this doesn't cope automatically when changing the orientation but it will have to do.
The other option is to handle the SizeChanged event of the page and update the height from the event handler (theFrame.Height = scrollViewer.ActualHeight). That way it copes with changing the orientation as well.
I try to understand how windows phone viewport control Bounds work.
So i can give
viewport.Bunds = new Rect(x,y,width, height);
but what that bound stand for is it a scrollable area in the viewport.
Can anyone give me a working simple example of it cause whenever i try to use this parameter i can't scroll in viewport whatsover
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0">
<ViewportControl Name="tuzik" Bounds="0,0,300,400" Margin="66,117,20,41" >
<Canvas Name="canvas">
<Image Name="TestImage" Source="Assets\testimage.jpg"
HorizontalAlignment="Left" VerticalAlignment="Top"
Canvas.Left="-379" Canvas.Top="-769" Stretch="Fill" />
</Canvas>
</ViewportControl>
<Rectangle x:Name="rect" Width="300" Height="400" Margin="60,111,63,0" Stroke="Aqua" />
</Grid>
I believe your problem is the Canvas within the ViewportControl. Canvas does not expand to fill the ViewportControl and will not expand to contain the contents, either. You have to set a Width and Height on the Canvas.
(At least, that's how I have mine setup.)
I am displaying a clipped image (round shape) inside a KinectTileButton. The problem is that I don't know how to change the Selected behavior. By default, when the button gets clicked, the entire area gets darker and I get to see the corners of the square. I want to change the Selected state to transparent so I don't see the corners of the square (as I have a circle inside).
<k:KinectTileButton Background="Transparent" Width="500" Height="500" Click="ContactClick">
<Grid Height="500" Width="500">
<Image Source="/Namespace;component/Resources/Images/Image.png" Width="450" Height="450" x:Name="ContactStream">
<Image.Clip>
<EllipseGeometry RadiusX="220" RadiusY="220" Center="225,225"/>
</Image.Clip>
</Image>
</Grid>
</k:KinectTileButton>
It seems like every object that has been added to a page in a Windows 8 App gets this "slide from right to left"-entrance-transition which begins whenever someone navigates to the page.
Is there a possibility to remove single objects from this transition?
Neither
<Object.Transitions>
<TransitionCollection />
</Object.Transitions>
nor this thread helped...
Any ideas?
AFAIK There's no way to exempt a given object from the transitions applied by it's parents. The only thing I can suggest is to structure your xaml in such a way that the transition isn't applied. By this I mean having this special item in a panel that has no children transitions while the rest of the page is in a panel with a child transition. Depending on where this item is it could be very easy or difficult as hell.
As Nigel suggested, the only solution I have found has been to change the page structure and put the elements out of the grid that has the animations:
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Transitions>
<TransitionCollection/>
<!-- Ensure no transitions in background -->
</Grid.Transitions>
<TextBlock FontSize="50" Margin="50">This item is not animated</TextBlock>
<Grid>
<Grid.ChildrenTransitions>
<TransitionCollection>
<!-- add transitions here -->
<EntranceThemeTransition FromVerticalOffset="1500" FromHorizontalOffset="1500"/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<TextBlock Margin="50,100" FontSize="50">This item is animated</TextBlock>
</Grid>
<TextBlock FontSize="50" Margin="50,150">Another not animated item</TextBlock>
</Grid>
</Page>