I have an app with a dropdownbutton flyout. I'm migrating the XAML over to a new project and the dropdownbutton is behaving differently. In the first instance, the dropdown flyout would be alligned to the left edge of the button (what I want it to do). In the second instance, it is aligned to the right edge of the button and contained within the apps window.
XAML
<DropDownButton ToolTipService.ToolTip="File"
VerticalAlignment="Top"
HorizontalAlignment="Left" Background="Transparent"
Style="{StaticResource CommandBarFlyoutEllipsisButtonStyle}"
Height="33"
FontFamily="Segoe MDL2 Assets" Content="">
<DropDownButton.Flyout>
<MenuBarItemFlyout Placement="LeftEdgeAlignedTop">
<MenuFlyoutItem Text="Open File" Icon="OpenFile" Tag="Open File"
Click="OpenLocalFile"/>
</MenuBarItemFlyout>
</DropDownButton.Flyout>
</DropDownButton>
First app (how I want it to look)
Second app
There are a number of differences between the two apps but the xaml is almost identical. I can't seem to pinpoint what could cause this fly out to behave differently. Thanks for any help you can provide!
Related
In my Windows 10 UWP app there is a view, where a MapControl is partially (at the top) covered by a Grid. This Grid has cockpit-like elements in it (e.g. speedometer) and has a semi-transparent background-brush (#CC6A6E4D).
The actual problem is, that this background-brush is flickering, whenever one is interacting with the MapControl. Weird thing about this is, that this issue exclusively works on just one of my three test devices (Lumia 550) and only is present in portrait-mode (but not in landscape-mode).
An example-layout, where I've got that issue would be this:
<Grid>
<maps:MapControl
Name="MainMapControl"/>
<Grid
Height="50"
VerticalAlignment="Top">
<Grid.Background>
<SolidColorBrush Color="#CC6A6E4D" />
</Grid.Background>
</Grid>
</Grid>
Any ideas?
I have created my first Expression Blend page. It looks flat and dull. WIthout going overboard, how do I add a touch of depth to this page.
http://i67.photobucket.com/albums/h292/Athono/looks%20like%20poo_zps3wt7phoj.png
I have changed it so that the LayoutRoot has a grey background and I have changed the textboxes like so:
<Border BorderBrush="#FF121111" BorderThickness="2" Grid.Row="0" Margin="90,194,192,0" Height="45" VerticalAlignment="Top" Background="White">
<TextBlock Height="33" Margin="6,6,6,0" VerticalAlignment="Top" TextWrapping="Wrap" Foreground="Black" d:LayoutOverrides="HorizontalAlignment"/>
</Border>
But the textboxes still do not have the 3d depth that typical areas that ask for user input have. For example, if you click to open a file in most programs, the area to add a file name looks as if it is more depressed (pushed down) so that the top of the box is defined and has a thicker line than the bottom of the text box.
I have a nother, simpler question that is related to this. How do I do a test run of the page in Expression Blend to see how it performs and looks when I do a mouse over and mouse click on the controls?
I've attempted to have a <Grid/> (with interactive stuff inside, not just an image) clipped with rounded corners (a <Border/> or a <Rectangle/>, whatever works).
I've attempted multiple solutions, but none of them was compatible with a Windows Store App.
No brush:
RadialGradientBrush is not supported in a Windows App project.
DrawingBrush is not supported in a Windows App project.
The type 'VisualBrush' was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built.
No mask:
The attachable property 'OpacityMask' was not found in type 'Image'.
The attachable property 'OpacityMask' was not found in type 'StackPanel'.
The attachable property 'OpacityMask' was not found in type 'Grid'.
No rounded geometry:
The property 'RadiusX' was not found in type 'RectangleGeometry'.
MultiBinding is not supported in a Windows App project.
Is it something technically impossible in a C#/XAML Windows store app?
Have you tried putting your control inside a border? Just set the border's corner radius to 150 and you have a perfectly round control. Here's an example with a button.
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center" Height="200" Margin="0,0,0,0" VerticalAlignment="center" Width="200" CornerRadius="150">
<Button x:Name="btnPlayback" Content="Play" HorizontalAlignment="Center" Height="200" Margin="0,0,0,0" VerticalAlignment="center" Width=" 200" BorderThickness="0" Click="btnPlayback_Click_1"/>
</Border>
<Ellipse HorizontalAlignment="Left" Height="301" Stroke="Black" VerticalAlignment="Top" Width="300">
<Ellipse.Fill>
<ImageBrush Stretch="Uniform" ImageSource="http://cfile3.uf.tistory.com/image/26616E4D514A3CDC136C4B"/>
</Ellipse.Fill>
</Ellipse>
Can you use ImageBrush?
I works well.
It sounds to me like you have answered your own question. :) Just don't like the answer?
In WPF your options to clip are almost limitless. Even SilverLight had some great options. But, in Windows 8 (right now) you are limited to RectangleGeometry. End of story. It is worth pointing out that you can apply a Transform to a RectangleGeometry which gives you a little more insofar as options.
(at least now you know)
Best of luck!
I am developing a Windows 8 Metro application whose layout is pretty simple. It consists of a single page with a WrapGrid enclosed in an ItemsControl, which is in turn enclosed in a ScrollViewer. This is the XAML code of the application main page:
<Page ...>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="MainGrid" Margin="120,140,32,0">
<ScrollViewer x:Name="ScrollView"
VerticalScrollBarVisibility="Auto"
HorizontalAlignment="Stretch">
<ItemsControl x:Name="itemsControl" HorizontalAlignment="Stretch">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal"
HorizontalChildrenAlignment="Stretch"
Margin="0"
HorizontalAlignment="Center">
<WrapGrid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition />
<RepositionThemeTransition />
</TransitionCollection>
</WrapGrid.ChildrenTransitions>
</WrapGrid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</Grid>
<Page.BottomAppBar>
...
</Page.BottomAppBar>
</Page>
There is also an user control of which new instances are created and added to the ItemsControl programmatically when the user clicks on a certain button in the application bar. As expected by the fact of using a WrapGrid, the control instances are stacked sequentially in a single row until there is no more room in the screen, at which point they appear in a new row and it is necessary to scroll down in order to see them. So far so good.
Now I want to implement a feature and I don't know how to achieve it. What I want is the following: when the user zooms out in the application, causing the controls to appear smaller, I want the new available space to be used so that more controls can be displayed per row; instead, the current behavior is that the ItemsControl itself is reduced and the extra surrounding space is unused.
For example, imagine that the user adds 10 controls. There is room for 4 controls in one row, so that 3 rows of controls are displayed, with 4, 4 and 2 controls. If the user zooms out and now there is room for 7 controls in a row, I want the ItemsControl to rearrange itself so that now there are only two rows with 7 and 3 controls. How could I achieve this?
I hope I have explained myself properly. Please don't hesitate to ask if my question is not clear enough. Thank you very much!
So I have a grid with a background. Inside the grid is a WebView and then some space on the left hand side of the screen where I have just placed a Button for now.
As the program runs, the left hand bar (that shows the grid with the background and the button laid out on it) doesn't render, instead I get the background, no controls on it and a black triangle (or geometric shape) at the bottom.
I suspect it's an issue with the VM and the video driver. I had a similiar issue with WPF a few years ago and MS's response was that I had an incompatible video driver that was causing the form to not render correctly at all times (this is very much the same behavior).
What can I do to prevent this? I'm including an image.
I'm going to include the small XAML I used and then a screenshot of the behavior (The XAML I rekeyed by hand):
<Grid>
<Grid.Background>
<ImageBrush ImageSource="Media/Background.jpg" />
</Grid.Background>
<TextBlock FontSize="24" Margin="15,15,0,0">Sample Label</TextBlock>
<WebView x:Name="wv1" Margin="250,0,0,0"></WebView>
<Button Content="Do Something" HorizontalAlignment="Left" Height="42" Margin="57,131,0,0" VerticalAlignment="Top" Width="170" Click="Button_Click1" />
</Grid>
VMs don't work well with multimedia. You should expect all sorts of problems with video.