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!
Related
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!
I have some png files that I need to use in a WPF (xaml) application in vectorial format as DrawingBrush.
How can I convert a png to xaml DrawingBrush?
A PNG is not a vector graphic, and making it one isn't something you can do by setting an attribute. You can scale it smaller, but if you try to scale it larger, you'll see some artifact. And you don't need to put it in a DrawingBrush to scale it either way.
The answer is to do this with an ImageBrush:
<Window.Resources>
<ImageBrush
x:Key="MyBrush"
ImageSource="SantaClaus.png"
TileMode="Tile"
Viewport="0,0,100,100"
ViewportUnits="Absolute"
Stretch="Fill"
/>
</Window.Resources>
<Grid Background="{StaticResource MyBrush}">
</Grid>
But if you're dealing with a poorly designed third party control which can only use DrawingBrush, you can do that too:
<DrawingBrush
x:Key="MyBrush"
TileMode="Tile"
Viewport="0,0,100,100"
ViewportUnits="Absolute"
Stretch="Fill"
>
<DrawingBrush.Drawing>
<DrawingGroup>
<ImageDrawing ImageSource="SantaClaus.png" Rect="0,0,100,100" />
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
Background
I am developing a UWP app, which is being designed for mobile, desktop etc.
I am having a bit of difficulty with the CommandBar on certain pages - specifically on a phone (but this may also apply to a smaller desktop window).
Issue
Where I require quite a few AppBarButtons on the CommandBar, sometimes it overflows and I am unable to see/access the hidden buttons.
Here is a sample screenshot where you can see that the "Documents" label is being cut off. There is also another button (which cannot be seen/accessed) which I guess you would say is "underneath" the ... button:
XAML
Shortened for brevity (nothing special/out of the ordinary here)
<CommandBar>
<!-- Secondary Commands -->
<CommandBar.SecondaryCommands>
<AppBarButton Command="{Binding RefreshCommand}"
Icon="Refresh" Label="Refresh"/>
<AppBarButton Command="{Binding AddToLibraryCommand}"
Icon="Save" Label="Add to Library"/>
</CommandBar.SecondaryCommands>
<!-- Primary Commands -->
<CommandBar.PrimaryCommands>
<AppBarButton Command="{Binding CompleteFormCommand}"
Icon="Paste" Label="Complete a Form" />
<AppBarSeparator />
<AppBarButton Command="{Binding ViewPeopleCommand}"
Icon="People" Label="People" />
<AppBarButton Command="{Binding ViewPropertiesCommand}"
Icon="Home" Label="Properties" />
<AppBarButton Command="{Binding ViewDocumentsCommand}"
Icon="Folder" Label="Documents" />
<AppBarSeparator />
<AppBarButton Command="{Binding ViewMapCommand}"
Icon="Map" Label="Map" />
</CommandBar.PrimaryCommands>
</CommandBar>
What I need
I still need the other AppBarButtons to be accessible by the user.
The amount of buttons on each CommandBar can vary - sometimes they fit fine, some have 1 (like the example) hidden, others have 2 or 3 hidden.
I am thinking that (surely, somehow) it might be possible somehow to allow horizontal scrolling in order to access the other buttons?
What I have tried
I have resorted to moving some of the non-essential commands to the CommandBar.SecondaryCommands, to free up some space; as can be seen in the screenshot/XAML above - however, the main problem is still apparent.
There is no ScrollViewer attached property, and trying to nest the AppBarButtons inside one naturally throws me a compiler error:
Invalid type: expected types are IObservableVector<ICommandBarElement> or ICommandBarElement, actual type is ScrollViewer.
I have searched the Web far and wide for answers to see if it is possible, and it doesn't appear there is much literature (or any similar StackOverflow answers) on how I can go about solving this issue.
All advice is greatly appreciated. Thank you in advance.
As for me, it is not pretty good UX behavior, but you can override Style for CommandBar and wrap primary ItemsControl into ScrollViewer.
Find the default style and find the PrimaryItemsControl and replace to:
<ScrollViewer VerticalScrollMode="Disabled"
VerticalScrollBarVisibility="Disabled"
HorizontalScrollMode="Enabled"
HorizontalScrollBarVisibility="Visible">
<ItemsControl x:Name="PrimaryItemsControl"
HorizontalAlignment="Right"
MinHeight="{ThemeResource AppBarThemeMinHeight}"
IsTabStop="False"
Grid.Column="1">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
After that don't forget apply new style for CommandBar:
<CommandBar Style="{StaticResource ScrollablePrimaryComamndCommandBar}">
P.S. full xaml on pastebin
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?
In windows phone 8 I want to put an Image in a circle. Is there a container like grid which have a circular form? I know that there is ellipse bit it is not a container
Here is how I do it.
<Ellipse Width="100"
Height="100">
<Ellipse.Fill>
<ImageBrush>
<ImageBrush.ImageSource>
<BitmapImage UriSource="/YourImage.png" />
</ImageBrush.ImageSource>
</ImageBrush>
</Ellipse.Fill>
</Ellipse>
As a best practice, consider setting DecodePixelWidth and DecodePixelHeight to the same size as your ellipse.
Another option to mleroy's answer (since if I remember right WP is based on silverlight and I often run into a lack of brush availability to do stuff like that.) You could do this using the Clip property.
For example;
<Image
Source="blah\yourpicture.jpg"
Width="100" Height="100">
<Image.Clip>
<EllipseGeometry
RadiusX="100"
RadiusY="100"
Center="100,100"/>
</Image.Clip>
</Image>
Hope this helps, cheers
Edit Addition: You could also bind your radius X/Y to the width/height of the image for more flexibility on dynamic sized images.