LargeImageSource throws exception - ribbon-control

I am new to XAML and am trying to create a basic Ribbon. I have some code here:
<RibbonWindow x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:r="clr- namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
Title="MainWindow"
x:Name="RibbonWindow"
Width="640" Height="480">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Ribbon x:Name="Ribbon" Title="Ribbon Title">
<r:RibbonButton Width="100" Background="Azure" Height="100" >
</r:RibbonButton>
<r:RibbonButton x:Name="RibbonButton" Label="Button" LargeImageSource="Icons/disk.png">
</r:RibbonButton>
</Ribbon>
</Grid>
I am getting an exception on the LargeImageSource part of the code. I am not sure why. The image is rendering in the designer and no errors are generated when I build but I can't run the project.
Here is the exception:
An unhandled exception of type 'System.Windows.Markup.XamlParseException' occurred in PresentationFramework.dll
Additional information: 'Provide value on 'System.Windows.Baml2006.TypeConverterMarkupExtension' threw an exception.' Line number '19' and line position '51'.
If there is a handler for this exception, the program may be safely continued.
Any help would be appreciated.
Regards

It has stopped producing the error (for some reason). It had something to do with using a .png file although I don't know what. I played around with the attributes and got it to work.

Assuming "Icons/disk.png" is added to the solution explorer (right click on project -> Add -> New Folder, then right click on folder -> Add -> Existing Item... and select the image file), the item "disk.png" should have its properties set as follows:
Build Action : Content
Copy to Output Directory : Copy if newer

Related

CarouselView swiping is Buggy

I'm relatively new to Xamarin Forms. I'm trying to have a view that allows me to swipe left/right between different pages with a page indicator at the bottom. I'm using CarouselView, as suggested by the internet, and it seems to work. But, the selected page is very buggy. Sometimes, swiping to the next page causes it to snap back to the previous page. Sometimes, it stays on the current page. Sometimes, it works correctly. I observe the same behavior on both Android and UWP. Although, it appears to be a little worse in UWP than Android.
It seems the index for the current page is getting mixed up somehow. Here is my XAML:
<ContentPage.Content>
<StackLayout>
<CarouselView x:Name="Pages" IndicatorView="{x:Reference ActivePageIndicator}">
<CarouselView.ItemsSource>
<x:Array Type="{x:Type ContentView}">
<views:TroubleshootingPage />
<views:StatusPage />
<views:ContactInfoPage />
</x:Array>
</CarouselView.ItemsSource>
<CarouselView.ItemTemplate>
<DataTemplate>
<ContentView Content="{Binding .}" />
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView
x:Name="ActivePageIndicator"
IndicatorColor="LightGray"
SelectedIndicatorColor="Green"
IndicatorSize="16"
IndicatorsShape="Circle"
HorizontalOptions="Center"
Margin="4"
/>
</StackLayout>
</ContentPage.Content>
I've tried using different types of views in the ItemsSource list. But, I still get the same effect.
Is there something I'm doing wrong? Something I'm missing? A bug in CarouselView?
Thanks.

Specify design time binding context in a GridTemplateColumn

