Adding Usercontrol within another usercontrol to occupy the whole space - silverlight-4.0

My usercontrol that i add programmatically doesn't show up.
This is my MainPage.xaml :-
<UserControl x:Class="ScrollingEffect.MainPage"
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">
<Canvas x:Name="LayoutRoot" Background="White">
<Canvas x:Name="content" Height="Auto" Width="Auto"/>
<Canvas Width="Auto">
<StackPanel Height="27" Width="1400" Background="#B2000000"/>
</Canvas>
</Canvas>
</UserControl>
This is my MainPage.xaml.cs :-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace ScrollingEffect
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
RedBack objRedBack = new RedBack();
content.Children.Add(objRedBack);
}
}
}
This is my RedBack.xaml :-
<UserControl
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" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
x:Class="ScrollingEffect.RedBack"
d:DesignWidth="640" d:DesignHeight="480">
<Canvas x:Name="LayoutRoot">
<Canvas.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.078"/>
<GradientStop Color="Red" Offset="1"/>
</LinearGradientBrush>
</Canvas.Background>
</Canvas>
</UserControl>

Try Using Grid as your main layout container in RedBack.xaml and then place canvas with-in the Grid.

Related

Contentcontrol not updating Text

I have a View that contains a lot of input parameters. Each parameter consists of a label (name of the parameter) a textbox for its value and another label for its units (eg. kNm).
The Control displays in a horizontal Stackpanel.
When changing the Text (ToWay Binding) of the Textbox the underlying Property (eg. DesignLife) does not update anymore, since I switched from straight WPF (OnPropertyChanged) to MVVM Light (RaisePropertyChanged).
Here are some relevant pieces of code:
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace xxxx.Views.CustomControls
{
public class InputParameter : ContentControl
{
static InputParameter()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(InputParameter), new FrameworkPropertyMetadata(typeof(InputParameter)));
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
}
// some properties left out
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register("Text", typeof(string), typeof(InputParameter));
public string Text
{
get => (string)GetValue(TextProperty);
set => SetValue(TextProperty, value);
}
}
}
<UserControl
x:Class="xxxx.Views.MainUserControls.Column"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:cc="clr-namespace:xxxx.Views.CustomControls"
xmlns:cf="clr-namespace:xxxx.Model.Config"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:tt="clr-namespace:xxxx.Properties"
DataContext="{Binding Main.Calc, Source={StaticResource Locator}}"
mc:Ignorable="d">
<GroupBox Margin="3">
<StackPanel Orientation="Vertical">
<!-- Stuff left out -->
<cc:InputParameter
NameContent="Design life"
Text="{Binding DesignLife, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True, StringFormat=N0}"
UnitContent="years" />
<!-- Stuff left out -->
</StackPanel>
</GroupBox>
</UserControl>
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:cc="clr-namespace:CoCa.Views.CustomControls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Style x:Key="InputParm" TargetType="{x:Type cc:InputParameter}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type cc:InputParameter}">
<StackPanel Style="{StaticResource SPanel}">
<Label
x:Name="PART_NameLabel"
Width="130"
HorizontalContentAlignment="Left"
Content="{TemplateBinding NameContent}"
Foreground="{TemplateBinding Foreground}"
Style="{StaticResource LabelStyle1}"
ToolTip="{TemplateBinding ToolTip}" />
<TextBox
x:Name="PART_TextBox"
Width="70"
Background="{TemplateBinding TbBackground}"
Foreground="{TemplateBinding Foreground}"
Style="{StaticResource Tb}"
Text="{TemplateBinding Property=Text}" />
<Label
x:Name="PART_UnitLabel"
Content="{TemplateBinding UnitContent}"
Foreground="{Binding ElementName=PART_NameLabel, Path=Foreground}"
Style="{StaticResource Unit}" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
private int _designLife;
public int DesignLife
{
get => _designLife;
set
{
Set<int>(() => DesignLife, ref _designLife, value, true);
}
}
I suspect that RaisePropertyChanged does not get called because it is not used anywhere in the class InputParameter's Text DependencyProperty. (Maybe under the hood it does?)
Questions:
1: Is the way I made InputParameter the way to go?
2: Is my suspicion correct?
3 a: If so, How do I get RaisePropertyChanged called?
b: If not: what could be the problem?

UWP set ImageSource from SplitView

