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>
Related
What I'm trying to do was extremely easy in SL/WP 8 but seems to be impossible in WP 8.1 without redefining the Hub template myself. I want to create a hub with a header that:
Scrolls horizontally.
Has a background that scrolls along with it.
Has no margins on either side.
I know this can probably be solved by just having my background image include the background and the hub just being transparent, but I wanted to know if there was a way to solve it in XAML.
Putting a Grid with a background into the Hub's header just highlights the background as much as the hub needs--not stretching all the way across:
<Hub>
<Hub.Header>
<Grid Background="Red" Height="60">
<TextBlock Text="My Header" />
</Grid>
</Hub.Header>
</Hub>
The above makes the header with the text "My Header" but only the text part has a background. Furthermore, the Hub itself seems to have inner margins of 16 on each side so the background doesn't stretch across the whole phone screen.
Should I just be going with a background or deconstructing the template to remove the margins?
Far from an elegant solution but basically I put the background outside the Hub and gave it negative margins like so. Hacky but I guess it works.
<Grid>
<!-- This is the header bar -->
<Grid Height="64" Background="Red" />
<Hub>
<Hub.Header>
<StackPanel Margin="-6,0,0,0">
...
</StackPanel>
</Hub.Header>
<!-- actually just defined the margin in my ResourceDictionary to target all HubSections -->
<HubSection Header="section 1" Margin="-2,-20,-4,8" />
<HubSection Header="section 2" Margin="-2,-20,-4,8" />
</Hub>
</Grid>
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.
In my app I have a list box that contains a stack panel with text block items. The text block items have a text wrapping or text trimming property to avoid that the text block items slide outside the visible range.
As far as I know the text wrapping and text trimming property need a fixed width to insert a line break. For this reason, I set a fixed width for the title (Width="456") and for the description (Width="432"):
<ListBox x:Name="CategoryList" ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<StackPanel>
<TextBlock
Style="{StaticResource PhoneTextLargeStyle}"
Text="{Binding Name}"
TextTrimming="WordEllipsis"
Width="456"
/>
<TextBlock
Style="{StaticResource PhoneTextSubtleStyle}"
Margin="12,-6,12,0"
Text="{Binding ContentDescription}"
TextWrapping="Wrap"
Width="432"
/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The problem now is that when I turn the phone, the fixed width for the horizontal mode is too small. Is there a way to put in place of the fixed width a width depending on the device width?
Screenshot:
in general its never a good idea in XAML to use fixed width/height (for "whole" page(100%)) since XAML was designed to do this job for you, so you might concentrate on your layout and the technology covers the aspect of different screens and sizes.
So, if you use a fixed width to display sth. on the whole page its a very good indicator that something is wrong.
In your case you've got the use of StackPanels wrong. StackPanels are designed in a way, that their size is not limited in the direction of their orientation. This means, a StackPanel that has got its orientation set to horizontal might grow indefinetely in width and a sp with orientation set to vertical wouldn't be limited in its height.
Now this leads us to your problem: you have used an indefintely-in-width-growing element in an indefinetely-in-height-growing element (two stackpanels).
Even though you might by some tricks limit their size (e.g. that could be achieved by some data bindings), this isn't what should be done.
I'd say - since in the parent StackPanel nothing is stacking - substitute it with some other panel/container (or just remove it) and your problem will be gone.
Example
<DataTemplate>
<!-- If you need more child elements uncomment the following line -->
<!-- <Grid> -->
<StackPanel Margin="0,0,0,17">
<TextBlock ... />
<!-- no need to set width on the following textblock -->
<TextBlock ... TextWrapping="Wrap" />
</StackPanel>
<!-- </Grid> -->
</DataTemplate>
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 have a [silverlight] WizardContainer control that hosts a number of wizard pages. The wizard fits nicely on its host form. If the page has narrow content it doesn't expand to fill the container. So I set HorizontalContentAlignment to Stretch. This works.
However if the wizard page contains a datagrid with lots of columns it stretches the page instead of autoscrolling itself - as its width is not fixed. If the following XAML is on a usercontrol with a width of 350 I want the grid to be 350 and have its own scrollbars. If the WizardContainer is made smaller than the page minwidth then the MainScroller should come into play.
<Grid x:Name="LayoutRoot" >
<ScrollViewer x:Name="MainScroller" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" >
<ContentControl Margin="4" x:Name="WizardContainer" HorizontalContentAlignment="Stretch">
<Grid Background="Red" x:Name="WizardPage" MinWidth="300">
<sdk:DataGrid HorizontalAlignment="Left" Height="120" >
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Width="150"/>
<sdk:DataGridTextColumn Width="150"/>
<sdk:DataGridTextColumn Width="150"/>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
</Grid>
</ContentControl>
</ScrollViewer>
</Grid>
Note if I fix the width of the datagrid everything in this XAML works. But I want the grid to expand as the user resizes the form containing the wizardcontainer.
You have the DataGrid wrapped in ScrollViewer. This, effectively, tells the DataGrid that it has infinite available width. Since the DataGrid is not constrained, it'll take as much width as it's columns desire.
You can set HorizontalScrollBarVisibility="Disabled"if that fits your design (i.e. you need only vertical scrolling from your ScrollViewer). This will disable scrolling horizontally and will constrain the DataGrid on the horizontal axis.
DataGrid has a ScrollViewer in it's ControlTemplate. As a broad general rule: try avoiding a ScrollViewer-in-a-ScrollViewer situations. It's (almost) always a headache to debug and eventually you'll have to set something as a fixed size (or calculate the size on the fly).