I'm working on a Xamarin.Forms project. In my xaml page, order to avoid "Cannot resolve property 'xxx'" warning, I've set a design-time data context.
In this page I have a SfDataGrid object.
In the following code snippet, the text property of the custom entry is binding to the Quantity field of a Part item. The Parts object is an ObservableCollection<Part>.
<xForms:SfDataGrid ItemsSource="{Binding Parts}" AutoGenerateColumns="false" Margin="0"
ScrollingMode="PixelLine"
HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<xForms:SfDataGrid.Columns>
<xForms:GridTextColumn MappingName="ProductName" HeaderText="Product"
HeaderTextAlignment="Start" ColumnSizer="Star"
TextAlignment="Start" Padding="5,0,5,0"/>
<!--#region Quantity column -->
<xForms:GridTemplateColumn MappingName="Quantity" HeaderText="Quantity"
HeaderTextAlignment="Center"
ColumnSizer="Auto" Padding="0" >
<xForms:GridTemplateColumn.CellTemplate>
<DataTemplate>
<controls:CustomEntry Text="{Binding Quantity, Mode=TwoWay,
Converter={StaticResource NullableDouble}}"
Keyboard="Numeric" HorizontalTextAlignment="Center"
VerticalOptions="End"/>
</DataTemplate>
</xForms:GridTemplateColumn.CellTemplate>
</xForms:GridTemplateColumn>
<!--#endregion -->
</xForms:SfDataGrid.Columns>
</xForms:SfDataGrid>
The warning is displayed under the Quantity word in Text={Binding Quantity, Mode...
What should I do to avoid the warning for the binding used in the cell templates?
Should I add a BindingContext="{d:DesignInstance models:Part}", or d:DataContext="{d:DesignInstance models:Part}" on each field ?
Hi Crusty Applesniffer,
Thanks for using Syncfusion Product.
We have checked your query with following details.
By using SfDataGrid have created the GridTemplateClolumn and added CustomEntry as DataTemplate in XAML page
Text property of this custom entry is binding to the double type
property named as OrderId
We have set this Text property binding
Mode as TwoWay, And we have written the converter for this property.
And we have added the Xaml
Complilation([XamlCompilation(XamlCompilationOptions.Compile)]) Tag in .cs of the XAML
class file.
But unfortunately, We are unable to reproduce the “Cannot resolve property 'xxx'" warning” from our side, So Kindly provide More details in order to reproduce the issue.
Have you enabled any Style Cop or FxCop rule set in your application
? If yes, Mention those rule set details.
Type of property you have used to bind the Custom Entry Text Property.
SfDataGrid product version that you are currently using.
If possible kindly provide us the Issue replicating sample or modify the attached sample to replicate the issue.
We have prepared the sample as per your requirement, Do check and let us know Is there anything needs to add more to reproduce “Cannot resolve property 'xxx'" warning” issue.
Sample Link : http://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGrid-1806700714
Regards,
Vigneshkumar R

Display png image xamarin.ios

I have a Xamarin.ios project running on Visual Studio for Imac.
I would like to display a png image file using XAML and C#. Would it be best to use a dependency service to construct the image object in C#?
code snippet:
<StackLayout Orientation="Horizontal">
<Image Name="MyImage" Width="180" />
</StackLayout>
I placed my png file in the assets.xcassents folder. The file name is picture.png. How would I get this code to display in the xaml? What would the
code look like. Thanks for your input.
In your case you can use the property Source of the Image tag in XAML. Than you are able to use the following code snippet:
<StackLayout Orientation="Horizontal">
<Image x:Name="MyImage" Source="picture.png" WidthRequest="180" />
</StackLayout>
And there was another issue in your XAML snippet, because the property Width is a readonly property for internal use by Xamarin.Forms. So if you want to specify the width of the image you must use the WidthRequest property.
Got the code working! Changed to BundleResouces and do not copy for the property on the image file. Also move image File to a separate folder.

Implementing UWP flyout splitview using masterdetailview in prism?

I am a complete noob to xamarin :)
So was wondering if someone could point me to right resources.
To be short, I want to implement something like this in prism using Xamarin MasterDetailPage.
Using the master detail sample here, the hamburger menu doesn't act as a fly out.
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="HelloWorld.Views.MyMasterDetail">
<MasterDetailPage.Master>
<ContentPage Title="Default">
<StackLayout>
<Button Text="ViewA" Command="{Binding NavigateCommand}" CommandParameter="MyNavigationPage/ViewA?id=A" />
<Button Text="ViewB" Command="{Binding NavigateCommand}" CommandParameter="MyNavigationPage/ViewB?id=B" />
<Button Text="ViewC" Command="{Binding NavigateCommand}" CommandParameter="MyNavigationPage/ViewC?id=C" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
</MasterDetailPage>
Right now, though there is enough space, it shows something like
(just as a sample, I am not using SplitViewMenu at all)
I need icons/some small text to show initially and on clicking hamburger, it should expand (you know just like the first link/ groove music app behavior).
Tips?
Right now, though there is enough space, it shows something like
In my experience, if you have assigned the Symbol property for SimpleNavMenuItem, the possible reason is you haven't imported the Themes file Generic.xaml under Themes folder
This file includes templates, styles for custom controls. For example, for NavMenuItem's template, FontIcon's Glyph property needs to be assigned correctly here:
<DataTemplate x:Key="NavMenuItemTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<FontIcon FontSize="16" Glyph="{Binding Path=SymbolAsChar}" VerticalAlignment="Center"
HorizontalAlignment="Center" ToolTipService.ToolTip="{Binding Path=Label}" />
<TextBlock Grid.Column="1" Text="{Binding Path=Label}" VerticalAlignment="Center" />
</Grid>
</DataTemplate>
While SimpleNavMenuItem class's SymbolAsChar property is based on Symbol's value:
public sealed class SimpleNavMenuItem : INavigationMenuItem
{
......
public Symbol Symbol { get; set; }
public char SymbolAsChar => (char) Symbol;
......
}
And if you still can make it work, please share a demo:)
I've sort of been looking for something like this myself since I can't hide the NavigationBar shown in the Master page of the MasterDetailPage when i run it on a Windows 10 Mobile device (I can hide for PC though). So basically, I'm looking into eventually building my own version of the MasterDetailPage.
Since I have not built it yet, I can't tell you exactly how to achieve what you're asking, but I do know that it will require you to either:
Write your own custom renderer for MasterDetailView or,
Write a new control and its renderer
In both cases, your renderer will involve creating and manipulating a new SplitView (which is the native UWP control that your SplitViewMenu example is extending). There's a tutorial for creating the actual UWP control here. If you havent learned about Xamarin's renderers yet, they are the "Translator" and "Interpreter" between a Xamarin.Forms control and a given platform's native control. I suspect Xamarin will eventually rewrite their MastDetailPage renderer for UWP to use a SplitView as a base, but who knows when that will be. Xamarin also has an open source SDK for Xamarin.Forms (as well as the others) on GitHub so you can study the MasterDetailPageRenderer for UWP.

