I have this XAML code:
<ListView Name="ListBoxWithNews" ItemsSource="{Binding News}" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding imageURL}" Width="75" Height="75" />
<StackPanel>
<TextBox Text="{Binding Title}" Width="200" />
<TextBox Text="{Binding Body}" Width="200" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The controls are binded using the MVVM pattern. The user can change the content of the two text boxes. Is there a possible way to get the updated text from these text boxes at some point when I need them?
Your ViewModel should implement INotifyPropertyChanged and Use TwoWay Binding as below
<ListView Name="ListBoxWithNews" ItemsSource="{Binding News,Mode=TwoWay}" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding imageURL,Mode=TwoWay}" Width="75" Height="75" />
<StackPanel>
<TextBox Text="{Binding Title,Mode=TwoWay}" Width="200" />
<TextBox Text="{Binding Body,Mode=TwoWay}" Width="200" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Related
I'm filling a two WrapPanel with Buttons via DataTemplate but they all align vertically for some reason, what exactly is wrong here?
It doesn't matter if I set the Orientation property or not.
XAML:
<UserControl x:Class="DashboardClient.View.DashboardView"
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"
Width="940" Height="640">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<DockPanel Grid.Column="0" Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}},Path=ActualHeight}">
<ScrollViewer VerticalScrollBarVisibility="Auto" DockPanel.Dock="Top" Height="520" Margin="5">
<WrapPanel>
<ItemsControl ItemsSource="{Binding Dashboards}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Width="120" Height="120" Margin="5" Command="{Binding DataContext.DashboardCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}" CommandParameter="{Binding}">
<TextBlock TextWrapping="Wrap" HorizontalAlignment="Center" Text="{Binding Name}" />
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Button Width="120" Height="120" Margin="5" Command="{Binding DashboardAddCommand}" Content="+" FontSize="100" />
</WrapPanel>
</ScrollViewer>
<StackPanel Height="100" Margin="5">
<Label>Dashboardname:</Label>
<TextBox Text="{Binding SelectedDashboard.Name}" />
<RadioButton Content="Sichtbar" Margin="0 10" IsChecked="{Binding SelectedDashboard.IsVisibleOnDashboard, UpdateSourceTrigger=PropertyChanged}" />
<Button Content="Dashboard löschen" Command="{Binding DashboardRemoveCommand}" />
</StackPanel>
</DockPanel>
<StackPanel Grid.Column="1" Margin="0">
<ScrollViewer VerticalScrollBarVisibility="Auto" Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type StackPanel}},Path=ActualHeight}">
<WrapPanel>
<ItemsControl ItemsSource="{Binding SelectedDashboard.DashboardItems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Width="200" Height="120" Command="{Binding DataContext.DashboardItemCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}" CommandParameter="{Binding}" Margin="10">
<TextBlock TextWrapping="Wrap" HorizontalAlignment="Center" Text="{Binding Name}" />
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Button Width="200" Height="120" Content="+" FontSize="100" Command="{Binding DashboardItemAddCommand}" Margin="10" />
</WrapPanel>
</ScrollViewer>
</StackPanel>
</Grid>
</UserControl>
This is what the WrapPanel looks like:
The Add Button is always cut off somehow, too.
If you want to put the children of the ItemsControl horizontally in a WrapPanel, you need to tell the ItemsControl to use a WrapPanel for its children via an ItemsPanelTemplate:
<WrapPanel Orientation="Horizontal">
<ItemsControl ItemsSource="{Binding Dashboards}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button
Width="120"
Height="120"
Margin="5"
Command="{Binding DataContext.DashboardCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
CommandParameter="{Binding}"
>
<TextBlock
TextWrapping="Wrap"
HorizontalAlignment="Center"
Text="{Binding Name}"
/>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<Button
Width="120"
Height="120"
Margin="5"
VerticalAlignment="Top"
Command="{Binding DashboardAddCommand}"
Content="+"
FontSize="100"
/>
</WrapPanel>
I don't know what you want to do with the button. My guess is that you want it to the right of the ItemsControl, and I aligned it to the top because that makes more sense to me.
Instead of
<ScrollViewer>
<WrapPanel>
<ItemsControl ItemsSource="{Binding Dashboards}">
<ItemsControl.ItemTemplate ... />
</ItemsControl>
<Button Content="+" ... />
</WrapPanel>
</ScrollViewer>
You can use
<ScrollViewer>
<ItemsControl ItemsSource="{Binding Dashboards}">
<ItemsControl.ItemTemplate ... />
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<Button Content="+" ... /> <!-- A -->
</ScrollViewer>
<Button Content="+" ... /> <!-- B -->
WrapPanel is moved inside ItemsControl to layout dashboards.
You can put button somewhere else (same as #EdPlunkett I don't have a good idea where to put it): A - will let you to scroll button together with dashboards and B will keep button fixed, disregards scrolling.
I'm working on a project in which I'm setting content using JSON Binding in Grid view but now I want to get Text of item when it is selected. XAML CODE:
<GridView ItemsSource="{Binding}" HorizontalAlignment="Center" Margin="0,10,0,0" x:Name="dataList" VerticalAlignment="Center" SelectionMode="None" SelectionChanged="dataList_Selection">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Width="450" Height="300">
<Image Source="{Binding Top}" Margin="0,0,0,0" Stretch="None" />
<TextBlock x:Name="title" Text="{Binding Title}" Foreground="Black" HorizontalAlignment="Center" FontFamily="Assets/Font/MixBrush.ttf#MixBrush" FontWeight="Bold" FontSize="50" Margin="0,10,0,0" />
<Image Source="{Binding Bottom}" Margin="0,0,0,0" Stretch="None" />
<TextBlock Text="{Binding first}" Foreground="Black" HorizontalAlignment="Center" FontFamily="Assets/Font/Comfortaa_Regular.ttf#Comfortaa" FontSize="20" Margin="0,50,0,0" />
<TextBlock Text="{Binding second}" Foreground="Black" HorizontalAlignment="Center" FontFamily="Assets/Font/Comfortaa_Regular.ttf#Comfortaa" FontSize="20" Margin="0,0,0,0" />
<TextBlock Text="{Binding third}" Foreground="Black" HorizontalAlignment="Center" FontFamily="Assets/Font/Comfortaa_Regular.ttf#Comfortaa" FontSize="20" Margin="0,0,0,0" />
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
Here I want to get Text of "title" programmatically. Please share your knowledge with me. :-)
********************** Thank You ************************
On your back code use:
title.Text;
After long hard struggle I found my answer.
var selection = (myClass) dataList.SelectedItem;
await new MessageDialog(selection.Title).ShowAsync();
And I got perfect result.
Thank You.
I have GridView like this
<GridView ItemsSource="{Binding PublicLibraries}" SelectionMode="None" IsItemClickEnabled="True"
ItemClick="OnPublicLibrariesItemTapped" x:Name="PublicLibrariesGridView"
Margin="24 0" ItemsPanel="{StaticResource LibraryItemsPanelTemplate}"
ItemTemplate="{StaticResource LibraryDataTemplate}" />
and DataTemplate is something like this
<DataTemplate x:Key="LibraryDataTemplate">
<Grid Width="510" Height="300">
<StackPanel Orientation="Horizontal" Background="Black" Opacity="0.8" VerticalAlignment="Bottom">
<TextBlock Style="{StaticResource TitleTextBlockStyle}" Foreground="White"
Text="{Binding LibName}" Margin="12" Width="450"/>
<Image HorizontalAlignment="Left" Margin="12 6" Width="24" Height="36"
Source="ms-appx:///Assets/Logo.png" Stretch="UniformToFill"
Tapped="OnDetailLibraryTapped" />
</StackPanel>
</Grid>
</DataTemplate>
What I want now is when user taps the image it should fire OnDetailLibraryTapped first. But for now when I tap image it still fires OnPublicLibrariesItemTapped. How I can differentiate when user tap the image or the GridView itself?
I am developing an app where i need to show data from web service in a listbox. I am able to show data in my listbox but its not showing the complete data. There is some problem on managing the width of my box which i am not able to fix. Can anyone please help. Here is the code:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer Margin="0,17,0,49" VerticalScrollBarVisibility ="Visible" AllowDrop="False" ManipulationMode="Control">
<ListBox Name="listBox1" Margin="68,106,58,662">
<ListBox.ItemTemplate>
<DataTemplate>
<Button Width="300" Height="120">
<Button.Content>
<StackPanel Orientation="Horizontal" Height="80" Width="80" Margin="0,0,0,0">
<StackPanel Orientation="Vertical" Height="80">
<TextBlock Text="{Binding Path=News_Title}" TextWrapping="Wrap" ></TextBlock>
<TextBlock Text="{Binding Path=News_Description}" TextWrapping="Wrap"></TextBlock>
<TextBlock Text="{Binding Path=Date_Start}" TextWrapping="Wrap"></TextBlock>
</StackPanel>
</StackPanel>
</Button.Content>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
Everything is fine here, just few things were making the code messy, I have fixed them.
See the updated grid now :)
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox Name="listBox1">
<ListBox.ItemTemplate>
<DataTemplate>
<Button>
<Button.Content>
<ScrollViewer HorizontalScrollBarVisibility="Auto" Height="80" Width="400">
<StackPanel Orientation="Horizontal" Margin="0,0,0,0">
<StackPanel Orientation="Vertical" Height="80">
<TextBlock Text="{Binding Path=News_Title}" TextWrapping="Wrap" ></TextBlock>
<TextBlock Text="{Binding Path=News_Description}" TextWrapping="Wrap"></TextBlock>
<TextBlock Text="{Binding Path=Date_Start}" TextWrapping="Wrap"></TextBlock>
</StackPanel>
</StackPanel>
</ScrollViewer>
</Button.Content>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Check this, it would help :)
I have a ComboBox that has an ItemTemplate with a CheckBox in it (read Dropdown CheckBoxList). I basically want to have a separate binding for the text in the combobox (both when an item is selected, and if an item isn't selected). I've tried a few different methods but either can't seem to get them to work with my setup, or can't find they have some issues. I've even tried a few mixes and matches of them. Usually I find they either don't work when an item isn't specifically selected (which could be possible if the user checks a few boxes then clicks out of the ComboBox), or aren't updating the text properly.
My xaml is this (the items of focus are the DataTemplates with the ComboBoxes in them):
<UserControl x:Class="BestClient.ucReportViewer"
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"
xmlns:local="clr-namespace:BestClient"
mc:Ignorable="d"
d:DesignHeight="315" d:DesignWidth="388" Background="#FFD7DFEC">
<UserControl.Resources>
<DataTemplate x:Key="datetime">
<StackPanel Orientation="Horizontal" Height="35">
<TextBlock Text="{Binding rfName}" Width="100" VerticalAlignment="Center" />
<DatePicker Tag="{Binding rfParameter}" SelectedDate="{Binding rfValues, Mode=TwoWay}" Width="200" VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="office">
<StackPanel Orientation="Horizontal" Height="35">
<TextBlock Text="{Binding rfName}" Width="100" VerticalAlignment="Center" />
<ComboBox x:Name="officeComboBox" Tag="{Binding rfParameter}" Width="200" ItemsSource="{Binding Path=DataContext.OfficeList, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Mode=TwoWay}" VerticalAlignment="Center">
<ComboBox.ItemTemplate>
<DataTemplate>
<CheckBox Tag="{Binding id}" IsChecked="{Binding isSelected}" Width="200" Content="{Binding value}" Margin="2" x:Name="CheckBox" Checked="OfficeCheckBox_Checked"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="carrier">
<StackPanel Orientation="Horizontal" Height="35">
<TextBlock Text="{Binding rfName}" Width="100" VerticalAlignment="Center" />
<ComboBox Tag="{Binding rfParameter}" Width="200" ItemsSource="{Binding Path=DataContext.CarrierList, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Mode=TwoWay}" VerticalAlignment="Center">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox Tag="{Binding id}" IsChecked="{Binding isSelected}" Width="200" Content="{Binding value}" Margin="2"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="defaultTemplate">
<StackPanel Orientation="Horizontal" Height="35">
<TextBlock Text="{Binding rfName}" Width="100" VerticalAlignment="Center" />
<TextBox Tag="{Binding rfParameter}" Width="200" VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
<local:ReportFilterTemplateSelector x:Key="ReportFilterTemplateSelector" />
</UserControl.Resources>
<Grid x:Name="ReportViewer">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="45"/>
<RowDefinition Height="*"/>
<RowDefinition Height="45"/>
</Grid.RowDefinitions>
<Viewbox Grid.Row="0" Grid.Column="0">
<TextBlock Margin="10" TextWrapping="Wrap" Text="Select a Report:"/>
</Viewbox>
<ComboBox Grid.Column="1" Margin="10" Grid.ColumnSpan="2" ItemsSource="{Binding ReportList}" DisplayMemberPath="Value" SelectedValuePath="Key" SelectedItem="{Binding SelectedReport}" VerticalContentAlignment="Center" />
<ListView x:Name="FilterList" Margin="10,0" Grid.Row="1" Grid.ColumnSpan="3" ItemTemplateSelector="{StaticResource ReportFilterTemplateSelector}" ItemsSource="{Binding reportFilters, Mode=TwoWay}" />
<Button Command="{Binding OpenReport}" Content="Open Report" Grid.Column="2" Margin="10" Grid.Row="2" VerticalAlignment="Stretch"/>
</Grid>
</UserControl>
Ideally, I'd like to bind the display text of the combobox with the OfficeListValues method in my ViewModel.
{Binding Path=DataContext.OfficeListValues, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}
Any help would be appreciated!