I’m working on a WP8.1 runtime app (using the universal app template).
I’ve created an appbar with a togglebutton. The button icon is a PathIcon.
in designtime (both Blend and VS2013) the button looks exactly what I expect it to look like but at runtime the path stretches out so it fills the circle of the button.
is this difference between designtime and runtime a known issue and is there a workaround so that my button looks how it’s supposed to look at runtime?
It looks good on every resolution in Blend so it's not a scaling issue
designtime:
runtime:
the XAML for the button:
<Page.BottomAppBar>
<CommandBar>
<AppBarToggleButton Label="HQ">
<AppBarToggleButton.Icon>
<PathIcon HorizontalAlignment="Left"
VerticalAlignment="Top"
Data="M21.0007,6.25 C6.3752,1.125 5.25043,16.6091 5.62518,19.5 C5.9215,21.7858 6.25018,10.75 16.0005,12.875 C19.8337,13.7104 24.1247,19.3755 20.3747,23.0006 C20.1689,23.1995 18.7133,17.0212 13.6254,19.5002 C8.75026,21.8755 13.0958,28.4331 12.8234,28.4006 C5.88184,27.5722 0.5,21.6646 0.5,14.5 C0.5,6.76801 6.76801,0.5 14.5,0.5 C19.153,0.5 23.0847,2.9988 25.2497,6.50016 C25.7361,7.28663 25.9271,7.98672 26.2501,8.87522 C26.75,10.2503 22.9202,6.92261 21.0007,6.25 z" />
</AppBarToggleButton.Icon>
</AppBarToggleButton>
</CommandBar>
I did not test with a PathIcon, but you can just a Path just fine:
<CommandBar>
<AppBarToggleButton Label="HQ">
<Path VerticalAlignment="Center" HorizontalAlignment="Center"
Fill="White" Stroke="White"
Data="M21.0007,6.25 C6.3752,1.125 5.25043,16.6091 5.62518,19.5 C5.9215,21.7858 6.25018,10.75 16.0005,12.875 C19.8337,13.7104 24.1247,19.3755 20.3747,23.0006 C20.1689,23.1995 18.7133,17.0212 13.6254,19.5002 C8.75026,21.8755 13.0958,28.4331 12.8234,28.4006 C5.88184,27.5722 0.5,21.6646 0.5,14.5 C0.5,6.76801 6.76801,0.5 14.5,0.5 C19.153,0.5 23.0847,2.9988 25.2497,6.50016 C25.7361,7.28663 25.9271,7.98672 26.2501,8.87522 C26.75,10.2503 22.9202,6.92261 21.0007,6.25 z" />
</AppBarToggleButton>
</CommandBar>
Related
I Installed CarouselView.FormsPlugin 6.0.0 on PCL Project
It's Working Fine on Android But When I Use On Ios facing Frame height not cover fully on CarouselView ItemTemplate
Code:-
<StackLayout>
<RefreshView>
<CollectionView x:Name="CollView">
<CollectionView.ItemTemplate>
<DataTemplate>
<cv:CarouselViewControl HeightRequest="110" AnimateTransition="False" ShowIndicators="True" Position="0" InfiniteScrolling="True" InterPageSpacing="20" VerticalOptions="Fill" HorizontalOptions="FillAndExpand" IsSwipeEnabled="True" AutoplayInterval="5" IndicatorsTintColor="#E5E5E5" ItemsSource="{Binding HomeDisplayOffers}" HorizontalIndicatorsPosition="Bottom">
<cv:CarouselViewControl.ItemTemplate >
<DataTemplate >
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Frame Padding="0" HeightRequest="110" "HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<!--- Binding Source Code --->
</Frame>
</StackLayout
</DataTemplate >
</cv:CarouselViewControl.ItemTemplate>
</cv:CarouselViewControl>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</RefreshView>
</StackLayout>
pls Check the Attached Screenshot.. Some Frame Coverup and Some Frame Getting Space on Bottom
That has nothing to do with the control and everything to do with your XAML code, Giving it a static height is going to obviously do this, options that you have are quite simple to be honest get a container that covers the whole frame like Absolute or Grid
<AbsoluteLayout>
<cv:CarouselViewControl AnimateTransition="False" ShowIndicators="True" Position="0" InfiniteScrolling="True" InterPageSpacing="20" AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All" VerticalOptions="Fill" HorizontalOptions="FillAndExpand" IsSwipeEnabled="True" AutoplayInterval="5" IndicatorsTintColor="#E5E5E5" ItemsSource="{Binding HomeDisplayOffers}" HorizontalIndicatorsPosition="Bottom">
<cv:CarouselViewControl.ItemTemplate >
<DataTemplate >
<Frame Padding="0">
<!--- Binding Source Code --->
</Frame>
</StackLayout
</DataTemplate >
</cv:CarouselViewControl.ItemTemplate>
</cv:CarouselViewControl>
</AbsoluteLayout>
I'm working on a Xamarin.Forms.Shell app containing 4 tabs. I would like to display a common Title containing a centered SVG logo on all these pages.
For this, I can use a TitleView like this:
<Shell.TitleView>
<ffimageloadingsvg:SvgCachedImage Source="resource://ShellAppSample.Resources.logoTitle.svg"
DownsampleHeight="6"
HeightRequest="45"/>
</Shell.TitleView>
This works and the logo is well centered in the NavigationBar. However, if the page contains ToolbarItems, the logo is no longer centered.
For example, on a page I've a ToolBarItem like this:
<ContentPage.ToolbarItems>
<ToolbarItem Text="Refresh"
Order="Primary"
Priority="0"
Command="{Binding RefreshCommand}"
CommandParameter="{x:Reference webView}">
<ToolbarItem.IconImageSource>
<FontImageSource Glyph="{StaticResource FalIconRefresh}"
FontFamily="FontAwesomeLight"
Size="Medium"/>
</ToolbarItem.IconImageSource>
</ToolbarItem>
</ContentPage.ToolbarItems>
Is there another way to display a centered Image from a SVG as Title, by using CustomRenderer or calculating the size of the ToolbarItems?
I've seen that a similar question has already been posted 1 year ago, but without any solution...
I've already tried to redraw the ToolbarItem in the TitleView like this:
<Shell.TitleView>
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
BackgroundColor="Transparent">
<ffimageloadingsvg:SvgCachedImage Source="resource://ShellAppSample.Resources.blackLogoTitle.svg"
DownsampleHeight="6"
HorizontalOptions="CenterAndExpand"
HeightRequest="45"
BackgroundColor="Transparent"/>
<Image HorizontalOptions="End" VerticalOptions="CenterAndExpand"
BackgroundColor="Transparent">
<Image.Source>
<FontImageSource Glyph="{StaticResource FalIconRefresh}"
FontFamily="FontAwesomeLight"
Size="Medium"/>
</Image.Source>
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding RefreshCommand}" CommandParameter="{x:Reference webView}"/>
</Image.GestureRecognizers>
</Image>
</Grid>
</Shell.TitleView>
On iOS it's correct, but I can see that:
the logo is not exactly centered like on the pages that don't contain any ToolBarItem, as there is a small gap when I switch between the pages
the icon is not positioned like when I use a ToolBarItem
On Android, the result it's not correct: the logo hasn't the same height, and the icon is out of the TitleView.
Finally I've managed my TitleViews like this:
For the Image:
<Shell.TitleView >
<Image Source="resource://ShellAppSample.Resources.logo.jpg"
VerticalOptions="CenterAndExpand" HorizontalOptions="Center"
Margin="{OnPlatform Android='0,0,16,0', Default=0}"/>
</Shell.TitleView>
For the Label:
<Shell.TitleView>
<Label Text="{Binding Title}"
VerticalOptions="CenterAndExpand" HorizontalOptions="Center"
Margin="{OnPlatform Android='0,0,16,0', Default=0}"/>
</Shell.TitleView>
And for Label with one "medium" size ToolBarItem:
<Shell.TitleView>
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Title}"
Grid.Column="1"
VerticalOptions="CenterAndExpand" HorizontalOptions="Center"
Margin="{OnPlatform Android='0,0,16,0', Default=0}"/>
</Grid>
</Shell.TitleView>
<ContentPage.ToolbarItems>
<ToolbarItem Text="Refresh"
Order="Primary"
Priority="1"
Command="{Binding RefreshCommand}">
<ToolbarItem.IconImageSource>
<FontImageSource Glyph="{StaticResource FalIconRefresh}"
FontFamily="FontAwesomeLight"
Size="Medium"/>
</ToolbarItem.IconImageSource>
</ToolbarItem>
</ContentPage.ToolbarItems>
I've checked the alignment through the DebugRainbows package and it looked fine on iOS/Android, on small/large devices.
It's not perfect, and I need to update rules if I add other ToolBarItems but it worked like this.
Simple app that just displays a list of images. The list of images must keep there aspect ratio, but be full window width + a bit of margin. The hard part is making the images additionally have rounded corners.
Ideas?
Only success I have had is with ImageBrush, but any control using that doesn't keep the aspect ratio. For example, here you must set the height and width.
<Rectangle RadiusX="10" RadiusY="10" Stretch="Fill" Width="100" Height="100" >
<Rectangle.Fill>
<ImageBrush ImageSource="{Binding}"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
full source here: http://1drv.ms/1HlZHVe
I got nicely rounded corners on my images (in my UWP app) by using an ImageBrush, however be careful if you do this programmatically - the first time I did I managed to use my memory rather poorly and consumed too much (poor coding).
I was using the ImageBrush much as you seem to be, but I wasn't getting any distortion of the aspect ratio; make sure you're setting properties like Stretch appropriately - e.g. Stretch.UniformToFill.
<Rectangle x:Name="rctCardFace" Margin="0" RadiusX="20" RadiusY="20" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Rectangle.Fill>
<ImageBrush Stretch="UniformToFill"/>
</Rectangle.Fill>
</Rectangle>
Or in C#
Uri path = new Uri(_ActiveStyle.BackgroundImagePath, UriKind.Absolute);
BitmapImage bitmapImage = new BitmapImage(path);
if (_AppReference.CardManager.TempImgBrush == null)
{
_AppReference.CardManager.TempImgBrush = new ImageBrush();
}
_AppReference.CardManager.TempImgBrush.ImageSource = bitmapImage;
_AppReference.CardManager.TempImgBrush.Stretch = _ActiveStyle.BackgroundImageStretch;
_AppReference.CardManager.TempImgBrush.AlignmentX = _ActiveStyle.BackgroundImageAlignX;
_AppReference.CardManager.TempImgBrush.AlignmentY = _ActiveStyle.BackgroundImageAlignY;
cfPreview.ImgB = _AppReference.CardManager.TempImgBrush;
Hi you can use the following code to create a rounded corner image in UWP:
<Ellipse Width="250" Height="250">
<Ellipse.Fill>
<ImageBrush ImageSource="ms-appx:///highfive.jpg" />
</Ellipse.Fill>
</Ellipse>
I have a control that I create hundreds of times during the application.
I have noticed that my app freezes because in the Initializecomponent function,
there is
System.Windows.Application.LoadComponent(this, new System.Uri("/fa;component/Controls/Common/Popup/PopupItem.xaml", System.UriKind.Relative));
if I comment this out, the application runs smoothly (of course without the control rendered).
How can I avoid/increase performance so the XAML won't be loaded each time, but somehow to recycle the control??
for (int i = 5; i < colValues.Count; i++)
{
if (colValues[i].Count == "1")
continue;
PopupItem pi = new PopupItem(colValues[i], false, this, FilterCategorySearch.PopupContent);
FilterCategorySearch.PopupContent.spItemsContainer.Children.Add(pi);
}
and the XAML is
<UserControl x:Class="FacetedSearch.Controls.Common.Popup.PopupItem"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:FacetedSearch.Controls.Common"
mc:Ignorable="d">
<UserControl.Resources>
<SolidColorBrush x:Key="TextNormalBrush" Color="#FF656565"/>
<SolidColorBrush x:Key="TextHoverBrush" Color="#FFA39F9F"/>
</UserControl.Resources>
<StackPanel MouseEnter="LayoutRoot_MouseEnter" MouseLeave="LayoutRoot_MouseLeave" Orientation="Horizontal" Margin="0,4,0,0">
<local:CTLCheckBox x:Name="cbFilter" MouseLeftButtonUp="cbFilter_MouseLeftButtonUp" Cursor="Hand" Height="14" Width="10" Margin="4,0" />
<TextBlock x:Name="tbFilterName" Foreground="{StaticResource TextNormalBrush}" MouseLeftButtonUp="tbFilterName_MouseLeftButtonUp" TextWrapping="Wrap" FontFamily="Arial" Margin="0,0,4,0" Cursor="Hand"/>
<TextBlock x:Name="tbFilterCount" TextWrapping="Wrap" Foreground="{StaticResource TextNormalBrush}" FontFamily="Arial"/>
</StackPanel>
thanks
The xaml for UserControls is parsed by Silverlight for every new instance of the UserControl. This means that if you add 100 instances of the same UserControl, the xaml will be read, parsed, instantiated as objects then visual objects 100 times.
You have 2 possibilities:
Access your UserControl from another location by referencing it from within a DataTemplate (used by means of, say, a ContentControl)
Rewrite your UserControl to be a "real" control (i.e. a sublass of Control or ContentControl)
A brief explanation about my app:
the application in which I'm working on is such a greeting cards designer. Imagine something in which there is a background image, and an indefinite number of "layers" (in particular, pictures) that stay over the background and can be moved, resized, moved front and back, etc...
It is also possibile to apply particular shapes to these layers, like a star, an ellipse, .. and after the card is made, it's possibile to save is to jpeg file.
The problem
Everything works correctly, but I detected that when a shape is applied to a layer, a memory leak is generated.
Here is the code of the UserControl of each layer:
<UserControl>
.....
<Grid x:Name="_myGrid" >
<Border x:Name="im_the_problem" BorderThickness="0" OpacityMask="{Binding Path=MyMask.Data, Converter={StaticResource MaskConverter}}">
<!-- My Image... -->
</Border>
</Grid>
</UserControl>
where MaskConverter code is the following:
public class MaskConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
String maskData = value as String;
if (maskData == null)
return null;
if (maskData == "")
return null;
VisualBrush vb = new VisualBrush();
vb.Visual = XamlReader.Parse(maskData) as Visual;
return vb;
}
public object ConvertBack(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
throw new NotSupportedException();
}
}
The Parameter "MyMask.Data" is a XAML Path (that is the shape that I'm applying) that I dinamically load from a textfile that contains different shapes.
So, the principle is that if I have the border named *im_the_problem*, the memory is NOT released. If I comment *im_the_problem* (so I'll just have rectangular layers/pictures without shapes) everything work like a charm, without memory leaks.
The problem should be in the OpacityMask + VisualBrush.
Am I doing something wrong?
Or is there a known problem? Is there a way to do the same (apply a shape to a picture..) in a different manner?
Thanks.
You might be able to try binding the MyMask.Data to an actual Path.Data, and setting the Path.Fill to an ImageBrush created from the image?
You need to freeze your VisualBrush ;)
I had this problem in a DataGrid's column template where I was using a <Canvas><Path /></Canvas> (as a static-resource) into a VisualBrush (also a static-resource) and using that as the OpacityMask for a Rectangle. Whenever the DataGrid was reloaded the Rectangle wouldn't release VisualBrush references to the OpacityMask, I used a memory-profiler tool to reveal that all the VisualBrush objects were using the bulk of memory.
I don't understand why or how this happened - but I'm glad I'm not alone (even if I had the same problem some 6.5 years later...).
My XAML was something like this:
<DataGrid.Resources>
<Canvas x:Key="icon" ...>
<Path ... />
</Canvas>
<VisualBrush x:Key="iconBrush" Stretch="Uniform" Visual="{StaticResource icon}" />
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Rectangle
Fill="{Binding Foreground, ElementName=myDataGrid}"
Width="14"
Height="14"
Margin="4"
Visibility="{Binding IconVisibility}"
OpacityMask="{StaticResource iconBrush}"
/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
...
</DataGrid.Columns>
I read that setting IsFrozen = true (done using this technique: https://www.codeproject.com/Tips/72221/Freeze-brushes-directly-in-the-XAML-to-improve-you ) would help memory issues with Brushes, however this seemingly had no effect at all. Weird.
I thought I'd experiment and I reasoned that if the issue was leaking the VisualBrush then I wondered if having it as a StaticResource was messing with object-references, so I changed it to an "owned" object, like so:
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Rectangle
Fill="{Binding Foreground, ElementName=myDataGrid}"
Width="14"
Height="14"
Margin="4"
Visibility="{Binding IconVisibility}"
>
<VisualBrush Stretch="Uniform" Visual="{StaticResource iconBrush}" />
</Rectangle>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
This fixed the issue! And I still don't know why - I wonder if it's a bug in WPF?
On a related note, I came to realise that using a VisualBrush was overkill as I'm rendering just a simple Path - VisualBrush is expensive because it renders an entire WPF view - I also learned from other documentation that Path itself isn't necessary for rendering simple shapes because itself is a complete UIElement and FrameworkElement - which are "heavier" types.
I changed my code to store the path in a PathGeometry value inside a GeometryDrawing static-resource which is loaded into a DrawingBrush:
<GeometryDrawing x:Key="iconDrawing" Brush="Black" Geometry="..." />
<Rectangle
Fill="{Binding Foreground, ElementName=myDataGrid}"
Width="14"
Height="14"
Margin="4"
Visibility="{Binding IconVisibility}"
OpacityMask="{StaticResource iconBrush}"
>
<DrawingBrush Stretch="Uniform" Drawing="{StaticResource iconDrawing}" />
</Rectangle>
Doing this also made a dent in memory usage, and hopefully, performance.
In your project I see you're not using the path information as a resource, but the same technique applies: load your path into a PathGeometry (or rather, StreamGeometry object, which is even faster and is meant for immutable geometry) and set that as the Drawing for a DrawingBrush.