I am making a user control named MusicalNotationBox to store only 1 MusicalNotation (it's an obligatory for a MusicalNotationBox to have a non-null MusicalNotation object binded). And I need to bind the MusicalNotation property from the xaml (mvvm) to the one in my MusicalNotationBoxModelView.
MusicalNotationBox is a UserControl which used to visualize a particular MusicalNotation in a given collection.
So, I would like to be able to do it this way (with my ModelView as DataContext, ofc)
<ItemsControl ItemsSource={Binding ListOfMusicalNotations}>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" IsItemsHost="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemsTemplate>
<DataTemplate>
<c:MusicalNotationBox MusicalNotation={Binding MusicalNotation}/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
(Added ItemsControl tag to clarify the way how <MusicalNotationBox>, I think, should used.)
How to achieve this?
EXTRA :
This is my MusicalNotationBox.XAML (Just in case it's needed)
<UserControl x:Class="NumberedMusicalScoresUserControl.MusicalNotationBox"
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:NumberedMusicalScoresUserControl.MusicalNotationBoxProperties"
mc:Ignorable="d">
<UserControl.Resources>
<local:DotConverter x:Key="DotConverter"/>
<local:NoteConverter x:Key="NoteConverter"/>
<local:AccidentalConverter x:Key="AccidentalConverter"/>
<local:BackgroundConverter x:Key="BackgroundConverter"/>
</UserControl.Resources>
<UserControl.InputBindings>
<KeyBinding Key="OemPeriod" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="Blank"/>
<KeyBinding Key="D0" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="Rest"/>
<KeyBinding Key="D1" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="N1"/>
<KeyBinding Key="D2" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="N2"/>
<KeyBinding Key="D3" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="N3"/>
<KeyBinding Key="D4" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="N4"/>
<KeyBinding Key="D5" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="N5"/>
<KeyBinding Key="D6" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="N6"/>
<KeyBinding Key="D7" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="N7"/>
<KeyBinding Modifiers="Control" Key="P" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="SHARP"/>
<KeyBinding Modifiers="Control" Key="T" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="FLAT"/>
<KeyBinding Modifiers="Control" Key="OemPlus" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="OCTAVE+"/>
<KeyBinding Modifiers="Control" Key="OemMinus" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="OCTAVE-"/>
<KeyBinding Modifiers="Control" Key="OemPeriod" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="DOT+"/>
<KeyBinding Modifiers="Control" Key="OemComma" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="DOT-"/>
</UserControl.InputBindings>
<Grid x:Name="grid" Margin="10,5,10,5"
HorizontalAlignment="Center" VerticalAlignment="Center"
Background="{Binding IsSelectedOrFocused, Converter={StaticResource BackgroundConverter}, Mode=OneWay}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="1"
Text="b"
Visibility="{Binding Path=MusicalNotation.Accidental, Converter={StaticResource AccidentalConverter}, ConverterParameter=FL, Mode=OneWay}"
FontSize="15" FontFamily="CourierNew"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Path Grid.Column="1" Grid.Row="1" Stroke="Black" StrokeThickness="1" Stretch="Fill"
Visibility="{Binding Path=MusicalNotation.Accidental, Converter={StaticResource AccidentalConverter}, ConverterParameter=SP, Mode=OneWay}" >
<Path.Data>
<LineGeometry StartPoint="1,0" EndPoint="0,1">
<LineGeometry.Transform>
<RotateTransform CenterX="0" CenterY="0" Angle="30"/>
</LineGeometry.Transform>
</LineGeometry>
</Path.Data>
</Path>
<TextBlock Grid.Column="1" Grid.Row="1"
Text="{Binding Path=MusicalNotation.Note, Converter={StaticResource NoteConverter}, Mode=OneWay}"
FontSize="15" FontFamily="CourierNew"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="2.5,0,2.5,0"/>
<ItemsControl Grid.Column="1" Grid.Row="0"
ItemsSource="{Binding Path=MusicalNotation.Octave, Converter={StaticResource DotConverter}, ConverterParameter=TOP, Mode=OneWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel IsItemsHost="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Ellipse HorizontalAlignment="Center" VerticalAlignment="Top"
Margin="{Binding Margin}" Fill="{Binding Fill}"
Width="{Binding Diameter}" Height="{Binding Diameter}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl Grid.Column="1" Grid.Row="2"
ItemsSource="{Binding Path=MusicalNotation.Octave, Converter={StaticResource DotConverter}, ConverterParameter=BOT, Mode=OneWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel IsItemsHost="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Ellipse HorizontalAlignment="Center" VerticalAlignment="Bottom"
Margin="{Binding Margin}" Fill="{Binding Fill}"
Width="{Binding Diameter}" Height="{Binding Diameter}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl Grid.Column="2" Grid.Row="1"
ItemsSource="{Binding Path=MusicalNotation.Dot, Converter={StaticResource DotConverter}, ConverterParameter=RIGHT, Mode=OneWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" IsItemsHost="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Ellipse HorizontalAlignment="Left" VerticalAlignment="Center"
Margin="{Binding Margin}" Fill="{Binding Fill}"
Width="{Binding Diameter}" Height="{Binding Diameter}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
There is no need to create any additional properties. Your control is defined by only one viewmodel - just use the DataContextProperty(docs, example). In your case it is automatically set for each of the items - that's the behaviour of WPF. Just bind to any properties you need inside the usercontrol(its dataContext will be initialized automatically by WPF engine)
<ItemsControl ItemsSource="{Binding ListOfMusicalNotations}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" IsItemsHost="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemsTemplate>
<DataTemplate>
<c:MusicalNotationBox/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
If you want to learn about adding the properties read Add dependency property to control.
P.S.: Actually you can define your MusicalNotationBox not as a user control but as a template in resources:
<Resources>
<DataTemplate x:Key="MusicalNotationBox">
<TextBox Text="{Binding Name}"/>
</DataTemplate>
</Resources>
and use it like
<ItemsControl.ItemsTemplate>
<StaticResource x:Key="MusicalNotationBox"/>
</ItemsControl.ItemTemplate>
Related
I have a Popup in a DataTemplate of a GridView.
The DataTemplate has 2 buttons which opens up this Popup. This works perfectly well. But I see some erratic behaviour when the GridView is scrolled.
Popup opened
When GridView is scrolled the popup stays on the page
XAML Code for the GridView ItemTemplate
<DataTemplate x:Key="BrandItemTemplate">
<Grid HorizontalAlignment="Left" Width="180" Height="150" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="125"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Popup x:Name="PagesPopup" IsOpen="{Binding IsPagesPopupOpen}">
<Grid Width="180" Height="150" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<ListView ItemsSource="{Binding PopupList}" Padding="8" ScrollViewer.VerticalScrollBarVisibility="Hidden" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="12" FontWeight="Medium"/>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Height" Value="30"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<Image Source="/Assets/Icons/closeIcon.png" Height="25" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="8">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:CallMethodAction MethodName="CloseIconTapped" TargetObject="{Binding Mode=OneWay}"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
</Grid>
</Popup>
<Image Source="{Binding Image}" Stretch="Fill" AutomationProperties.Name="{Binding Title}" VerticalAlignment="Top"/>
<Border Visibility="{Binding IsNew,Converter={StaticResource BooleanToVisibilityConverter}}" VerticalAlignment="Top" Height="15" Width="25" Margin="5" Background="DarkGreen" CornerRadius="5" HorizontalAlignment="Right">
<TextBlock Text="NEW" FontSize="7" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold"/>
</Border>
<Grid Grid.Row="1" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" Height="25">
<TextBlock Text="{Binding Title}" FontSize="12" AutomationProperties.Name="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5 0 0 0" FontWeight="Medium"/>
<StackPanel Margin="0 -12 05 0" HorizontalAlignment="Right" VerticalAlignment="Top" Orientation="Horizontal">
<Image Source="/Assets/Icons/pagesIcon.png" Height="30">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding TappedCommand}" CommandParameter="PagesIcon"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
<Image Source="/Assets/Icons/refIcon.png" Height="30" Margin="10 0 0 0">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding TappedCommand}" CommandParameter="ReferencesIcon"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
That's expected behavior. PopUp intentionally has a highest z-index to display over all other elements. An easy fix, would be to get rid of the PopUp all together, and move {Binding IsPagesPopupOpen} down to the Grid inside it and use it on that Grid's Visibility with a Visibility Converter instead. Except it would need to be moved to the bottom so it would display above the contents.
To Explain better. Instead of how you have it, do this;
<DataTemplate x:Key="BrandItemTemplate">
<Grid HorizontalAlignment="Left" Width="180" Height="150" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="125"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Source="{Binding Image}" Stretch="Fill" AutomationProperties.Name="{Binding Title}" VerticalAlignment="Top"/>
<Border Visibility="{Binding IsNew,Converter={StaticResource BooleanToVisibilityConverter}}" VerticalAlignment="Top" Height="15" Width="25" Margin="5" Background="DarkGreen" CornerRadius="5" HorizontalAlignment="Right">
<TextBlock Text="NEW" FontSize="7" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold"/>
</Border>
<Grid Grid.Row="1" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" Height="25">
<TextBlock Text="{Binding Title}" FontSize="12" AutomationProperties.Name="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5 0 0 0" FontWeight="Medium"/>
<StackPanel Margin="0 -12 05 0" HorizontalAlignment="Right" VerticalAlignment="Top" Orientation="Horizontal">
<Image Source="/Assets/Icons/pagesIcon.png" Height="30">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding TappedCommand}" CommandParameter="PagesIcon"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
<Image Source="/Assets/Icons/refIcon.png" Height="30" Margin="10 0 0 0">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding TappedCommand}" CommandParameter="ReferencesIcon"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
</StackPanel>
</Grid>
<!-- We move it down here to ensure it appears over everything and without having to set a fixed z-index, and add your visibility converter -->
<Grid Width="180" Height="150" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}"
Visibility="{Binding IsPagesPopupOpen, Converter={StaticResource BooleanToVisibilityConverter}}">
<ListView ItemsSource="{Binding PopupList}" Padding="8" ScrollViewer.VerticalScrollBarVisibility="Hidden" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="12" FontWeight="Medium"/>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Height" Value="30"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<Image Source="/Assets/Icons/closeIcon.png" Height="25" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="8">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:CallMethodAction MethodName="CloseIconTapped" TargetObject="{Binding Mode=OneWay}"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
</Grid>
</Grid>
</DataTemplate>
I am developing an app on Windows 8.1 and using MVVM Light Framework.
So this is the partial XAML on one of my views.
Basically, I have a ViewModel_Queue which I contains a command that I need to call when a button is pressed inside the FlyoutMenu. My problem is, how will I be able to call this ViewModel_Queue where inside a binding ItemControl which is inside in another ItemControl which is then binded as well?
<ItemsControl Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" ItemsSource="{Binding Person.Child}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Border Background="#FF808080" Width="200">
<Grid>
<TextBlock Text="{Binding Name}" FontSize="15" Foreground="White" Margin="10" VerticalAlignment="Center" FontWeight="Bold" />
</Grid>
</Border>
<ItemsControl ItemsSource="{Binding Counters}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Width="120" Background="#0F000000">
<!-- get header color -->
<Border Height="20">
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding DataContext.Queue.Command_DoSomething, ElementName=mainGrid}" />
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Border>
<TextBlock Text="{Binding Total}" FontSize="15" Foreground="Black" Margin="10" TextAlignment="Center" x:Name="outcomeCounterCell" Tapped="outcomeCounterCell_Tapped">
<FlyoutBase.AttachedFlyout>
<Flyout Placement="Bottom" x:Name="MenuFlyout" FlyoutPresenterStyle="{StaticResource FlyoutPresenterRoundStyle}">
<Grid Width="200">
<StackPanel>
<Border Background="#7FFF0000" CornerRadius="8,8,0,0">
<TextBlock Text="Update" TextAlignment="Center" FontSize="15" Margin="0,10" Foreground="White" />
</Border>
<TextBlock Text="{Binding Total}" TextAlignment="Center" FontSize="30" Margin="0,20,0,0" Foreground="Black" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,20">
<Border BorderThickness="1" BorderBrush="#7F000000" CornerRadius="5,0,0,5" Width="50">
<TextBlock Text=" - " TextAlignment="Center" FontSize="20" FontWeight="Bold" Margin="0,5" />
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding Command_Decrement}" CommandParameter="{Binding }" />
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Border>
<Border BorderThickness="1" BorderBrush="#7F000000" CornerRadius="0,5,5,0" Width="50">
<TextBlock Text=" + " TextAlignment="Center" FontSize="20" FontWeight="Bold" Margin="0,5" />
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding Command_Increment}" CommandParameter="{Binding }" />
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Border>
</StackPanel>
</StackPanel>
</Grid>
</Flyout>
</FlyoutBase.AttachedFlyout>
</TextBlock>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I'm currently on a C# WPF project and I display images in several rows (the blue heads)
The problem is that I can't select any of this items, I am using a MVVM pattern so the code behind must be as light as possible and I have to do eveything I can in the xaml file.
So I would like to be able to select images by clicking on them, I've tried to use event like "IsMouseOver" but I was only able to change the whole wrappanel and not single items.
Here is the code I use:
<Grid Grid.Row="1" Height="Auto">
<Grid.Background>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="#252525" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Grid.Background>
<ItemsControl Background="Transparent" Foreground="AntiqueWhite" BorderBrush="Transparent"
HorizontalContentAlignment="Stretch" ItemsSource="{Binding Source={x:Static Context:Session.CurrentSession}, Path=CurrentProject.Models}">
<ItemsControl.ContextMenu>
<ContextMenu>
<MenuItem Header="Delete" Command="{Binding DeleteModel3DCommand}" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=ContextMenu}, Path=PlacementTarget.SelectedItem}"/>
</ContextMenu>
</ItemsControl.ContextMenu>
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding SelectModel3DCommand}" CommandParameter="{Binding Path=SelectedItem, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBox}}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="/McKineap;component/Resources/Images/logo-mckineap.png" Height="100"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
I will take any suggestions you could have about the proper way to define a select event in my wrappanel, thanks for your time !
ItemsControl items wasn't meant to be selectable, that's why selection events and selection features are missing, more specifically ItemsControl doesn't inherit from Selector class which allow that, on the other hand ListBox and ListView do.
Change the ItemsControl to a ListView and you should be able to implement selection:
<ListView SelectionMode="Single" Background="Transparent" Foreground="AntiqueWhite" BorderBrush="Transparent"
HorizontalContentAlignment="Stretch" ItemsSource="{Binding Items}">
Edit
don't forget to disable the HorizontalScrollBar in the ListView in-order for the WrapPanel to work
<Grid Grid.Row="1" Height="Auto">
<Grid.Background>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="#252525" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Grid.Background>
<ListView SelectionMode="Single" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Background="Transparent" Foreground="AntiqueWhite" BorderBrush="Transparent"
HorizontalContentAlignment="Stretch" ItemsSource="{Binding Items}">
<ListView.ContextMenu>
<ContextMenu>
<MenuItem Header="Delete" Command="{Binding DeleteModel3DCommand}" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=ContextMenu}, Path=PlacementTarget.SelectedItem}"/>
</ContextMenu>
</ListView.ContextMenu>
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding SelectModel3DCommand}" CommandParameter="{Binding Path=SelectedItem, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBox}}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<ListView.ItemTemplate>
<DataTemplate>
<Image Source="refresh.png" Height="100"/>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>
I try to do the same way but with a ListBox instead of a ListView and it works for me.
<Grid Grid.Row="1" Height="Auto">
<Grid.Background>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="#252525" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Grid.Background>
<ListBox Name="ModelsListBox" Background="Transparent" Foreground="AntiqueWhite" BorderBrush="Transparent" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
HorizontalContentAlignment="Stretch" ItemsSource="{Binding Source={x:Static Context:Session.CurrentSession}, Path=CurrentProject.Models}">
<ListBox.ContextMenu>
<ContextMenu>
<MenuItem Header="Delete" Command="{Binding DeleteModel3DCommand}" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=ContextMenu}, Path=PlacementTarget.SelectedItem}"/>
<MenuItem Header="Rename"/>
</ContextMenu>
</ListBox.ContextMenu>
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding SelectModel3DCommand}" CommandParameter="{Binding Path=SelectedItem, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBox}}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,5,0" HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Source="/McKineap;component/Resources/Images/logo-mckineap.png" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="55" Width="50"/>
<ListBoxItem Grid.Column="1" Content="{Binding NameWithoutExtension}" HorizontalAlignment="Stretch" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
I am using the MVVM pattern which is really new to me. I click 'Add Title' and at the moment the textbox shows, and same happens when I click 'Add Question'. The thing that is wrong is that they show up exactly below each other. When they click 'Add Title' I want the text boxes to show with a margin from the left of '20' and then when I click 'Add Question' I want the margin to show as '40'. They also need to have a space of '20' between all text boxes so there not directly underneath the textbox.
XAML CODE:
<Grid>
<Button Content="Add Question" Command="{Binding AddQuestionCommand}" Margin="615,19,179,724" />
<Button Content="Add Title" Command="{Binding AddTitleCommand}" Margin="474,19,320,724" />
<StackPanel>
<ItemsControl ItemsSource="{Binding Title}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl ItemsSource="{Binding Question}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Grid>
I have tried to add the Padding property but it makes the text boxes bigger in height, and also I have tried the Margin but all text boxes are created dynamically.
Try this
adjust margin according to your requirement
<Grid>
<Button Content="Add Question" Command="{Binding AddQuestionCommand}" Margin="615,19,179,724" />
<Button Content="Add Title" Command="{Binding AddTitleCommand}" Margin="474,19,320,724" />
<StackPanel>
<ItemsControl ItemsSource="{Binding Title}">
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="FrameworkElement.Margin" Value="20,20,0,0"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl ItemsSource="{Binding Question}">
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="FrameworkElement.Margin" Value="40,20,0,0"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Grid>
A good way to define appearance structure is using the Grid control, specifying a row and a column.
Try something like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ItemsControl Grid.Column="0" ItemsSource="{Binding Title}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl Grid.Column="1" ItemsSource="{Binding Question}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I'm working with a WPF application to manage our main software's versions. This application has a ListBox, and I set the ListBox.DataTemplate to each ListBoxItem has a Label and 2 Buttons inside it.
The following code shows my ListBox code:
<ListBox Grid.Row="0" SelectedItem="{Binding Path=SelectedVersion}" ItemsSource="{Binding Path=PatchList, Mode=TwoWay}" d:DataContext="{d:DesignInstance {x:Type ViewModels:MainWindowViewModel}}"
SelectionMode="Single" IsSynchronizedWithCurrentItem="True" Margin="1" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectedIndex="0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="{Binding Path=VersionNumber}" HorizontalAlignment="Left" Foreground="#FFFFFF" FontSize="19" />
<Button Grid.Column="1" Width="25" Height="25" Template="{StaticResource OnMouseOverListBoxitem}" ToolTip="Release" Command="{Binding Path=DataContext.ReleaseVersionCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}" HorizontalAlignment="Right" d:DataContext="{d:DesignInstance {x:Type ViewModels:MainWindowViewModel}}" CommandParameter="{Binding}">
<ContentControl Template="{StaticResource Release}" />
</Button>
<Button Grid.Column="2" Width="25" Height="25" Template="{StaticResource OnMouseOverListBoxitem}" ToolTip="Trash" Command="{Binding Path=DataContext.DeleteVersionCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}" HorizontalAlignment="Right" d:DataContext="{d:DesignInstance {x:Type ViewModels:MainWindowViewModel}}" CommandParameter="{Binding}">
<ContentControl Template="{StaticResource Trash}" />
</Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The problem is that I would like to show the label and the buttons ONLY for the Selected ListBoxItem.
By the way, I'm using bindings, and if you see some different code it's because I'm also using MahApp.Metro for Windows8-style.
Any suggestions?
Thank you.
try this one.
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter1" />
</Window.Resources>
<Grid>
<ListBox ItemsSource="{Binding Fnts}" Grid.Row="0" SelectedItem="{Binding Path=SelectedVersion}"
SelectionMode="Single" IsSynchronizedWithCurrentItem="True" Margin="1" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectedIndex="0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding}" />
<Button Content=" X " Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}, Path=IsSelected, Converter={StaticResource BooleanToVisibilityConverter1}}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>