I have a litte SplitView app an now I will set the ImageSource on page2 from mySplitpanel.
How can I get access to all paramaters like SetSource or Visible?
Here is my code
Mainpage.xaml
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Width="938.137">
<SplitView x:Name="MySplitView" DisplayMode="CompactOverlay" IsPaneOpen="False"
CompactPaneLength="50" OpenPaneLength="150">
<SplitView.Pane>
<StackPanel Background="Gray">
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>
<StackPanel Orientation="Horizontal">
<Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Click="MenuButton1_Click"/>
<TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Click="MenuButton2_Click"/>
<TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Click="MenuButton3_Click"/>
<TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
</StackPanel>
</SplitView.Pane>
<Frame x:Name="myFrame" />
</SplitView>
</Page>
Mainpage.xaml.cs
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
namespace App1
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
myFrame.Navigate(typeof(Page1));
}
private void MenuButton1_Click(object sender, RoutedEventArgs e)
{
myFrame.Navigate(typeof(Page2));
}
private void HamburgerButton_Click(object sender, RoutedEventArgs e)
{
MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
}
private void MenuButton2_Click(object sender, RoutedEventArgs e)
{
myFrame.Navigate(typeof(Page1)); //Home
}
private void MenuButton3_Click(object sender, RoutedEventArgs e)
{
//set image source at page2.myImagePage2
// ??
}
}
}
Page2.xaml
<Page
x:Class="App1.Page2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="#FFE03535">
<Image x:Name="myImagePage2" HorizontalAlignment="Left" Height="116" Margin="81,112,0,0" VerticalAlignment="Top" Width="175" Source="Assets/LockScreenLogo.png"/>
</Grid>
</Page>
I want to change the ImageSource at Page2.myImagePage2 from MenuButton3_Click
How can I access a function inside page2?
The function sets the Visibilty of items on Page2.
Can I access the function and the items get invisible?
You can use the code-behind of Page2 (Page2.xaml.cs) to create a public method that will modify the visibility (like public void HideImage() or public void ChangeImageSource()).
Now to get hold of the current page within the Click handler, use the Frame.Content property:
private void MenuButton3_Click(object sender, RoutedEventArgs e)
{
var page = myFrame.Content as Page2;
if ( page != null )
{
//do something like calling your custom public method
//page.HideImage();
}
}

How to create a main layout template in XAML

I'm new to windows development. I'm making a simple windows app which has a few pages and each page has a similar layout in XAML. Like this:
Each page is separated into 3 sections. A will have a title, B is where the content will be inserted and C is for other stuff. My question is: what is the simplest way to build a general layout template so that I can reuse it for every page? And is it possible?
For example, I have a MainTemplate.xaml file with this layout:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
</Grid>
And then my Page1.xaml will load MainTemplate so I don't have to copy and paste the same layout into every page of mine. I've tried looking online but the solutions are going way over my head. I was wondering if there's a simple way to do this like with webpages.Thanks a lot.
One feasible way to do this is using UserControl with ContentPresenter. For example:
Add a UserControl named MainTemplate. In the XAML, set the layout with ContentPresenter and bind it to the DependencyProperty defined in code-behind.
<UserControl x:Class="UWPTest.MainTemplate"
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:local="using:UWPTest"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="300"
d:DesignWidth="400"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<ContentPresenter Content="{x:Bind Title}" />
<ContentPresenter Grid.Row="1" Content="{x:Bind Main}" />
<ContentPresenter Grid.Row="2" Content="{x:Bind Stuff}" />
</Grid>
</UserControl>
In the code-behind, set the DependencyProperty so that we can use them to set the content in other pages.
public sealed partial class MainTemplate : UserControl
{
public MainTemplate()
{
this.InitializeComponent();
}
public static readonly DependencyProperty TitleProperty = DependencyProperty.Register("Title", typeof(object), typeof(MainTemplate), new PropertyMetadata(null));
public object Title
{
get { return GetValue(TitleProperty); }
set { SetValue(TitleProperty, value); }
}
public static readonly DependencyProperty MainProperty = DependencyProperty.Register("Main", typeof(object), typeof(MainTemplate), new PropertyMetadata(null));
public object Main
{
get { return GetValue(MainProperty); }
set { SetValue(MainProperty, value); }
}
public static readonly DependencyProperty StuffProperty = DependencyProperty.Register("Stuff", typeof(object), typeof(MainTemplate), new PropertyMetadata(null));
public object Stuff
{
get { return GetValue(StuffProperty); }
set { SetValue(StuffProperty, value); }
}
}
After this, we can use the UserControl in other pages to reuse the general layout. For example, using it in "MainPage.xaml":
<Page x:Class="UWPTest.MainPage"
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:local="using:UWPTest"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<local:MainTemplate>
<local:MainTemplate.Title>
<Grid Background="Red">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="60">A</TextBlock>
</Grid>
</local:MainTemplate.Title>
<local:MainTemplate.Main>
<Grid Background="Green">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="60">B</TextBlock>
</Grid>
</local:MainTemplate.Main>
<local:MainTemplate.Stuff>
<Grid Background="Yellow">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="60">C</TextBlock>
</Grid>
</local:MainTemplate.Stuff>
</local:MainTemplate>
</Page>
Then the "MainPage" will look like follwoing:

