Silverlight 4 Canvas.Left binding without canvas per item - data-binding

I'm getting some performance issues with this code, where mousing over the canvas area is laggy if i leave in the canvases within the data template, but no lag if I take them out (but obviously the Canvas.Left bindings don't work so the ellipses are in the wrong place!) Is there a way to position these items without each one needing its own canvas?
<Canvas>
<ItemsControl ItemsSource="{Binding Path=SpatialData.TrainEvents.ArrDepEllipseOfLines}" Name="ctrlChartTrainEventsArrDep" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas>
<Ellipse Width="{Binding EventShape.Width}" Height="{Binding EventShape.Height}" Stroke="{Binding Path=Stroke}" StrokeThickness="{Binding StrokeThickness}" Fill="{Binding Path=Fill}" Canvas.Left="{Binding CanvasPlacement.X}" Canvas.Top="{Binding CanvasPlacement.Y}" />
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Canvas>
Thanks very much,
Becky

Yes, you can remove the canvas in your ellipse. I think you'll find that your values for CanvasPlacement.X don't increment properly per ellipse and the effect your seeing is the fact that each element in your ItemsControl is actually placed in a StackPanel (the default behaviour and can be changed via the ItemsPanel property) which is then laying these out for you - most likely in a horizontal line.

Related

[iOS]; How to leave space for top and bottom status bar

I found that hiding the status bar (at least on latest iPhones) does not make much sense since the space on top is partially consumed e.g. by the camera.
Similar issue at the bottom: there is a 'swipe bar' where some space should be left for.
Hence my question: what's the correct way to leave the right amount of space for the status bar on top of the iPhone screen and the 'swipe bar' at the bottom of an iPhone screen?
Thanks in advance
Indeed, making sure that app content isn't obscured by the 'notch' or the bottom swipe area on current-generation iPhones (and some newer Android devices as well) is an important consideration.
Uno Platform handles this using the VisibleBoundsPadding behavior. You can attach this behavior to any compatible container (eg a Panel or Border) and the content of the container will be padded such that stays within the 'safe' area of the screen.
In general you should place all 'content' in your application (eg text, images, interactive elements) within the VisibleBoundsPadding area, but some visual elements eg a full-screen backdrop might go outside of it.
You can place VisibleBoundsPadding anywhere you wish in your app (including multiple locations), though generally it makes sense to place it on or near a root element. It will adjust automatically to rotations and other layout updates.
Here's a simple example:
<Page x:Class="UnoTestbed20.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UnoTestbed20"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkit="using:Uno.UI.Toolkit"
mc:Ignorable="d">
<Grid Background="LightBlue" toolkit:VisibleBoundsPadding.PaddingMask="All">
<Border Background="LightYellow">
<TextBlock Text="Hello, world!"
Margin="20"
FontSize="30" />
</Border>
</Grid>
</Page>
And the resulting display on an iPhone 11:

Resizing Activity Indicator in Xamarin Forms

I am trying to resize an ActivityIndicator (in Xamarin.Forms), but the Scale property does not work and the HeightRequest just crops the ActivityIndicator.
<StackLayout>
<ActivityIndicator HorizontalOptions="Center" VerticalOptions="StartAndExpand" HeightRequest="20" IsRunning="True" />
</StackLayout>
This is the result.
Any suggestions on what I might be doing wrong?
It seems sizing itself is not supported on the ActivityIndicator. In this case, scaling is your friend.
The cutting-off you see happening is because the ActivityIndicator is inside a StackLayout. Because of how a StackLayout works, it will only take up the space it needs. Since scaling doesn't necessarily make your ActivityIndicator bigger, you have two options:
Replace your StackLayout with a Grid
Give your ActivityIndicator a WidthRequest and HeightRequest that is big enough to keep your scaled ActivityIndicator
Note: Talking about iOS here. Width and height seem to work on Android
Remove HeightRequest="20", it blocks your scale property.
Code should look like this
<ActivityIndicator HorizontalOptions="Center" VerticalOptions="StartAndExpand" Scale="2" IsRunning="True" />
Now, you can scale to whatever size you want.

