Can I make a custom gridviewitem independent of my collectionviewsource? - xaml

I have a CollectionViewSource that I use to populate my gridviewitems (black squares) and I was wondering if it would be possible to add a gridviewitem (red square) independent of my collectionviewsource. I can provide any additional info needed. Thank you for the help!
I don't have enought rep to post an image so here's a link to the image showing what I want to do:
Image
Edit - I'm doing this in the WinRT for Windows 8

Yoyu can use CompositeCollection to do this sort of thing
Here is a quick example of using a CompositeCollection
Xaml:
<Window x:Class="WpfApplication10.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="325" Width="422" Name="UI">
<Window.Resources>
<CollectionViewSource x:Key="myViewSource" Source="{Binding Items, ElementName=UI}" />
</Window.Resources>
<Grid DataContext="{Binding ElementName=UI}">
<ListView>
<ListView.ItemsSource>
<CompositeCollection>
<ListViewItem Content="Hello" />
<CollectionContainer Collection="{Binding Source={StaticResource myViewSource}}" />
</CompositeCollection>
</ListView.ItemsSource>
</ListView>
</Grid>
</Window>
Code:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
public IEnumerable<string> Items
{
get
{
yield return "Item1";
yield return "Item2";
yield return "Item3";
}
}
}
Result:

Related

UWP: Is there a upper limit that the instance of InkCanvas can be created?

