Xamarin Form - How To checked the checkbox on another check box checked in UWP - win-universal-app

My application displays the fetures permissions on DataGrid from database. For realizing this I am using the MyToolkit.Controls.DataGrid. Now i want output for if user checked the admin or update/delete/create check box then View and list check box checked vice versa same for the and also i want to set checkbox checked value from database.
thanks in advance.
Image
if user checked the create/update/delete then same row list and view should be checkbox checked
if user checked the view check box then selected row column list should be checked
Datagrid xaml
<Toolkit:DataGrid.Columns >
<!--Feature Column-->
<Toolkit:DataGridTemplatedColumn CanSort="False" >
<Toolkit:DataGridTemplatedColumn.Header>
<TextBlock FontSize="16" Foreground="#000000" Width="280" Text="Feature" />
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate >
<TextBlock FontSize="14" Padding="6 0 0 0" Foreground="#333333" Width="280" Text="{Binding featureName}"/>
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
<!--Create-->
<Toolkit:DataGridTemplatedColumn Width="180" CanSort="False" >
<Toolkit:DataGridTemplatedColumn.Header>
<Border BorderBrush="Black" BorderThickness="1 0 0 0" >
<TextBlock FontSize="16" Padding="0" Foreground="#000000" Text=" Create" />
</Border>
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate >
<CheckBox Margin="30,0,0,0" Style="{StaticResource CheckBoxStyle1}" x:Name="CBCreate" DataContext="create" Tag ="{Binding featureId}" VerticalAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Left" HorizontalContentAlignment="Left" Checked="CBCreate_Checked" />
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
<!--Update-->
<Toolkit:DataGridTemplatedColumn Width="180" CanSort="False" >
<Toolkit:DataGridTemplatedColumn.Header>
<Border BorderBrush="Black" BorderThickness="1 0 0 0" >
<TextBlock FontSize="16" Foreground="#000000" Text=" Update" />
</Border>
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate >
<CheckBox Margin="30 0 0 0" Style="{StaticResource CheckBoxStyle1}" IsChecked="{Binding Update}" x:Name="CBUpdate" DataContext="update" Tag ="{Binding featureId}" VerticalAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Left" HorizontalContentAlignment="Left" />
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
<!--Delete-->
<Toolkit:DataGridTemplatedColumn Width="180" CanSort="False" >
<Toolkit:DataGridTemplatedColumn.Header>
<Border BorderBrush="Black" BorderThickness="1 0 0 0" >
<TextBlock FontSize="16" Foreground="#000000" Text=" Delete" />
</Border>
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate >
<CheckBox Margin="30,0,0,0" Style="{StaticResource CheckBoxStyle1}" IsChecked="{Binding Delete}" x:Name="CBDelete" DataContext="delete" Tag ="{Binding featureId}" VerticalAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Left" HorizontalContentAlignment="Left" />
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
<!--View-->
<Toolkit:DataGridTemplatedColumn Width="180" CanSort="False" >
<Toolkit:DataGridTemplatedColumn.Header>
<Border BorderBrush="Black" BorderThickness="1 0 0 0" >
<TextBlock FontSize="16" Foreground="#000000" Text=" View" />
</Border>
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate >
<CheckBox Checked="CBView_Checked" Unchecked="CBView_Unchecked" IsChecked="{Binding View}" Indeterminate="CBView_Indeterminate" Margin="30,0,0,0" Style="{StaticResource CheckBoxStyle1}" x:Name="view" DataContext="{Binding featureName}" Tag ="view" AccessKey="{Binding index}" VerticalAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Left" HorizontalContentAlignment="Left" />
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
<!--List-->
<Toolkit:DataGridTemplatedColumn Width="180" CanSort="False" x:Name="CLMList" >
<Toolkit:DataGridTemplatedColumn.Header>
<Border BorderBrush="Black" BorderThickness="1 0 0 0" >
<TextBlock FontSize="16" Foreground="#000000" Text=" List" />
</Border>
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate >
<CheckBox x:FieldModifier="public" IsChecked="{Binding List}" Margin="30,0,0,0" Style="{StaticResource CheckBoxStyle1}" x:Name="CBList" DataContext="list" Tag ="{Binding featureId}" VerticalAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Left" HorizontalContentAlignment="Left" Unchecked="CBList_Unchecked" Checked="CBList_Checked" />
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
</Toolkit:DataGrid.Columns>
</Toolkit:DataGrid>