Some Frames in Listview have sharp edges and some are round (Xamarin forms)

Some Frames in Listview have sharp edges and some are round (Xamarin forms)
I have a Xamarin forms app with a list view. The horizontal row has a couple different frames (boxes with text).
The issue is some of the frames have sharp edges and others are rounded. I can't see any pattern (size of text, etc).
I tried updating the padding but it did not have any effect on this issue.
What could cause the border/edges to be different?
How can I explicitly set them?
I am testing in the Android Simulator at the moment if it matters.
Wrap your box views within a frame so that all the boxviews will have the rounded corners.
<Frame OutlineColor="Black" HasShadow="False" Padding="0" VerticalOptions="FillAndExpand">
<BoxView x:Name="boxViewSeparator" HeightRequest="15" WidthRequest="10000" BackgroundColor="Green" />
</Frame>
I had to move the listview around some.
I would like to explicitly set this property (borders).
Example of straight edges
Straight and round
Round in the middle

how to change the margin of a button on xamarin forms?

i have a issues with default margin of a button on xamarin forms. i need to take off the margin. some thought how i can make this ?? i need to use custom renderer?
I really need this to join two elements without leaving space, a label and a button.
i already try with
<Button
BackgroundColor="Fuchsia"
BorderRadius="0"
BorderWidth="0"
Text="Test"
HeightRequest="50"
WidthRequest="60"
TextColor="#333333"
x:Name="btnBack"
Margin="0"
VerticalOptions="Start"
HorizontalOptions="Start" />
but this not work for me, nothing happened.
other guys says that making a custom renderer maybe will work.
What are you using to lay out the label and the button? If StackLayout you may need to set the StackLayout Spacing property to 0 to remove the gap between the label and the button. If Grid look at RowSpacing and ColumnSpacing properties.
If you want to change margins dynamically, you would write something like this in C#
button.margin = new thickness(0,0,0,0);
This would make the margins of the button 0.
You would potentially do this for all elements with a thickness to change that issue.

Why WPF turns my blue and red image into a blurred into purple

I noticed that if I include an Image element in my WPF application, the image comes out blurry on the screen. To test this, I reduced my program to the bare minimum and created a test image. I tried this in an out-of-browser Silverlight application and in a regular WPF application. I targeted .NET 4 and 4.5. See the same result in all cases.
Test Image
3 pixels wide by 3 pixels high. The middle pixel is red. All others pixels are blue. You can also see it at http://imageshack.com/a/img538/5335/GM4B8I.png
XAML
The entire XAML page is shown below. I added an empty Label above the image and to the left of the image to move it away from the edge of the window.
<Page x:Class="Demo.Home"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="486" d:DesignWidth="864"
Title="Demo">
<StackPanel Background="white" Orientation="Vertical">
<Label FontSize="10" Content=" "/>
<StackPanel Orientation="Horizontal">
<Label FontSize="10" Content=" "/>
<Image Source="/Demo;component/test.png
HorizontalAlignment="Left" VerticalAlignment="Top"
Stretch="None" />
</StackPanel>
</StackPanel>
RESULT:
The 3x3 image is blurred into a 4x4 image. Instead of original blue and red pixels, the pixels are different shades of purple. http://imageshack.com/a/img661/3707/TFdtnF.png
What is causing the blurring? How can I avoid it?
Try adding
RenderOptions.BitmapScalingMode="HighQuality"
to the image.
The blurring results from WPF using sub-pixel precision to calculate position for the Image. The three-pixel image ends up being rendered at non-integer pixel positions, so WPF spreads it over 4 device pixels.
Attempting to fix this using SnapsToDevicePixels did not work. WPF ignores SnapsToDevicePixels for images.
Here is a solution that works http://blogs.msdn.com/b/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx

Resources