I can't center the shadow provided by <toolkit:ElevatedView> around the contained object. By default the shadow falls to the lower right corner. I've tried shifting with margins as well as RenderTransform, but can't find a good way to move the shadow.
What I have:
<toolkit:ElevatedView x:Name="Shadow1" Elevation="25" ShadowColor="Gray" CornerRadius="20" Background="Transparent">
<Grid>
<Grid.RenderTransform>
<TranslateTransform X="20" Y="20"/>
</Grid.RenderTransform>
...stuff
</Grid>
</toolkit:ElevatedView>
This kind of works but screws up the grid corner radius because it is being shifted beyond its max width. Is there a way to simply move the shadow location instead of trying to shift the content inside the shadow?
As of Uno Platform 3.11, the ElevatedView Control does not support changing the orientation of the shadow, only the elevation.
You may want to open an enhancement request on the Uno Platform GitHub repository.
Related
Either I'm going crazy or borders with a corner radius do not render correctly in UWP. Take this extremely simple example:
<Border CornerRadius="6" BorderBrush="Blue" BorderThickness="1">
<Rectangle Fill="Black" />
</Border>
And see how the rectangle extends slightly beyond border:
This happens in the designer in the visual studio and when the app is running.
It only seems to happen when there is a borderthickness >0 on the border.
Any idea why this happens?
If you are looking to apply corner radius to rectangle. Its better to use RadiusX and RadiusY properties of rectangle. Using like this will not cause any issues in rendering.
<Rectangle Width="100" RadiusX="10" RadiusY="10" Height="60" Stroke="Red" StrokeThickness="2" Fill="Black" > </Rectangle>
I managed to find a rather annoying solution by just using two borders. One with the correct border radius and style, and a second border within in for fine tuning the corners that kept clipping through.
I noticed the issues were mostly in the upper left and right corners and it was fixed by altering the corner radius of the inner border and padding of the outer border.
Source: https://stackoverflow.com/a/61468325
I am trying to get a RichEditBox to take over the entire width of the app window and to be responsive to window resizing, so far the code I have is the following:
<RichEditBox HorizontalAlignment="Stretch"
TextWrapping="WrapWholeWords"
Height="250"
Name="Intro"/>
What I am getting from the code above is this:
Any ideas on how can I get this to work? Why is it that I tell the text to wrap and it doesn't follow?
UPDATE
I also tried this:
<RichEditBox HorizontalAlignment="Stretch"
Height="250"
Name="Intro"/>
But the result is:
The problem that I am having is that it seems that HorizontalAlignment="Stretch" does not really do anything. The only way I am able to set a decent width is by hard-coding it, for example: Width="600". But if I do this my UI will not respond correctly to resizing. I also tried HorizontalContentAlingment="Stretch" but the result is exactly the same.
How can I get my RichEditBox take up all the available Width and Wrap at the same time?
If you look at the documentation of RichEditBox.TextWrapping, you'll notice that WrapWholeWords is invalid. You have to use
<RichEditBox TextWrapping="Wrap"/>
-or-
<RichEditBox TextWrapping="NoWrap"/>
Since Wrap is the default value, you can drop the property.
<RichEditBox HorizontalAlignment="Stretch"
Height="250"
Name="Intro"/>
Edit: in reply to the updated question:
A control only takes the width of it's parent control. Some container controls (e.g. Grid) automatically take the full width available, while others (e.g. StackPanel) only take the required size of it's children. Using HorizontalAlignment="Stretch" in combination with a StackPanel as a parent control, will only use the MinWidth property instead of the full available width on your screen. Sometimes you can't directly see this issue, e.g. when your control is inside an itemtemplate of a ListView. Use the Live Visual Tree in Visual Studio to find the parent containers and locate the issue.
So in short: make sure your RichEditBox is inside a Grid (or similar control) instead of a StackPanel.
I'm trying to port my WP8 app to WP8.1 by creating a new Universal app.
One thing that really drives me crazy is the new scaling behaviours of WP on higher resolution screens.
I just want my XAML to scale up (so everything becomes bigger). Just like it did on WP8. I've tried to do this with a Viewbox but that didn't work out very well either (weird margins all over the place :S).
How do I achieve this?
Kind regards,
Niels
I'm also making use of Viewboxes and had problems with weird margins but setting the Stretch property of the Viewbox to Fill solved it:
<Viewbox Stretch="Fill">
<Grid Height="1280" Width="768">
<Grid> ... </Grid>
</Grid>
</Viewbox>
Hope this helps!
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.
I have layout as described below:
<ScrollViewer>
<StackPanel Orientation="Horizontal">
<!-- ... -->
<ScrollViewer>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel ScrollViewer.VerticalScrollBarVisibility="Visible" Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ScrollViewer>
<!-- ... -->
</StackPanel>
</ScrollViewer>
And I would like to achieve that effect that is present in weather app.
In my application, when you're scrolling horizontaly using mouse wheel, when pointer gets over ItemsControl it immediately starts scrolling verticaly wheras in weather application there's fluent horizontal scrolling effect and scrolling verticaly begins when there's some time hover that vertical collection.
Is that behaviour somewhere implemented by default?.
Szymon
Generally, the guideline is that introducing vertical scrolling in a horizontally scrolling repeater is a bad idea. I think you should NOT consider Weather (or any standard Windows 8 app) as a model to emulate. Most of them violate the guidelines in some of the worst ways.
The Weather app accomplishes what you are asking based on the current mouse placement, the motion of the grid, and control with focus. That's a complex way of saying, some developer dreamed up a solution to help make their UI as confusing to the user as possible.
Please, don't.
What I think they do in order to achieve that effect is this:
If the mouse is over the vertical list for a while, they deactivate the horizontal scroll and activate the vertical one. Once the mouse moved outside the list, they switch back (deactivate the vertical scroll and activate the horizontal scroll).
I have not tested this to see if this works, but I think it should.