in simple way if user click on update/create/delete check boxes then list and view check box row should be checked AND if user checked the view checkbox then List checkbox should be checked.
For your requirement, you could use two way bind to realize. For details code please refer the following. The following code was modified base on your provided demo, you could copy and replace directly.
FeatureData class
public class FeatureData : INotifyPropertyChanged
{
public int featureId { get; set; }
public string featureName { get; set; }
private bool _create;
public bool Create
{
get { return _create; }
set
{
_create = value;
UpdateViewAndList(value);
OnChanged();
}
}
private bool _update;
public bool Update
{
get { return _update; }
set
{
_update = value;
UpdateViewAndList(value);
OnChanged();
}
}
private bool _delete;
public bool Delete
{
get { return _delete; }
set
{
_delete = value;
UpdateViewAndList(value);
OnChanged();
}
}
private bool _list;
public bool List
{
get { return _list; }
set
{
_list = value;
OnChanged();
}
}
private bool _view;
public bool View
{
get { return _view; }
set
{
_view = value;
this.List = value;
OnChanged();
}
}
private void UpdateViewAndList(bool value)
{
if (value)
{
this.View = true;
this.List = true;
}
else
{
this.View = false;
this.List = false;
}
}
//public string index { get; set; }
public FeatureData(bool Create, bool Update, bool Delete, bool List, bool View, int featureId, string featureName)
{
this.featureId = featureId;
this.featureName = featureName;
this.Create = Create;
this.Update = Update;
this.Delete = Delete;
this.List = List;
this.View = View;
//this.index = index;
}
private bool _IsSelected = false;
public bool IsSelected { get { return _IsSelected; } set { _IsSelected = value; OnChanged("IsSelected"); } }
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
private void OnChanged([CallerMemberName]string prop = null)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(prop));
}
#endregion
}
Xaml bind
<Toolkit:DataGrid.Columns>
<!-- Feature Column -->
<Toolkit:DataGridTemplatedColumn CanSort="False">
<Toolkit:DataGridTemplatedColumn.Header>
<TextBlock
Width="280"
FontSize="16"
Foreground="#000000"
Text="Feature"
/>
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<TextBlock
Width="280"
Padding="6,0,0,0"
FontSize="14"
Foreground="#333333"
Text="{Binding featureName}"
/>
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
<!-- Create -->
<Toolkit:DataGridTemplatedColumn Width="180" CanSort="False">
<Toolkit:DataGridTemplatedColumn.Header>
<Border BorderBrush="Black" BorderThickness="1,0,0,0">
<TextBlock
Margin="15,0,0,0"
Padding="0"
FontSize="16"
Foreground="#000000"
Text="Create"
/>
</Border>
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<CheckBox
x:Name="CBCreate"
Margin="30,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Center"
IsChecked="{Binding Create,Mode=TwoWay}"
/>
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
<!-- Update -->
<Toolkit:DataGridTemplatedColumn Width="180" CanSort="False">
<Toolkit:DataGridTemplatedColumn.Header>
<Border BorderBrush="Black" BorderThickness="1,0,0,0">
<TextBlock
FontSize="16"
Foreground="#000000"
Text=" Update"
/>
</Border>
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<CheckBox
x:Name="CBUpdate"
Margin="30,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Center"
IsChecked="{Binding Update, Mode=TwoWay}"
/>
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
<!-- Delete -->
<Toolkit:DataGridTemplatedColumn Width="180" CanSort="False">
<Toolkit:DataGridTemplatedColumn.Header>
<Border BorderBrush="Black" BorderThickness="1,0,0,0">
<TextBlock
FontSize="16"
Foreground="#000000"
Text=" Delete"
/>
</Border>
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<CheckBox
x:Name="CBDelete"
Margin="30,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Center"
IsChecked="{Binding Delete, Mode=TwoWay}"
/>
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
<!-- View -->
<Toolkit:DataGridTemplatedColumn Width="180" CanSort="False">
<Toolkit:DataGridTemplatedColumn.Header>
<Border BorderBrush="Black" BorderThickness="1,0,0,0">
<TextBlock
FontSize="16"
Foreground="#000000"
Text=" View"
/>
</Border>
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<CheckBox
x:Name="view"
Margin="30,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Center"
IsChecked="{Binding View, Mode=TwoWay}"
Tag="view"
/>
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
<!-- List -->
<Toolkit:DataGridTemplatedColumn
x:Name="CLMList"
Width="180"
CanSort="False"
>
<Toolkit:DataGridTemplatedColumn.Header>
<Border BorderBrush="Black" BorderThickness="1,0,0,0">
<TextBlock
FontSize="16"
Foreground="#000000"
Text=" List"
/>
</Border>
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<CheckBox
x:Name="CBList"
Margin="30,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Center"
x:FieldModifier="public"
IsChecked="{Binding List, Mode=TwoWay}"
/>
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
</Toolkit:DataGrid.Columns>

