Who to set Mode="Minimized" in WP8.1 WINRT for a BottomAppBar?
The equivalent of Mode="Minimized" for ApplicationBar is ClosedDisplayMode="Minimal" for BottomAppBar
<Page.BottomAppBar>
<CommandBar ClosedDisplayMode="Minimal">
...
</CommandBar>
</Page.BottomAppBar>
The property is on the Commandbar, ClosedDisplayMode:
<Page.BottomAppBar>
<CommandBar ClosedDisplayMode="Minimal">
<CommandBar.PrimaryCommands>
</CommandBar.PrimaryCommands>
<CommandBar.SecondaryCommands>
</CommandBar.SecondaryCommands>
</CommandBar>
</Page.BottomAppBar>
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 am using a Material Card on my Uno based app. It works great- except I am trying to add a Pathicon for MediaContent and am having trouble getting it to work. I tried overriding the Image source in the template- but that did not work- I may not have done that right. Essentially I want a Pathicon where the .png or jpg would go. Any suggestions on how to accomplish this would be appreciated.
<material:Card HeaderContent="Outlined card"
SubHeaderContent="With title and subtitle only"
MediaContent=""
Style="{StaticResource MaterialOutlinedCardStyle}"
PointerExited="eventPageClick">
<material:Card.HeaderContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Margin="16,14,16,0"
Style="{ThemeResource MaterialHeadline6}" />
</DataTemplate>
</material:Card.HeaderContentTemplate>
<material:Card.SubHeaderContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Margin="16,0,16,14"
Style="{ThemeResource MaterialBody2}" />
</DataTemplate>
</material:Card.SubHeaderContentTemplate>
<material:Card.MediaContentTemplate>
<DataTemplate>
<Image Source="{Binding}"
Stretch="Uniform"
MaxHeight="194" />
</DataTemplate>
</material:Card.MediaContentTemplate>
</material:Card>
Great question!
Using the MediaContentTemplate, you should be able to place anything that you want in the DataTemplate, including PathIcons. Only thing is that the MediaContentTemplate will only be loaded if the MediaContent property is not null or an empty string. So I would do something like setting the the Path Data string to MediaContent and then use a Binding in the MediaContentTemplate to the PathIcon's Data property, like so:
<material:Card HeaderContent="Outlined card"
SubHeaderContent="With title and subtitle only"
MediaContent="PASTE PATH DATA HERE"
Style="{StaticResource MaterialOutlinedCardStyle}"
PointerExited="eventPageClick">
<controls:Card.MediaContentTemplate>
<DataTemplate>
<PathIcon Data="{Binding}"/>
</DataTemplate>
</controls:Card.MediaContentTemplate>
...
</material:Card>
Thank you sbilogan! You gave me the key to getting it working. They key was the text cant be empty for Media Content. It turns out I can put any text there and then add the Pathicon like below and that works. Thank you so much for your help!
<material:Card HeaderContent="Outlined card3"
SubHeaderContent="With title and subtitle only"
Style="{StaticResource MaterialOutlinedCardStyle}"
MediaContent="Example"
PointerExited="eventPageClick">
<material:Card.HeaderContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Margin="16,14,16,0"
Style="{ThemeResource MaterialHeadline6}" />
</DataTemplate>
</material:Card.HeaderContentTemplate>
<material:Card.SubHeaderContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Margin="16,0,16,14"
Style="{ThemeResource MaterialBody2}" />
</DataTemplate>
</material:Card.SubHeaderContentTemplate>
<material:Card.MediaContentTemplate>
<DataTemplate>
<PathIcon HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10" Data="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</DataTemplate>
</material:Card.MediaContentTemplate>
</material:Card>
I've got a Flyout view with a TextBlock in it. The text block has more than one line's amount of text and I'd like it to wrap to the next line like it usually does, but when used in a Flyout it scrolls off the screen... How do you disable the scroll view in a Flyout?
Flyout XAML:
...
<AppBarButton.Flyout>
<Flyout Placement="Full">
<local:MyView/>
</Flyout>
</AppBarButton.Flyout>
...
My View XAML:
<UserControl ...>
<Grid>
...
<TextBlock Text="Loading..." Style="{ThemeResource SubtitleTextBlockStyle}" Margin="10,0,10,20" Grid.Row="1" TextWrapping="Wrap"/>
</Grid>
</UserControl>
It comes out like this:
To set properties of Flyout like width or scrollbar's visibility, we need to customize the style of FlyoutPresenter. Here is how I do it:
<Flyout Placement="Full" >
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"></Setter>
</Style>
</Flyout.FlyoutPresenterStyle>
<Grid>
<TextBlock Text="This is an informational flyout. Click outside to dismiss.xxxjfdalisfsadpfuaspdfoia" Grid.Row="1" TextWrapping="Wrap"/>
</Grid>
</Flyout>
Directly copy the into your Flyout element will meet your requirement.
You can
1) make a maxwidth to your flyout
or
2) try this :
<Flyout Placement="full" >
<Grid ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
........
</Grid>
</Flyout>
best of luck !
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>
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.