In WPF, how do I bind in the DataGrid.RowDetailsTemplate?

I have a DataGrid which is bound to an ObservableCollection of a custom class. The collection is a property in a ViewModel, and the grid works fine, including with changes to the collection.
I want to use the RowDetailsTemplate to display two additional collections in a StackPannel, like so:
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<StackPanel Name="GrcidSP" Orientation="Horizontal">
<DataGrid Name="ClusterIndexGrid" AutoGenerateColumns="True"
ItemsSource="{Binding ClusterIndexColumns}"
CanUserAddRows="False" CanUserResizeRows="False"
Width="Auto"/>
<DataGrid Name="IndexGrid" AutoGenerateColumns="True"
ItemsSource="{Binding IndexColumns}"
CanUserAddRows="False" CanUserResizeRows="False"
Width="Auto"/>
</StackPanel>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
ClusterIndexColumns and IndexColumns, the binding sources of the inner grids, are also collections in the ViewModel.
Problem is, when i display the rowdetails, the datagrids are empty, i.e. not loaded at all, no columns or rows.
In a bid to understand what is going on, i replaced the inner datagrids with label:
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<StackPanel Name="GridSP" Orientation="Horizontal">
<Label Content="{Binding}" Width="Auto" Background="AliceBlue"/>
</StackPanel>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
and did not specify the binding source - {Binding}
The label now displays the name of the custom class which is in the collection that is the source of the outer grid.
So somehow, i need to navigate back to the ViewModel as the data context for the inner grids.
But how, pray tell?
OK, so I solved this by adding the ClusterIndexColumns and IndexColumns collections as properties to the custom class which is the displayed in the main grid. Now, when i click on the row, the rowdetails area is opened and the inner grids are loaded fine.
BTW, the collections are populated when the selected row changes in the main grid, by binding the SelectedIndex property to a property in the ViewModel, using
Mode=OneWayToSource
Hope this helps someone.

Resources