Related

How can I use a listview item as a button in uwp app? or how can I change text of a textbox by clicking on a listview item in uwp?

private void lstvActiveIssues_ItemClick(object sender, ItemClickEventArgs e)
{
Issue issue = (Issue)lstvActiveIssues.SelectedItem;
tbxTest.Text = issue.Description;
}
**the issue is null here. It means that the item is not selected. **
<ListView x:Name="lstvActiveIssues" Header="Active documents" HorizontalAlignment="Center" Margin="10" Background="#FF1F2436" ItemClick="lstvActiveIssues_ItemClick" IsItemClickEnabled="True">
<ListView.ItemTemplate>
<DataTemplate x:DataType="models:Issue">
<StackPanel>
<StackPanel Orientation="Horizontal" Margin="10">
<TextBlock Text="Customer Id:" Margin="10" />
<TextBlock Text="{x:Bind Customer.Id}" Margin="10"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Customer Name:" Margin="10"/>
<TextBlock Text="{x:Bind Customer.FirstName}" Margin="10"/>
<TextBlock Text="{x:Bind Customer.LastName}" Margin="10"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
//I have added the xaml code here.
ItemClickEventArgs has a ClickedItem property that gets a reference to the clicked item:
private void lstvActiveIssues_ItemClick(object sender, ItemClickEventArgs e)
{
Issue issue = e.ClickedItem as Issue;
tbxTest.Text = issue?.Description;
}

UWP Accessing content in a data bound ListView

I have a ListView with a ListView.ItemTemplate if it is important: the ListView is part of a Grid). I will strip it down here for the minumum:
<ListView x:Name="lstFotos" Grid.Row="2" Grid.Column="1" Height="auto" Tapped="imageControl_Tapped" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid IsTapEnabled="True" >
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image x:Name="imageControl" Width="200" Height="200" Source="{Binding DateiSoftwareBitmapSource}" IsTapEnabled="True" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" />
<TextBlock x:Name="txtImageDateDescription" Text="Aufnahmedatum: " Grid.Column="1" Grid.Row="0" />
<TextBlock x:Name="txtImageDescriptionDescription" Text="Beschreibung: " Grid.Column="1" Grid.Row="1" />
<TextBlock x:Name="txtImageDate" Text="{Binding Datum}" Grid.Column="2" Grid.Row="0" />
<TextBox x:Name="txtImageDescription" Text="{Binding Beschreibung}" Grid.Column="2" Grid.Row="1" />
<Button x:Name="btnSpeichern" Content="Speichern" Grid.Column="3" Grid.Row="1" Click="btnSpeichern_Click" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In the code behing I do a
lstFotos.ItemsSource = AlleAnzeigeFotos
AlleAnzeigeFotos is a List(Of myClass), myClass contains the properties Datum, Beschreibung, DateiSoftwareBitmapSource.
What I want to do is that the user can edit the textfield, presses on the button and in the code behing I want to update the class and do some more stuff.
How can I get the appropriate instance of that class when I click the button?
UPDATE:
This is how it looks like:
"Beschreibung" (english: description) is empy after adding a foto and should be editable and stored by clicking "Speichern" (save).
(sender as Button).DataContext will give you the item which you clicked. Cast it to appropriate type of your class
update
Text="{Binding Beschreibung,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
var userenteredstring=((sender as Button).DataContext as your class).Beschreibung

Change background color of checked combobox in datagridview on button click using MVVM

