Develop Reference

Calculated Binding in net maui

is there an easy way to use a calculated property in a view?
I need to give a left padding proportional to an actual width of a grid, or the width of a column.
For example if I tilt the phone the grid gets wider and I want to update the padding.
This seems to work, but I want to calculate a value from the width, for example width/50:
<Label Text="Seg"
Style="{StaticResource subTitleLightTextStyle}"
Grid.Row="1"
Padding="{Binding Source={x:Reference bodyCalendar},
Path=Width}"
Grid.Column="1" />

WPF Bitmap transparent background turns black

I have a listbox with Items that all have a random background color.
In each Item of the listbox i want to display a Bitmap picture.
Now for some reason the background of each bitmap (which I've set to Color.Transparent) Shows up black.
Here a picture of how it looks
My code for the listbox:
<WrapPanel Grid.Row="1" Grid.Column="1" Margin="6" >
<ListBox x:Name="CharListBox" BorderThickness="0" ScrollViewer.VerticalScrollBarVisibility="Hidden"
ItemsSource="{Binding ListToDisplay, UpdateSourceTrigger=PropertyChanged}"
ItemTemplate="{DynamicResource ItemTemplate1}"
SelectionChanged="SelectionChangedNewCharSelected">
</ListBox>
</WrapPanel>
The item template (I removed everything beside the image part for bettter overview):
<DataTemplate x:Key="ItemTemplate1" >
<Image Source="{Binding OutfitImageSource, UpdateSourceTrigger=PropertyChanged}" Height="40" Width="40" />
</DataTemplate>
The Binding binds to a BitmapSource.
Is it possible that bitmaps dont have actual transparency, its just shown as black?
I also tried to add AllowsTransparency="True" to the window properties, this just lead to the window crashing instantly..
Thank you for helping in advance!
update: AllowsTransparency works if i set WindowStyle="None" but it still does not fix the problem with the untransparent bitmaps.

As reported in this answer
Bitmaps (i.e. files with .BMP extension) do not natively support transparency: you need to save as a different format like PNG.
You can find the same info also here.
So it does not depend on your XAML or your code. Just save your bitmaps as PNG files and then use those files for your application.

Pins on a map like UI

Sorry if the title isn't very clear, but I didn't know how to describe exactly what I'm looking for.
So what I've got is a very large image in a scrollviewer:
<ScrollViewer x:Name="scrollView" ZoomMode="Enabled" HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" MinZoomFactor="1" ViewChanged="scrollView_ViewChanged">
<Grid Width="{Binding Path=ViewportWidth, ElementName=scrollView}">
<Image x:Name="img" Source="The Known World.jpg" Stretch="UniformToFill"/>
</Grid>
</ScrollViewer>
And I want to place pin like UI elements that will stick to a location on a map, but will not scale along with the scrollviewer. Like the name of towns on Google Maps. I've tried various things, such as having:
<Scrollviewer>
<Grid Width="{Binding Path=ScrollableWidth, ElementName=scrollView}"
Height="{Binding Path=ScrollableHeight, ElementName=scrollView}">
<!--Pins here-->
</Grid>
<Scrollviewer>
But nothing that behaves as expected. What can I do to get this behavior?

It's a really interesting and tricky question at the same time.
I would approach it with a Canvas which I can use to properly place my pins on top of the image and ensure that their locations will remain fixed regardless of the scroll viewer position.
The tricky part comes when you say you want the pins to not scale with the scroll viewer. The only idea I have there is you can try to track the zoom scale on the scroll viewer, and apply an inverse of that to the pins (so if at scroll Viewer ZoomScale of 1, you have a scale of 1 on your pins, at ZoomScale = 2, you have PinScale = 1/2)
Not sure that would work, but it's worth a try.

Here's a solution I found, inspired by Alex Drenea's answer:
<ScrollViewer x:Name="scrollView" ZoomMode="Enabled" HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" MinZoomFactor="1" ViewChanged="scrollView_ViewChanged" ViewChanging="scrollView_ViewChanging" Visibility="Visible">
<Viewbox x:Name="vb" Height="{Binding Path=ViewportHeight, ElementName=scrollView}">
<Grid>
<Image x:Name="img" Stretch="UniformToFill" Source="The Known World.jpg"/>
<local:PinPoint Text="Hardhome" MinZoom="0.9" Size="{Binding ElementName=scrollView, Path=ExtentHeight, Converter={StaticResource conv},ConverterParameter=scrollView}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="2825,261,0,0"/>
</Grid>
</Viewbox>
</ScrollViewer>
MinZoom is a property on my custom UserControl that controls the ScaleTransform.
And this is the converter:
public class ViewBoxConstantFontSizeConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
return 100 / (double)value * 20;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}

Interesting :)
My idea is ... put a pin layer over the scroll viewer.
<Grid>
<ScrollViewer x:name="imageSv" >
</ScrollViewer>
<Canvas x:name="pinCanvas" />
</Grid>
You may know the "image-based" xy position of the pin. And, when the user scroll or zoom in/out the scroll viewer, you can get the xy offset and zoom ratio. Then, you can calculate the overlayed xy position of the pin, and draw it on pinCanvas.
Advantage of this idea is - you can avoid the pin scaling process.

Scrolling problems when using ScaleTransform in Panorama/Pivot/RadSlideView item

