My view looks like
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter"/>
</Window.Resources>
<DockPanel>
<TabControl Grid.Row="0" Grid.Column="0" >
<TabItem Header="TabItem1">
<Grid x:Name="Grid1" Background="LightBlue" Visibility="{Binding Grid1Visiblity, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}}" IsVisibleChanged="Grid1_OnIsVisibleChanged"/>
</TabItem>
<TabItem Header="TabItem2" >
<Grid Background="LightCyan" >
</Grid>
</TabItem>
</TabControl>
</DockPanel>
and the code behind looks like
public MainWindow()
{
InitializeComponent();
DataContext = this;
Grid1Visiblity = true;
}
private Boolean grid1Visiblity;
public Boolean Grid1Visiblity
{
get { return grid1Visiblity; }
set
{
grid1Visiblity = value;
OnPropertyChanged("Grid1Visiblity");
}
}
Now why is it that when I switch from TabItem1 to TabItem2 that I do not see Visiblity setter namely Grid1Visbility set?
I see that visibility changes when I use the IsVisibilityChanged event handler, from the MSDN docs the IsVisibilityChanged event is triggered only when visibility changes, so why does the binding does not work in my case.
Related
Firstly I see the type for Header and content for the expander, it says the type is object. I have a user control with name CommonExpanderUserControl as follows,
xaml:
<uwpControls:Expander Header="{Binding HeaderContent}" Content="{Binding MainContent}">
</uwpControls:Expander>
In xaml.cs (DataContext is set to this)
public static readonly DependencyProperty HeaderContentProperty =
DependencyProperty.Register("HeaderContent", typeof(object), typeof(CommonExpanderUserControl), new
PropertyMetadata(null));
public object HeaderContent
{
get { return (object)GetValue(HeaderContentProperty); }
set { SetValue(HeaderContentProperty, value); }
}
public static readonly DependencyProperty MainContentProperty =
DependencyProperty.Register("MainContent", typeof(ContentControl), typeof(CommonExpanderUserControl), new
PropertyMetadata(null));
public ContentControl MainContent
{
get { return (ContentControl)GetValue(MainContentProperty); }
set { SetValue(MainContentProperty, value); }
}
Now I am using this UserControl somewhere outside as follows,
<UserControl.Resources>
<ContentControl x:Key="Header">
<Grid x:Name="ExpanderHeaderGrid" HorizontalAlignment="Stretch" Padding="0" Margin="0"
Background="{Binding LisSharedSettings.ChangeHeaderColor,Converter={StaticResource BoolToSolidBrushConverter}}">
<TextBlock x:Name="TextBlockLisSharedSettingsTitle"
x:Uid="/Application.GlobalizationLibrary/Resources/InstrumentSettingsViewLisSettingsTextBlockTitle"
Style="{StaticResource TextBlockStyleSectionHeader}"/>
</Grid>
</ContentControl>
<ContentControl x:Key="Body">
Some content here.
</ContentControl>
</UserControl.Resources>
<Grid>
<local:CommonExpanderUserControl HeaderContent="{StaticResource Header}" MainContent="{StaticResource Body}"/>
</Grid>
Binding Content control like that simply doesn't work. If I remove the MainContent binding and bind only the Header, it says object reference not set to an instance of an object. Please help.
The problem occurs StaticResource binding, we could not bind header with control by StaticResource. And for the scenario the better way is bind HeaderTemplate and send the data source to the header property like the following.
<UserControl.Resources>
<DataTemplate x:Key="HeaderTemplate">
<Grid
x:Name="ExpanderHeaderGrid"
Margin="0"
Padding="0"
HorizontalAlignment="Stretch"
Background="Red"
>
<TextBlock x:Name="TextBlockLisSharedSettingsTitle" Text="{Binding}" />
</Grid>
</DataTemplate>
</UserControl.Resources>
<Grid>
<uwpControls:Expander Header="hello" HeaderTemplate="{StaticResource HeaderTemplate}" />
</Grid>
I started to use MVVMLight framework recently.
When I use ContentPresenter to swtich between ViewModel, it seems like it initialize the datacontext when it first displays.
However, I want it to initialize it's datacontext so it can keep track of any change from the initial loading of the application, or at least share the data with other viewmodel(I assume maybe I can use dataservice to keep track of all the data, but I could not find a right example to use it with contentpresenter & MVVMLight).
Below is the sample code I made. When I click Review button, "usercontrolview" will display "Picture Saved", however "contentpresenterview" will display "No Picture".
Sample Image
MainView.xaml
<Grid>
<Button x:Name="CaptureButton" Content="Capture" HorizontalAlignment="Left" Margin="34,10,0,0" VerticalAlignment="Top" Width="75"
Command="{Binding CaptureCommand}"/>
<Button x:Name="ReviewButton" Content="Review" HorizontalAlignment="Left" Margin="146,10,0,0" VerticalAlignment="Top" Width="75"
Command="{Binding ShowReviewCommand}"/>
<TextBlock FontSize="36"
FontWeight="Bold"
Foreground="Purple"
Text="{Binding CaptureStatus}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextWrapping="Wrap" />
<Grid x:Name="usercontrolview" Visibility="{Binding ReviewModeOn, Converter={StaticResource BooleanToVisibilityConverter}}" Margin="0,50,150,0">
<view:ReviewView/>
</Grid>
<ContentPresenter x:Name="contentpresenterview" Content="{Binding CurrentContent}" Margin="150,50,0,0"/>
</Grid>
MainViewModel.cs (Partial)
public MainViewModel()
{
CaptureStatus = "No Picture";
CaptureCommand = new RelayCommand(Capture);
ShowReviewCommand = new RelayCommand(ShowReview);
ReviewModeOn = false;
}
public RelayCommand CaptureCommand { get; private set; }
private void Capture()
{
CaptureStatus = "Pictures Saved";
Messenger.Default.Send<NotificationMessage>(new NotificationMessage("Pictures Saved"), "Captured");
}
public RelayCommand ShowReviewCommand { get; private set; }
private void ShowReview()
{
ReviewModeOn = !ReviewModeOn;
CurrentContent = ContentViewModel;
}
And my template for ReviewViewModel & ReviewContentPresenterViewModel
public ***ViewModel()
{
Messenger.Default.Register<NotificationMessage>(this, "Captured", Captured);
CaptureStatus = "No Picture";
}
private void Captured(NotificationMessage notificationMessage)
{
CaptureStatus = notificationMessage.Notification;
}
private string _captureStatus;
public string CaptureStatus
{
get { return _captureStatus; }
set { Set(ref _captureStatus, value); }
}
======================= Update =======================
My template for ReviewView & ReviewContentPresenterView.
It takes DataContext by locator.
<UserControl x:Class="***View"
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:ignore="http://www.galasoft.ch/ignore"
mc:Ignorable="d ignore"
DataContext="{Binding ***ViewModel, Source={StaticResource Locator}}">
<Grid Background="Gray">
<TextBlock FontSize="36"
FontWeight="Bold"
Foreground="Purple"
Text="{Binding CaptureStatus}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextWrapping="Wrap" />
</Grid>
</UserControl>
It seems your DataContext in the root Grid and all it's children is the MainViewModel and you want other DataContext for ContentPresenter. Create the other ViewModel as a resource e.g.
<Grid>
<Grid.Resources>
<local:TheViewModelIWant x:Key=ContentViewModel/>
</Grid.Resources>
...
...
<ContentPresenter DataContext={StaticResource ContentViewModel} ...
(By the way, if you are already creating an instance of TheViewModelIWant somewhere e.g. in other ViewModels or view code behind then you can stop using that instance and access this instance in C# code as Resources["ContentViewModel"])
Strange one.
I have a contentcontrol on a WPF form, this loads a datatemplate within it.
This shows up fine (handwritten summary code so ignore errors/lack of attributes):
<DataTemplate>
<Label Content="Found datatemplate" />
</DataTemplate>
This however renders blank
<DataTemplate>
<Expander Header="Why dont I show">
<Label Content="Found datatemplate" />
</Expander>
</DataTemplate>
I have set the expander to visibile, isexpanded to true etc and no matter what it doesn't render at all.
Confused- is this just not possible?
I've recently done something similar to what you're describing and it worked for me. I have an ItemsControl that binds to a collection of view models, each of which contains a UserControl representing custom content. I implemented the ItemsControl.ItemTemplate to display the custom control inside an Expander like this:
<ItemsControl Margin="0,20,0,0" ItemsSource="{Binding ControlItems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Margin="0,0,0,0"
BorderBrush="#E7E7E7"
BorderThickness="0,1,0,0"
Padding="20,0">
<Expander Foreground="#E7E7E7"
IsExpanded="{Binding Path=IsExpanded,
Mode=TwoWay}">
<Expander.Header>
<Grid>
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
FontSize="24"
Text="{Binding Title}" />
</Grid>
</Expander.Header>
<DockPanel>
<ScrollViewer MinHeight="250">
<ContentControl Content="{Binding Control}" />
</ScrollViewer>
</DockPanel>
</Expander>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
This is what my view model looks like:
public class SidePanelControlItem : ModelBase
{
private bool _isExpanded;
public SidePanelControlItem(UserControl control)
{
if (control == null) { throw new ArgumentNullException("control");}
Control = control;
}
public string Title { get; set; }
public UserControl Control { get; private set; }
public bool IsExpanded
{
get { return _isExpanded; }
set
{
_isExpanded = value;
OnPropertyChanged("IsExpanded");
}
}
}
I want to bind 'SomeText' from my UserControl, into the Content of my Label.
I currently have a UserControl which just displays my 'SomeText'. The XAML, and Code Behind file can be seen below.
<UserControl x:Class="TabHeader.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="183" d:DesignWidth="235"
x:Name="uc">
<Grid>
<Label Height="43" HorizontalAlignment="Left" Margin="57,102,0,0" Name="textBlock1" Content="{Binding Path=SomeText, ElementName=uc}" VerticalAlignment="Top" Width="86" />
</Grid>
</UserControl>
namespace TabHeader
{
/// <summary>
/// Interaction logic for UserControl1.xaml
/// </summary>
public partial class UserControl1 : UserControl
{
private string someText;
public UserControl1()
{
this.SomeText = "23";
InitializeComponent();
}
public string SomeText
{
get
{
return someText;
}
set
{
someText = value;
}
}
}
}
I then have my main XAML page where I have, a Tab Control within a Grid. I'm using a Style to generate two Labels within the Columns Header. I am able to pull through the Header field, but I am unable to pull through the controls field.
<Window x:Class="TabHeader.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vw="clr-namespace:TabHeader"
Title="MainWindow" Height="350" Width="525" Name="Tabs">
<Grid>
<TabControl Height="262" HorizontalAlignment="Left" Margin="47,26,0,0" Name="tabControl1" VerticalAlignment="Top" Width="366">
<TabControl.Resources>
<Style TargetType="TabItem" x:Key="tabItemHeaderStyle" >
<Setter Property="HeaderTemplate" >
<Setter.Value>
<DataTemplate DataType="{x:Type TabItem}">
<StackPanel Orientation="Horizontal">
<Label Content="{Binding Path=Header, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}}"/>
<Label Content="{Binding Path=SomeText, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=vw:UserControl1}}"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Style="{StaticResource tabItemHeaderStyle}" Header="TI 1" Name="tabItem1" Width="100">
<vw:UserControl1 x:Name="UserControl11"></vw:UserControl1>
</TabItem>
<TabItem Style="{StaticResource tabItemHeaderStyle}" Header="TI 2" Name="tabItem2">
</TabItem>
</TabControl>
</Grid>
</Window>
Any assistance with this would be greatly appreciated.
Cheers.
Edit 1
For anyone interested added my working code below, where I have used the DependencyProperty.
MainWindow.xaml
<Grid>
<TabControl Height="262" HorizontalAlignment="Left" Margin="47,26,0,0" Name="tabControl1" VerticalAlignment="Top" Width="366">
<TabControl.Resources>
<Style TargetType="TabItem" x:Key="tab1ItemHeaderStyle">
<Setter Property="HeaderTemplate" >
<Setter.Value>
<DataTemplate DataType="{x:Type TabItem}">
<StackPanel Orientation="Horizontal">
<Label Content="{Binding Path=Header, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}}"/>
<Label Content="{Binding Path=UC1Figure, ElementName=uc1}"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Style="{StaticResource tab1ItemHeaderStyle}" Header="[Tab 1]" Name="tabItem1" Width="100">
<vw:UserControl1 x:Name="uc1"></vw:UserControl1>
</TabItem>
<TabControl>
</Grid>
UserControl1.xaml
<Grid>
<Label Height="43" HorizontalAlignment="Left" Margin="69,128,0,0" Name="textBlock1" Content="{Binding Path=UC1Figure, ElementName=uc}" VerticalAlignment="Top" Width="100" />
<Button Name="updateSomeFigure" Content="Press Me" Click="updateSomeFigure_Click" Width="100" Height="100" Margin="69,12,66,71" />
</Grid>
UserControl1.xaml.cs
public partial class UserControl1 : UserControl
{
public UserControl1()
{
InitializeComponent();
}
public static readonly DependencyProperty SomeFigureProperty =
DependencyProperty.Register("UC1Figure", typeof(int), typeof(UserControl1));
public int UC1Figure
{
get { return (int)this.GetValue(SomeFigureProperty); }
set { this.SetValue(SomeFigureProperty, value); }
}
private void updateSomeFigure_Click(object sender, RoutedEventArgs e)
{
UC1Figure = UC1Figure + 1;
}
}
If you want to data bind a property to the UI of your UserControl, you have two options. The first is to implement the INotifyPropertyChanged Interface in your code behind. The second is to define DependencyPropertys instead of regular CLR properties. You can find out how to do that in the Dependency Properties Overview page on MSDN.
You might also want to read the Data Binding Overview page on MSDN before you start data Binding.
Im having some problems with databinding inside a DataTemplate. In the ControlTemplate below the textbox in the Grid works and prints out the correct value. But the TextBlock inside the HyperlinkButtons DataTemplate does not work. Though the HyperlinkButtons NavigateUri is bound correctly. Could anyone plz help me with this
I have created a simple example that illustrates my problem.
MainPage.xaml
<UserControl x:Class="SilverlightApplication8.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">
<UserControl.Resources>
<ControlTemplate x:Key="EventControlTemplate" TargetType="Button">
<Grid>
<!--WORKS-->
<!--<Grid >
<TextBlock x:Name="TitleTextBlock" Text="{Binding Title}" Foreground="Red" FontWeight="Bold" />
</Grid>-->
<!--DOES NOT WORK-->
<HyperlinkButton TargetName="_blank" NavigateUri="{Binding Url}" >
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<Grid>
<TextBlock Foreground="Green" Text="{Binding Title}"/>
</Grid>
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
</Grid>
</ControlTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<ItemsControl x:Name="Links" Foreground="White" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border >
<Button Template="{StaticResource EventControlTemplate}" Click="Button_Click"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</UserControl>
MainPage.xaml.cs
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
namespace SilverlightApplication8
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
List<Events> events = new List<Events>();
events.Add(new Events(){Title = "This is title 1", Url = "http://www.thesun.co.uk"});
events.Add(new Events(){Title = "This is title 2", Url = "http://www.thesun.co.uk"});
events.Add(new Events() { Title = "This is title 3", Url = "http://www.thesun.co.uk" });
Links.ItemsSource = events;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
}
}
public class Events
{
public string Url { get; set; }
public string Title { get; set; }
}
}
You're setting the ContentTemplate, the DataContext of which will be the Content of the HyperlinkButton. Since you haven't set the Content, you're attempting to bind against null.
This should work:
<HyperlinkButton TargetName="_blank" NavigateUri="{Binding Url}" Content="{Binding Title}">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<Grid>
<TextBlock Foreground="Green" Text="{Binding .}"/>
</Grid>
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
But then that begs the question as to why you're even setting the ContentTemplate instead of just doing this:
<HyperlinkButton TargetName="_blank" NavigateUri="{Binding Url}" Content="{Binding Title}"/>