Hi I am new in WPF I want change background color of selected row. please help me in this
Itemsource for datagrid id Data property which is INotify Used to crate combobox (This Work Fine)
IsChecked is Property for Checkbox
please note that combobox and check box are dynamically created
<DataGrid Name="lbUsers" ItemsSource="{Binding Data}" CanUserAddRows="False" Grid.Column="1" Grid.Row="1" SelectedIndex="{Binding SelectionIndexChange, Mode=TwoWay}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTemplateColumn Header="Rule Type" Width="100">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=DataContext.RuleType}"></TextBlock>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<ComboBox ItemsSource="{Binding Path=DataContext.RuleType, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
/>
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<CheckBox Width="45" Height="20" IsChecked="{Binding ElementName=lbUsers,Path=DataContext.IsChecked}" ></CheckBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns
<DataGrid ItemsSource="{Binding Data}" CanUserAddRows="False" Grid.Column="1" Grid.Row="1" SelectedIndex="{Binding SelectionIndexChange, Mode=TwoWay}" AutoGenerateColumns="False">
<DataGrid.ItemContainerStyle>
<Style TargetType="DataGridRow">
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked}" Value="True">
<Setter Property="Background" Value="Yellow" />
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.ItemContainerStyle>
<DataGrid.Columns>
<DataGridTemplateColumn Header="Rule Type" Width="100">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding RuleType}"></TextBlock>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<ComboBox ItemsSource="{Binding Path=DataContext.RuleType, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<CheckBox Width="45" Height="20" IsChecked="{Binding IsChecked}"></CheckBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>

Observable collection - CollectionChanged Binding

During programming, I ran into the following questions:
Does a observable collection implement a CollectionChanged event by itself? (Because of differentbooks refering to the fact that it does, but google shows otherwise)
I have the following code, and I want my UI to update by binding (the code is for windowsPhone 7.1) Also, the binding works for single items in my observable collection, but when I try to add a new object to my collection, the CollectionChanged event doesn't fire.
namespace Phone.lib.ViewModel
{
public class DeviceViewModel : ViewModelBase
{
DeviceModelInfo InfoList = new DeviceModelInfo();
public DeviceViewModel()
{
}
public DeviceViewModel(int index)
{
// Here I add a new item to the collection, But the ui only shows: Beckhoff, ver....
InfoList.Add(new DeviceInfo("name1", "name2", "name3"));
}
}
public class DeviceModelInfo : ObservableCollection<DeviceInfo>
{
public DeviceModelInfo() : base()
{
Add(new DeviceInfo("Beckhoff", "Ver. 1A2B3C", "Stopped"));
}
}
public class DeviceInfo : ViewModelBase
{
private string devicename;
private string deviceid;
private string devicestatus;
public DeviceInfo(string first, string second, string third)
{
devicename = first;
deviceid = second;
devicestatus = third;
}
public string DeviceName
{
get { return devicename; }
set
{
devicename = value;
RaisePropertyChanged("DeviceName");
}
}
public string DeviceID
{
get { return deviceid; }
set { deviceid = value; }
}
public string DeviceStatus
{
get { return devicestatus; }
set { devicestatus = value; }
}
}
Note: The class inherits from viewmodel base wich has the Inotify changed interface in it.
Code from my Xaml:
<phone:PhoneApplicationPage
x:Class="WindowsPhone.View.Device_Page"
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:ViewModel="clr-namespace:Phone.lib.ViewModel;assembly=Phone.lib"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
shell:SystemTray.IsVisible="True">
<!-- Static Resource area for binding -->
<phone:PhoneApplicationPage.Resources>
<ViewModel:DeviceModelInfo x:Key="deviceinfo"></ViewModel:DeviceModelInfo>
<ViewModel:DeviceModelSensor x:Key="devicesensors"></ViewModel:DeviceModelSensor>
<ViewModel:DeviceModelActuator x:Key="deviceactuators"></ViewModel:DeviceModelActuator>
</phone:PhoneApplicationPage.Resources>
<!-- LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="Kremer app" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox Height="100" HorizontalAlignment="Left" Margin="-4,6,0,0" Name="Device_ListBox" VerticalAlignment="Top" Width="460" ItemsSource="{Binding Source={StaticResource deviceinfo}}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="100">
<TextBlock TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextExtraLargeStyle}" Text="{Binding Path=DeviceName, Mode=TwoWay}" />
<TextBlock TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" Text="{Binding Path=DeviceID, Mode=TwoWay}" />
<TextBlock TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" Text="{Binding Path=DeviceStatus, Mode=TwoWay}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox Height="261" HorizontalAlignment="Left" Margin="-4,138,0,0" Name="Sensor_ListBox" VerticalAlignment="Top" Width="460" ItemsSource="{Binding Source={StaticResource devicesensors}}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="78">
<TextBlock TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextExtraLargeStyle}" Text="{Binding Path=SensorName}" />
<TextBlock TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" Text="{Binding Path=SensorType}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox Height="261" HorizontalAlignment="Left" Margin="-4,429,0,0" Name="Actuator_ListBox" ItemsSource="{Binding Source={StaticResource deviceactuators}}" VerticalAlignment="Top" Width="460">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Height="78" Margin="0,0,0,17" Width="432">
<TextBlock Margin="12,-6,12,0" Style="{StaticResource PhoneTextExtraLargeStyle}" Text="{Binding Path=ActuatorName}" TextWrapping="Wrap" />
<TextBlock Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" Text="{Binding Path=ActuatorType}" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
I hope someone is able to help me with this problem because i have been at this for like two days now.
Also, my apologies for my "bad" english, but english is not my native language
Cheers -Bart
EDIT: done a little test
I have run a little debugtest myself to see if the add operation adds to the right collection en therefor increments the count value
public DeviceViewModel(int index)
{
// Here I add a new item to the collection, But the ui only shows: Beckhoff, ver....
Debug.WriteLine("number of added items " + InfoList.Count.ToString());
InfoList.Add(new DeviceInfo("1", "2", "3"));
Debug.WriteLine("number of added items " + InfoList.Count.ToString());
InfoList.Add(new DeviceInfo("1", "2", "3"));
InfoList.Add(new DeviceInfo("1", "2", "3"));
InfoList.Add(new DeviceInfo("1", "2", "3"));
Debug.WriteLine("number of added items " + InfoList.Count.ToString());
}
output:
number of added items 1
number of added items 2
number of added items 5
Edit 2 (19-03-2012)
Last friday I tried to get it working like you suggested. But somehow the XAML can't find InfoList, and I don't know why. Maybe I do something wrong in the XAML itself or in the code behind or in the DeviceViewModel. So here is what I have at the moment:
DeviceViewModel:
namespace Phone.lib.ViewModel
{
public class DeviceViewModel : ViewModelBase
{
public DeviceModelInfo InfoList = new DeviceModelInfo();
public DeviceViewModel()
{
//DeviceModelInfo InfoList = new DeviceModelInfo();
InfoList.Add(new DeviceInfo("1", "2", "3"));
}
public DeviceViewModel(int index)
{
}
}
public class DeviceModelInfo : ObservableCollection<DeviceInfo>
{
public DeviceModelInfo() : base()
{
Add(new DeviceInfo("Beckhoff", "Ver. 1A2B3C", "Stopped"));
//this.CollectionChanged += (e, s) => { Debug.WriteLine("event Fired " + e.ToString()); };
}
}
public class DeviceInfo : ViewModelBase
{
private string devicename;
private string deviceid;
private string devicestatus;
public DeviceInfo(string first, string second, string third)
{
devicename = first;
deviceid = second;
devicestatus = third;
}
public string DeviceName
{
get { return devicename; }
set
{
devicename = value;
RaisePropertyChanged("DeviceName");
}
}
public string DeviceID
{
get { return deviceid; }
set { deviceid = value; }
}
public string DeviceStatus
{
get { return devicestatus; }
set { devicestatus = value; }
}
}
The code behind the page:
namespace WindowsPhone.View
{
public partial class Device_Page : PhoneApplicationPage
{
private DeviceViewModel _DV;
public Device_Page()
{
InitializeComponent();
_DV = new DeviceViewModel();
DataContext = _DV;
}
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
string selectedIndex = "";
if (NavigationContext.QueryString.TryGetValue("selectedItem", out selectedIndex))
{
int index = int.Parse(selectedIndex);
//_DV = new DeviceViewModel(index);
//DataContext = _DV;
Debug.WriteLine("index:" + index.ToString());
}
}
}
}
The XAML code:
<phone:PhoneApplicationPage
x:Class="WindowsPhone.View.Device_Page"
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:ViewModel="clr-namespace:Phone.lib.ViewModel;assembly=Phone.lib"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
shell:SystemTray.IsVisible="True">
<!-- Static Resource area for binding -->
<phone:PhoneApplicationPage.Resources>
<ViewModel:DeviceViewModel x:Key="deviceinfo"></ViewModel:DeviceViewModel>
<ViewModel:DeviceModelSensor x:Key="devicesensors"></ViewModel:DeviceModelSensor>
<ViewModel:DeviceModelActuator x:Key="deviceactuators"></ViewModel:DeviceModelActuator>
</phone:PhoneApplicationPage.Resources>
<!-- LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="Kremer app" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox Height="100" HorizontalAlignment="Left" Margin="-4,6,0,0" Name="Device_ListBox" VerticalAlignment="Top" Width="460" ItemsSource="{Binding InfoList}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="100">
<TextBlock TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextExtraLargeStyle}" Text="{Binding Path=DeviceName, Mode=TwoWay}" />
<TextBlock TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" Text="{Binding Path=DeviceID, Mode=TwoWay}" />
<TextBlock TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" Text="{Binding Path=DeviceStatus, Mode=TwoWay}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox Height="261" HorizontalAlignment="Left" Margin="-4,138,0,0" Name="Sensor_ListBox" VerticalAlignment="Top" Width="460" ItemsSource="{Binding Source={StaticResource devicesensors}}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="78">
<TextBlock TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextExtraLargeStyle}" Text="{Binding Path=SensorName}" />
<TextBlock TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" Text="{Binding Path=SensorType}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox Height="261" HorizontalAlignment="Left" Margin="-4,429,0,0" Name="Actuator_ListBox" ItemsSource="{Binding Source={StaticResource deviceactuators}}" VerticalAlignment="Top" Width="460">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Height="78" Margin="0,0,0,17" Width="432">
<TextBlock Margin="12,-6,12,0" Style="{StaticResource PhoneTextExtraLargeStyle}" Text="{Binding Path=ActuatorName}" TextWrapping="Wrap" />
<TextBlock Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" Text="{Binding Path=ActuatorType}" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
1) ObservableCollection implements the INotifyCollectionChanged interface, which defines the CollectionChanged event.
2) When you add a new item in DeviceViewModel you do it to a new instance of DeviceModelInfo, so a different instance than the one you declared in your XAML
<ViewModel:DeviceModelInfo x:Key="deviceinfo"></ViewModel:DeviceModelInfo>
You have to either bind to the DeviceModelInfo instance in DeviceViewModel
or use the instance of DeviceViewModel, declared in your XAML
Edit
In your XAML you have
That is the same as typing 'new DeviceModelInfo()' and then registering that instance in the resources of your control PhoneApplicationPage. And you bind the the ItemsSource of your ListBox to that particular instance.
ItemsSource="{Binding Source={StaticResource deviceinfo}}"
Now in your DeviceViewModel class you declare InfoList like this
DeviceModelInfo InfoList = new DeviceModelInfo();
You create a new instance of DeviceModelInfo, so InfoList is not the same instance/object as the instance/object in your XAML.
You must either
1) Bind your ItemsSource of the ListBox to the instance you have in DeviceViewModel. To do this you must first expose InfoList, that is make it public preferably through a property (but that's just convention, not required). Then make sure the DataContext of your control is set to the instance of DeviceViewModel your're working with. And then you can set the binding like this
ItemsSource="{Binding InfoList}"
Assuming InfoList is public
2) Get the instance deviceinfo created in your XAML like this:
DeviceViewModel deviceinfo = phoneApplicationPage.FindResource("deviceinfo") as DeviceViewModel;
assuming the instance of your control is called phoneApplicationPage. If you do it in the code behind of your control then phoneApplicationPage would be this.
And now you can pass this instance (deviceinfo) to your instance of DeviceViewModel.
From the naming I assume you're attempting to use the MVVM pattern, in which case you should go with 1)
Edit
Making the field public is good enough.
Now you need to bind it to the ItemsSource property of the ListBox. Which can be as simple as
ItemsSource="{Binding InfoList}"
But this requires that the DataContext property of your page (PhoneApplicationPage) is set to an instance of DeviceViewModel.
Without knowing exactly how you currently instantiate DeviceViewModel, it's hard for me to explain exactly how you can go about doing this. But I assume you instantiate DeviceViewModel in the code-behind of your page, so it looks something like this:
public partial class PhoneApplicationPage : Page
{
private DeviceViewModel _deviceViewModel;
//...
public PhoneApplicationPage()
{
InitializeComponent();
// I assume you do something like this
_deviceViewModel = new DeviceViewModel();
// You need to set the DataContext to the DeviceViewModel instance you have created.
DataContext = _deviceViewModel;
}
//...
}
Once you've made sure the DataContext is set to your DeviceViewModel instance then you can change the binding in your XAML like stated above.
So you should change the line
<ListBox Height="100" HorizontalAlignment="Left" Margin="-4,6,0,0" Name="Device_ListBox" VerticalAlignment="Top" Width="460" ItemsSource="{Binding Source={StaticResource deviceinfo}}">
to
<ListBox Height="100" HorizontalAlignment="Left" Margin="-4,6,0,0" Name="Device_ListBox" VerticalAlignment="Top" Width="460" ItemsSource="{Binding ListInfo}">