In a UWP project, I put an InkCanvas in each ListViewItem. But when the items count exceed 126, I got an XamlParseException, which complained:
Cannot create instance of type 'Windows.UI.Xaml.Controls.InkCanvas'
Below is the naïve code snippets:
<Page x:Class="App9.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView ItemsSource="{x:Bind Items, Mode=OneWay}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<InkCanvas />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>
</Page>
code behind:
public sealed partial class MainPage : Page
{
public ObservableCollection<int> Items { get; }
public MainPage()
{
this.Items = new ObservableCollection<int>();
for (int i = 0; i < 130; i++)
{
this.Items.Add(i);
}
InitializeComponent();
}
}
(Please note: to test the upper limit, I've changed the default ItemsPanel of ListView)
These above code is pretty simple, so it seems nothing is wrong with the code. Could it be there is a upper limit one can create InkCanvas?
Edit:
I've tested to create the InkCanvas in code behind like this:
for (int i = 0; i < 130; i++)
{
this.lvw.Items.Add(new InkCanvas());
}
which I got a different runtime error:
System.OutOfMemoryException: 'Insufficient memory to continue the execution of the program.'
But by inspect Task Manager, I can see an app contains 100 instance of InkCanvas only take no more than 40mb memory. It is very confusing.

Create a component and reuse it in Windows phone 8.1

I want to create some components and reuse them in different pages, put more than one in a page, etc.
For example, I want to create a component that contains an image, some text, etc. The position of the elements are fixed, but I will change the image, the text... I mean, in a same page I want to put three circles with different image and text...
What is the best way to do it? I've found UserControl, but I'm unable to call a method from another page to change something.
This is my component XAML
<UserControl
x:Class="aa.Components.CircularGraph"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Components"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="300">
<Grid Name="view">
<Image Name="imageGraph" Source="../Assets/aa/circuloGris.png"
/>
<StackPanel Orientation="Vertical">
<TextBlock Name="firstLine" Text="1" FontFamily="Arial" FontSize="9"></TextBlock>
<TextBlock Name="secondLine" Text="2" FontFamily="Arial" FontSize="9"></TextBlock>
<TextBlock Name="thirdLine" Text="3" FontFamily="Arial" FontSize="9"></TextBlock>
</StackPanel>
</Grid>
</UserControl>
Its code:
public sealed partial class CircularGraph: UserControl {
public CircularGraph() {
this.InitializeComponent();
Height = 300;
Width = 400;
}
public void changeFirstLine(string var) {
firstLine.Text = var;
}
}
In other page I put:
<local:CircularGraph Name="circularGraph"/>
And I've tried to put this in .cs:
protected override void OnNavigatedTo(NavigationEventArgs e) {
circularGraph.changeFirstLine("aaa");
}
But I have an error: The name 'circularGraph' does not exits in the current context.
How can I do this?
Sorry if it's a simple question. I'm newbie at Windows phone.
Thank you very much!
Try x:Name instead of Name. "All x:Name means to XAML is generate a field to store the value in the code behind class."
<local:CircularGraph x:Name="circularGraph"/>
In WPF, what are the differences between the x:Name and Name attributes?

Binding to UserControl DependencyProperty does not work as expected

I have a header in each page of my Windows Phone 8 Silverlight app. To stop repeating myself I decided to create a simple UserControl witch holds a Grid and a TextBlock. The text of the TextBlock is binded to a DependencyProperty of the UserControl (TitleProperty). See the code at the end.
For the binding to the TitleProperty to work properly I needed to bind the DataContext of the UserControl to itself with the code: DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}".
This works properly when using the control in a page and setting a fixed value or a StaticBinding for the Title property. Ex.:
This works:
<uiuc:SubSectionHeader Title="My fixed title" />
This works to
<uiuc:SubSectionHeader Title="{Binding Source={StaticResource Literals}, Path=Literals.applicationSettings, FallbackValue='[Application Settings]'}" />
But when doing a normal bind it does not work. Ex
<uiuc:SubSectionHeader Title="{Binding Path=UserName'}" />
And that is because the UserControl is looking for the UserName property in its own DataContext (witch is itself), and not in the DataContext of the page.
Question 1 is: Should´t it resolve the binding before passing the value to the Title property?
Question 2: Is it just overwriting the binding in inside the UserControl?
Question 3: How to resolve it? Please don't say create a custom control instead because it sucks
<UserControl x:Class="UI.UserControls.SubSectionHeader"
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:converters="clr-namespace:UI.Converters"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="50"
d:DesignWidth="480"
DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}">
<UserControl.Resources>
<converters:StringCaseConverter x:Name="ToUppercase" />
<converters:BooleanToVisibilityConverter x:Key="BoolToVisibility" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot"
Height="50"
Background="{Binding Source={StaticResource ThemeSetter}, Path=BackgroundColor}">
<TextBlock VerticalAlignment="Center"
Margin="25 0 0 0"
Style="{StaticResource PhoneTextNormalStyle}"
Foreground="White"
Text="{Binding Path=Title, Mode=TwoWay, Converter={StaticResource ToUppercase}, ConverterParameter='upper', FallbackValue='[SUB SECTION TITLE]'}" />
</Grid>
</UserControl>
Code behind:
using System.Windows;
using System.Windows.Controls;
namespace UI.UserControls {
public partial class SubSectionHeader : UserControl {
public SubSectionHeader() {
InitializeComponent();
}
public string Title {
get { return (string)GetValue( TitleProperty ); }
set { SetValue( TitleProperty, value ); }
}
public static readonly DependencyProperty TitleProperty = DependencyProperty.Register(
"Title",
typeof( string ),
typeof( SubSectionHeader ),
new PropertyMetadata( "[SubSection Title]" )
);
}
}
Have you tried setting the DataContext of your UserControl in the code behind? (You would remove the setter in the xaml)
public partial class SubSectionHeader : UserControl {
public SubSectionHeader() {
InitializeComponent();
DataContext = this;
}
Edit: Try setting the design instance of your control inside the xaml. (Leave the code behind statement as well)
<UserControl
x:Class="MyControl
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"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400"
d:DataContext="{d:DesignInstance}">

Is it possible to show default image before original load from server?

I want to show default image (some thing like brand icon) before original image is loaded from server. It is possible with out writing much code. Because I want same behavior in whole app.
or we need to create custom control for that. Please guide me!
If you are going to reuse it at a lot of different place it's probably easier to just create a CustomControl.
Here is a small user control which should do that:
<UserControl x:Class="PhoneApp1.ImageWithLoading"
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"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480"
x:Name="myImageWithLoading">
<Grid x:Name="LayoutRoot" >
<Image x:Name="temporaryImage" Source="/Assets/Loading"/>
<Image Source="{Binding Source,ElementName=myImageWithLoading}" ImageOpened="RemoteImage_OnLoaded"/>
</Grid>
</UserControl>
public partial class ImageWithLoading : UserControl
{
public static readonly DependencyProperty SourceProperty =
DependencyProperty.Register("Source", typeof (ImageSource), typeof (ImageWithLoading), new PropertyMetadata(default(ImageSource)));
public ImageSource Source
{
get { return (ImageSource) GetValue(SourceProperty); }
set { SetValue(SourceProperty, value); }
}
public ImageWithLoading()
{
InitializeComponent();
}
private void RemoteImage_OnLoaded(object sender, RoutedEventArgs e)
{
temporaryImage.Visibility = Visibility.Collapsed;
}
}
Another option might be to create a default style for Images in your default style page like so
<Style TargetType="Image">
<Setter Property="Source" Value="/Assets/Load.jpg"/>
</Style>
and just set the source when the image is ready

Two UserControls, one binds, one doesn't

I have two very simple UserControls in a simple WinRT demo project. No Viewmodel--mostly just colored boxes for layout exploration. The first UserControl I created works fine. The second, very similar one, won't bind to any properties--it shows up as blank.
The first UserControl looks like this:
<UserControl
x:Class="Demo.SmallStartTile"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Demo"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Name="SmallStartTileUC"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid x:Name="SmallTileGrid"
Margin="0,0,8,8"
Background="{Binding Background, ElementName=SmallStartTileUC}"
>
<Rectangle
Stroke="{Binding BorderBrush, ElementName=SmallStartTileUC}"
Grid.RowSpan="2"
/>
<TextBlock x:Name="SmallTileTitle"
Text="{Binding TileText, ElementName=SmallStartTileUC}"
Style="{StaticResource SmallTileHeader}"/>
<Path x:Name="IconPath"
Style="{StaticResource SmallTileIcon}"
Data="{Binding TileIconPathData, ElementName=SmallStartTileUC}" />
</Grid>
</UserControl>
namespace Demo
{
public sealed partial class SmallStartTile : UserControl
{
public static DependencyProperty TileTextProperty = DependencyProperty.Register("TileText", typeof(string), typeof(SmallStartTile), new PropertyMetadata("tile content"));
public string TileText
{
get { return (string)GetValue(TileTextProperty); }
set { SetValue(TileTextProperty, value); }
}
public static DependencyProperty TileIconPathDataProperty = DependencyProperty.Register("TileIconPathData", typeof(string), typeof(SmallStartTile), new PropertyMetadata("F0"));
public string TileIconPathData
{
get { return (string)GetValue(TileIconPathDataProperty); }
set { SetValue(TileIconPathDataProperty, value); }
}
public SmallStartTile()
{
this.InitializeComponent();
}
}
}
And the second one, which I made just like the first one by clicking Add New Item and picking UserControl in Blend:
<UserControl
x:Class="Demo.SmallMediaTile"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Demo"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Name="SmallMediaTileUC"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid
Margin="0,0,8,8"
Background="{Binding Background, ElementName=SmallMediaTileUC}"
>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle
Stroke="{Binding BorderBrush, ElementName=SmallMediaTileUC}"
Grid.RowSpan="2"
/>
<Viewbox
Margin="30"
Child="{Binding Content, ElementName=SmallMediaTileUC}">
</Viewbox>
<TextBlock
Grid.Row="1"
Text="{Binding SourceText, ElementName=SmallMediaTileUC}"
Style="{StaticResource SmallMusicTileHeader}"/>
</Grid>
</UserControl>
namespace Demo
{
public sealed partial class SmallMediaTile : UserControl
{
public static DependencyProperty SourceTextProperty = DependencyProperty.Register("SourceText", typeof(string), typeof(SmallMediaTile), new PropertyMetadata("source"));
public string SourceText
{
get { return (string)GetValue(SourceTextProperty); }
set { SetValue(SourceTextProperty, value); }
}
public SmallMediaTile()
{
this.InitializeComponent();
}
}
}
I use the UserControl in the main Page like this:
<local:SmallMediaTile x:Name="Source1Tile"
Grid.Column="0" Grid.Row="0"
SourceText="Radio"
Background="Blue"
BorderBrush="Red">
<local:SmallMediaTile.Content>
<Canvas x:Name="radio_icon" Height="68" Width="34">
<Path Data="F1M299.6182,396.2988C299.6182,389.7208,297.0722,383.5548,292.4572,378.8398L288.6162,382.6758C292.2022,386.3718,294.1842,391.1778,294.1842,396.2988C294.1842,401.4238,292.2022,406.2368,288.6162,409.9328L292.4572,413.7738C297.0722,409.0538,299.6182,402.8808,299.6182,396.2988" Fill="White" Height="34.934" Canvas.Left="0" Stretch="Fill" Canvas.Top="16.501" Width="11.002"/>
<Path Data="F1M311.1738,396.2988C311.1738,386.6278,307.4348,377.5528,300.6788,370.6208L296.8258,374.4618C302.5658,380.3698,305.7398,388.0798,305.7398,396.2988C305.7398,404.5218,302.5658,412.2298,296.8258,418.1428L300.6788,421.9898C307.4348,415.0498,311.1738,405.9718,311.1738,396.2988" Fill="White" Height="51.369" Canvas.Left="8.21" Stretch="Fill" Canvas.Top="8.282" Width="14.348"/>
<Path Data="F1M322.7578,396.2988C322.7578,383.5298,317.8508,371.5348,308.9638,362.3388L305.1168,366.1748C312.9758,374.3538,317.3338,384.9778,317.3338,396.2988C317.3338,407.6208,312.9758,418.2488,305.1168,426.4268L308.9638,430.2748C317.8508,421.0698,322.7578,409.0798,322.7578,396.2988" Fill="White" Height="67.936" Canvas.Left="16.501" Stretch="Fill" Canvas.Top="0" Width="17.641"/>
</Canvas>
</local:SmallMediaTile.Content>
</local:SmallMediaTile>
The first one picks up all the properties and displays like I expect, but the second one only picks up the Viewbox content. I've looked through SO and been googling but can't figure out what the problem is. Sorry if this is longwinded.
Your root Grid is set as the Content of the UserControl while the Viewbox you have is trying to bind its Child property to the Content of the UserControl that is its ascendant. That is not allowed since the root Grid is already a parent of the UserControl and XAML controls can only exist in one place in the UI.
As noted, the problem is the UserControl's content can only be set once. When I bind the Viewbox Content to the UserControl content, the existing XAML is replaced. So, a blank box but for what I'm passing in. I guess to do what I had hoped, I'd need to make a custom control. Thanks for the help!