I'm trying to implement zoom-functionality in a RadSlideView ItemTemplate. I'm doing this by using a ViewportControl with a Canvas and then applying a RenderTransform (ScaleTransform) to a StackPanel in the Canvas. Similar to the SDK-sample found here.
The problem I have is that the ScaleTransform seems to be affecting the swipe-gesture used to change item in the SlideView/Panorama/Pivot control. E.g. if the ScaleTransform is set to 0.1 it seems like I only need to swipe 1/10th of the length to change item compared to using a ScaleTransform of 1.0.
I found that if I set IsHitTestVisible to false on the ItemTemplate the swiping works like I want. But this is not a solution since I sometimes need to be able to pan the content vertically while still being able to change item by swiping horizontally.
So my question is how can I solve this?
For reference the XAML looks like this:
<Controls:RadSlideView Name="SlideView" ItemsSource="{Binding Pages}" IsLoopingEnabled="False" SelectionChanged="RadSlideView_SelectionChanged" CacheMode="BitmapCache" ManipulationStarted="SlideView_ManipulationStarted" ManipulationCompleted="SlideView_ManipulationCompleted" ManipulationDelta="SlideView_ManipulationDelta">
<Controls:RadSlideView.ItemTemplate>
<DataTemplate>
<ViewportControl x:Name="SlideViewViewport" ViewportChanged="SlideViewViewport_ViewportChanged" Loaded="SlideViewViewport_Loaded">
<Canvas>
<StackPanel>
<Image Source="{Binding Image}" Stretch="Fill" Width="{Binding ElementName=SlideView, Path=DataContext.PageWidth}" Height="{Binding ElementName=SlideView, Path=DataContext.PageHeight}" CacheMode="BitmapCache"/>
<StackPanel.RenderTransform>
<ScaleTransform x:Name="xform"/>
</StackPanel.RenderTransform>
</StackPanel>
</Canvas>
</ViewportControl>
</DataTemplate>
</Controls:RadSlideView.ItemTemplate>
I have also looked at Teleriks RadPanAndZoom-control to avoid implementing my own zoom-functionality, but since I sometimes need to place two pictures side by side and zoom them as if they were one I don't think I can use it.

The problem is that ScaleTransformation scales your picture, but doesn't change it's height and width. Only if Height And Width are overflowing scrollviewer you can scroll the content

How do I get a ScrollViewer with a Rectangle inside to stop scrolling when it reaches the end of the rectangle?

I have created a Rectangle inside of a ScrollViewer like this
<ScrollViewer ManipulationMode="Control" x:Name="songScrollViewer" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" Height="270" VerticalAlignment="Center" Width="728" Canvas.Top="20" d:LayoutOverrides="HorizontalMargin" >
<Rectangle x:Name="musicBG" Fill="#FF0692FD"/>
</ScrollViewer>
During the use of the app, the size of MusicBg changes, sometimes to something around 3,000 pixels width.
musicBG.Width = _songLength*PixelsPerSecond
However, while scrolling the scrollViewer, it allows me to scroll the rectangle all the way off the screen.
For example this line of code gives me the following values when I have moved the rectangle as far as I want to move it.
if (songScrollViewer.HorizontalOffset > songScrollViewer.ScrollableWidth)
HorizontalOffset has a value of ~1200 and ScrollableWidth has a value of about ~2900.
How can I get this to be done properly so that the rectangle is not scrolled completely off the screen?
I would expect a HorizontalOffset of about 1200 to only push the rectangle about halfway through to it's destination, and not make it start going off screen.
ANSWER:
After much frustration, I was able to solve this problem by using Canvas instead of Border or Rectangle.
I'll award points if anyone can explain why this problem happened, and if there is a less processor intensive control that would work better than canvas.
Edit: Screen shots:
Bad Code:
<ScrollViewer ManipulationMode="Control" x:Name="songScrollViewer" Width="720" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" Height="270" VerticalAlignment="Top" Canvas.Top="20" HorizontalAlignment="Left" >
<Border x:Name="musicBG" Background="#FF0692FD" VerticalAlignment="Top" HorizontalAlignment="Left" Height="270" />
</ScrollViewer>
Image of bad scroll with bad code:
Good working code:
<ScrollViewer ManipulationMode="Control" x:Name="songScrollViewer" Width="720" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" Height="270" VerticalAlignment="Top" Canvas.Top="20" HorizontalAlignment="Left" >
<Canvas x:Name="musicBG" Background ="#FF0692FD" Height="270" >
<Border Background="#FF0692FD" VerticalAlignment="Top" HorizontalAlignment="Left" Height="270" />
</Canvas>
</ScrollViewer>
Good Scroll: Notice it says 170 seconds on the bottom right instead of the smaller number of 118 seconds in the bad scroll.

I believe your right, wp7 won't render shapes that are bigger then 2048 pixels. So the reason it's scrolling of the page is because it's treating it as if it were bigger then 2048 but you can only see up to a width of 2048px and its just scrolling over to the "ghost" part of the rectangle.
I'm not sure if you can override this but the best solution I could come up with (without overriding) is by splitting up your rectangle into chucks that are smaller then 2000 (just to be safe) and then displaying them seamlessly in a horizontal stack panel inside the scroll viewer. The problem with this is that depending on how you've coded it, this solution might be hard to implement; but you might just be able to split it in your ViewModel when displaying it and your logic would only see it as one big chunk.