Pop Up: a problem with margin Top

I'm developing a Windows Phone app.
I use a user control to show a pop up:
<UserControl x:Class="XXXXXXX.Views.Lists.GameDescriptionControl"
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}" Height="290" Width="460">
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}" Margin="0,0,0,0" Width="460">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="133"/>
<RowDefinition Height="86"/>
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Center" Margin="10" Name="gameDescription" Text="" VerticalAlignment="Top" TextWrapping="Wrap" Grid.Row="1" Style="{StaticResource PhoneTextTitle3Style}" />
<Button Content="{Binding Path=AppResources.Yes, Source={StaticResource LocalizedStrings}}" Height="72" HorizontalAlignment="Left" Margin="50,5,0,0" Name="okButton" VerticalAlignment="Top" Width="160" Click="okButton_Click" Grid.Row="2" />
<Button Content="{Binding Path=AppResources.No, Source={StaticResource LocalizedStrings}}" Height="72" HorizontalAlignment="Left" Margin="244,5,0,0" Name="cancelButton" VerticalAlignment="Top" Width="160" Click="cancelButton_Click" Grid.Row="2" />
<TextBlock Grid.Row="0" x:Name="caption" HorizontalAlignment="Left" Margin="10" TextWrapping="Wrap" Text="{Binding Path=AppResources.Description, Source={StaticResource LocalizedStrings}}" Style="{StaticResource PhoneTextLargeStyle}"/>
</Grid>
</UserControl>
And this is the code to show the Pop Up:
private void showInfo(int gameId)
{
string gameDesc = getGameInfo(gameId);
p = new Popup();
GameDescriptionControl gd = new GameDescriptionControl();
gd.Description = gameDesc;
gd.OkClicked += new EventHandler(gd_OkClicked);
gd.CancelClicked += new EventHandler(gd_CancelClicked);
p.Child = gd;
// Set where the popup will show up on the screen.
p.VerticalOffset = 10;
p.HorizontalOffset = 10;
// Open the popup.
p.IsOpen = true;
}
But I get this:
As you can see, caption TextBlock hasn't got a margin top.
Any advice?
Margin will refer to the area outside of your textblock. If you want to move your text away from the edge of the textblock you will need to use the Padding attribute.
Not to act like the word paperclip, but it looks like you're trying to make a custom MessageBox.
Check this implementation out: http://cloudstore.blogspot.com/2011/01/customizing-messagebox-on-windows-phone.html . It's a great implementation of a messagebox that is very easy to use, looks/behaves very closely to the real MessageBox, and is lightweight.
Adding the few files that come with the solution, all you have to do is:
private MessageBoxService mbs = new MessageBoxService();
...
mbs.Closed +=new System.EventHandler(mbs_Closed);
mbs.Show("Confirm?","Are you sure you wish to do that?",MessageBoxServiceButton.YesNo,null);
void mbs_Closed(object sender, System.EventArgs e)
{
mbs.Closed -= mbs_Closed;
if (mbs.Result == MessageBoxResult.Yes)
{
...
}
}

Resources