XamlParseException when trying to bind subclass Loaded event handler

I am having these same problems in my Windows Phone Project:
XamlParseException when adding event handler in XAML
http://social.msdn.microsoft.com/Forums/vstudio/en-US/7624b2fc-0dea-415f-a71d-1739020d9d2e/xamlparseexception-when-trying-to-bind-subclass-loaded-event-handler?forum=wpf
However, it seems like my handler does have the correct signature?
Even stranger, I did the same thing with the UIElement_Tap event, in another page and it works fine.
MainPage.xaml
<v:PageBase
x:Class="PhoneApp1.Views.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:v="clr-namespace:PhoneApp1.Views"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ItemsControl Grid.Row="0"
Loaded="ItemsControl_Loaded"
Margin="0,0,0,120">
<TextBlock Text="Item1"/>
<TextBlock Text="Item2"/>
<TextBlock Text="Item3"/>
</ItemsControl>
<ItemsControl Grid.Row="1"
Loaded="ItemsControl_Loaded"
Margin="0,120,0,0">
<TextBlock Text="Item1"/>
<TextBlock Text="Item2"/>
<TextBlock Text="Item3"/>
<TextBlock Text="Item4"/>
</ItemsControl>
</Grid>
</v:PageBase>
MainPage.xaml.cs
namespace PhoneApp1.Views
{
public partial class MainPage : PageBase
{
// Constructor
public MainPage()
{
InitializeComponent();
}
}
}
PageBase.cs
using Microsoft.Phone.Controls;
namespace PhoneApp1.Views
{
// Common code across pages.
public class PageBase : PhoneApplicationPage
{
protected virtual void ItemsControl_Loaded(object sender, System.Windows.RoutedEventArgs e )
{
//...
}
}
}
I know I could override the method and call the base type in my MainPage, but that defeats the purpose of having a common base, no?
This is how I ended up fixing this:
Gave the itemscontrol a name and wired up the event in the MainPage constructor:
itemControl1.Loaded += base.ItemsControl_Loaded;
Try to replace System.Windows.RoutedEventArgs with EventArgs

Placing PopUp, which is inside a Itemscontrol

I've got an itemscontrol, in which all my elements are PopUps. The problem is I do not know how to place them compared to the grid in which the itemscontrol is placed. I've tried using horizontal- and vertical alignment but this does not help. The xaml code I've got so far is:
<Grid>
<ItemsControl Grid.Row="1" VerticalContentAlignment="Top" HorizontalAlignment="Left" ItemsSource="{Binding PopUp}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ViewModel:PopUpTemplateSelector.EndTurnMenuTemplate>
<DataTemplate>
<Popup IsOpen="{Binding PU.IsOpen}" HorizontalAlignment="Left" VerticalAlignment="Top">
<Design:InGame_NextTurn_UserControl/>
</Popup>
</DataTemplate>
</ViewModel:PopUpTemplateSelector.EndTurnMenuTemplate>
</ViewModel:PopUpTemplateSelector>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
I would suggest maybe using the following overlay method instead.
From this Nokia page:
Overlay XMAL:
<UserControl x:Class="WindowsPhoneSample7.OverLay"
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}"
d:DesignHeight="800" d:DesignWidth="480">
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="400"/>
<RowDefinition Height="400"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="1">
<ProgressBar IsIndeterminate="True" Foreground="Orange" Height="50" Width="480" VerticalAlignment="Center"/>
<TextBlock Text="Wait" Foreground="Orange" HorizontalAlignment="Center"/>
</StackPanel>
</Grid>
</UserControl>
Overlay code-behind:
public OverLay()
{
InitializeComponent();
this.LayoutRoot.Height = Application.Current.Host.Content.ActualHeight;
this.LayoutRoot.Width = Application.Current.Host.Content.ActualWidth;
SystemTray.IsVisible = false; //to hide system tray
}
MainPage code-behind:
public partial class MainPage : PhoneApplicationPage
{
private Popup popup;
// Constructor
public MainPage()
{
InitializeComponent();
this.popup = new Popup();
}
private void BtnStart_Click(object sender, RoutedEventArgs e)
{
this.LayoutRoot.Opacity = 0.2;
OverLay ovr = new OverLay();
this.popup.Child = ovr;
this.popup.IsOpen = true;
BackgroundWorker worker = new BackgroundWorker();
worker.DoWork += (s, a) =>
{
Thread.Sleep(5000);
};
worker.RunWorkerCompleted += (s, a) =>
{
popup.IsOpen = false;
this.LayoutRoot.Opacity = 1.0;
};
worker.RunWorkerAsync();
}
protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
{
this.popup.IsOpen = false;
}
}