Controls in datatemplate not receiving input interaction - wpf

I have a DataTemplate for a class as follows:
<DataTemplate DataType="{x:Type model:CalendarEvent}">
<Border BorderBrush="Black"
BorderThickness="1">
<Grid Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBox Width="80"
Margin="0 0 20 0"
HorizontalAlignment="Right" />
<TextBlock Grid.Row="0"
FontSize="36"
Text="{Binding EventName}" />
<TextBlock Grid.Row="1">
<Run Text="From " /><Run Text="{Binding EventStartDate}" />
<Run Text=" till " /><Run Text="{Binding EventEndDate}" /></TextBlock>
</Grid>
</Border>
</DataTemplate>
After using the template as an ItemTemplate of an ItemsControl, I can't interact with the controls in it. When I try to click on any of the controls (since it is an item in a list), the whole ItemsControl is focused. In fact, I put the TextBox there to verfiy that the template is not receiving interactions. My original template has a Button (which was not receiving any Click event, either).
I should point out that the template is part of a plugin in a MEF application. Could that be the reason? In the host project, controls in a DataTemplate are working.
EDIT
<DataTemplate DataType="{x:Type model:CalendarEvent}">
<Border BorderBrush="Black"
BorderThickness="1">
<Grid Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
FontSize="36"
Text="{Binding EventName}" />
<TextBlock Grid.Row="1">
<Run Text="From " /><Run Text="{Binding EventStartDate}" />
<Run Text=" till " /><Run Text="{Binding EventEndDate}" /></TextBlock>
<TextBox Width="80"
Margin="0 0 20 0"
HorizontalAlignment="Right" />
</Grid>
</Border>
</DataTemplate>
Moving the TextBox below the TextBlocks did it. It was obscured by them since they are automatically filling the width of the Grid.
I could also have set fixed widths for the TextBlocks.

Related

Make ScrollViewer fill dynamic area

In the example below I cannot get the ScrollViewer to fill the space available, The height is unknown due to the dynamic content above but is there no way it can fill the space available instead of over running?
<Grid x:Name="Main" Height="200" MaxHeight="200">
<StackPanel>
<Grid x:Name="MainContent" Height="170" MaxHeight="170">
<StackPanel>
<TextBlock FontSize="24" Text="Dynamic data "/>
<TextBlock FontSize="24" Text="height "/>
<TextBlock FontSize="24" Text="unknown... "/>
<Grid x:Name="Results" Background="Red">
<ScrollViewer>
<StackPanel>
<TextBlock FontSize="24" Text="Result set... 0"/>
<TextBlock FontSize="24" Text="Result set... 1"/>
<TextBlock FontSize="24" Text="Result set... 2"/>
<TextBlock FontSize="24" Text="Result set... 3"/>
</StackPanel>
</ScrollViewer>
</Grid>
</StackPanel>
</Grid>
<Grid x:Name="Nav">
<Button HorizontalAlignment="Left" Content="Back"/>
<Button HorizontalAlignment="Right" Content="Forward"/>
</Grid>
</StackPanel>
</Grid>
in MainContent Grid use DockPanel instead of StackPanel with LastChildFill=True, something like this:
<Grid x:Name="MainContent" Height="170" MaxHeight="170">
<DockPanel LastChildFill="True">
<TextBlock DockPanel.Dock="Top" FontSize="24" Text="Dynamic data "/>
<TextBlock DockPanel.Dock="Top" FontSize="24" Text="height "/>
<TextBlock DockPanel.Dock="Top" FontSize="24" Text="unknown... "/>
<Grid x:Name="Results" Background="Red">
<ScrollViewer>
<StackPanel>
<TextBlock FontSize="24" Text="Result set... 0"/>
<TextBlock FontSize="24" Text="Result set... 1"/>
<TextBlock FontSize="24" Text="Result set... 2"/>
<TextBlock FontSize="24" Text="Result set... 3"/>
</StackPanel>
</ScrollViewer>
</Grid>
</DockPanel>
</Grid>
then last element of DockPanel will adjust itself to available space
I solved it by adding another element for the Scrollviewer's Height to bind:
<grid Grid.row="3" x:Name="Mirror">
</grid>
<ScrollViewer Grid.row="3" Height="{Binding ElementName=uxMirror,XPath=ActualHeight}">
</ScrollViewer>
Firstly your layout is kind of a mess. Why do you need to put a StackPanel as the only child of a Grid. For the Rows? Use RowDefinitions and ColumnDefinitions when dealing with Grid
From my understanding of your layout, you can pretty much do everything you need with just a Grid and a DockPanel. When dealing with layout containers, Aim to get your layout with the "least" number of containers as "efficiently" possible. Even if it aint any real performance benefit, it helps enormously when going through someone else's code to not have redundant nesting
<Grid x:Name="Main">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
FontSize="24"
Text="Dynamic data " />
<TextBlock Grid.Row="1"
FontSize="24"
Text="height " />
<TextBlock Grid.Row="2"
FontSize="24"
Text="unknown... " />
<ScrollViewer Grid.Row="3"
Background="Red">
<StackPanel>
<TextBlock FontSize="24"
Text="Result set... 0" />
<TextBlock FontSize="24"
Text="Result set... 1" />
<TextBlock FontSize="24"
Text="Result set... 2" />
<TextBlock FontSize="24"
Text="Result set... 3" />
</StackPanel>
</ScrollViewer>
<DockPanel x:Name="Nav"
Grid.Row="4"
LastChildFill="False">
<Button Content="Back"
DockPanel.Dock="Left" />
<Button Content="Forward"
DockPanel.Dock="Right" />
</DockPanel>
</Grid>
This should give you everything your looking for. If you need to restrict Height dimensions with static values, Add them in accordingly when absolutely needed.
As for the "Nav" DockPanel, yes you can using HorizontalAlignment get your Button's positioned Left and Right and thereby not use the DockPanel, but that would go against the concept of trying to keep "one" item in a Grid cell and hence the DockPanel usage.

Can't stretch a control in a stackpanel

Here is a piece of my control code:
<telerik:RadWindow>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="2" HorizontalAlignment="Stretch" Background="Blue">
<Grid
x:Name="DetailsGrid">
<prismvm:DataTemplateSelector
Content="{Binding NewTemplate}">
<prismvm:DataTemplateSelector.Resources>
<DataTemplate
x:Key="EmailMessageTemplate">
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" Background="Red">
<TextBlock Text="Name: "/>
<TextBox Text="{Binding Name,Mode=TwoWay}" HorizontalAlignment="Stretch" Background="Green"/>
<TextBlock Text="Subject: "/>
<TextBox Text="{Binding EmailSubject,Mode=TwoWay}" HorizontalAlignment="Stretch"/>
<TextBlock Text="Body: "/>
<TextBox Text="{Binding Body,Mode=TwoWay}" TextWrapping="Wrap"/>
</StackPanel>
</DataTemplate>
<DataTemplate
x:Key="SmsMessageTemplate">
<StackPanel Orientation="Vertical">
<TextBlock Text="Subject: "/>
<TextBox Text="{Binding Name,Mode=TwoWay}"/>
<TextBlock Text="Sms body: "/>
<TextBox Text="{Binding Body,Mode=TwoWay}"/>
</StackPanel>
</DataTemplate>
</prismvm:DataTemplateSelector.Resources>
</prismvm:DataTemplateSelector>
</Grid>
</StackPanel>
</telerik:RadWindow>
The problem is that at start the width of the textboxes is very little and I need to have width the same as grid.
How can I do it?
EDIT
I've updated my xaml, and now every element looks like at the picture:
I've added
HorizontalContentAlignment="Stretch"
to
<prismvm:DataTemplateSelector
Content="{Binding NewTemplate}">
and now it works fine.
A StackPanel does not stretch to fit its parent container by default (in this case column 0 of the Grid, or rather the entire grid).
Try this on the outer StackPanel:
<StackPanel Grid.Row="2" HorizontalAlignment="Stretch">
Then the child TextBoxes have something to stretch to.
When in doubt, set different background colours on your various containers so you can see how much room they take up at runtime.

Making a WPF TextBox be only as wide as the room it has but expand when the space expands?

Notice how the textbox expands to the right until it has enough horizontal space to fit the content? Well I'd like it to not expand and fit the text with the space it has in the window.
If the windows expands, then the Grid.Column it's in will expand, but the textbox itself should expand to fit. Simple enough?
Any suggestions? This is my first foray into WPF and so far it's been pretty sleek.
Edit: Here's my XAML markup:
<Window x:Class="GameLenseWpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="450" Width="350" MinHeight="450" MinWidth="350">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.15*" />
<RowDefinition />
</Grid.RowDefinitions>
<Image Grid.Row="0" Stretch="Fill" Source="Image/topBarBg.png" />
<StackPanel Orientation="Horizontal" Grid.Row="0">
<TextBlock Text="Platform"
Foreground="White"
FontFamily="Georgia"
FontSize="15"
Margin="10"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<ComboBox x:Name="cmbPlatform"
Margin="10"
FontFamily="Georgia"
FontSize="15"
MinHeight="30"
MinWidth="140"
VerticalAlignment="Center"
VerticalContentAlignment="Center" SelectionChanged="cmbPlatform_SelectionChanged">
<ComboBoxItem>All Platforms</ComboBoxItem>
<ComboBoxItem>Playstation 3</ComboBoxItem>
<ComboBoxItem>XBox 360</ComboBoxItem>
<ComboBoxItem>Wii</ComboBoxItem>
<ComboBoxItem>PSP</ComboBoxItem>
<ComboBoxItem>DS</ComboBoxItem>
</ComboBox>
</StackPanel>
<Image x:Name="imgAbout" Grid.Row="0" Source="Image/about.png"
Height="16" HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0 0 10 0" />
<ListBox Grid.Row="1" x:Name="lstGames" Background="#343434" Padding="5">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="120" Margin="0 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Border BorderBrush="#202020" BorderThickness="5" CornerRadius="4" Panel.ZIndex="0">
<Image Grid.Row="0" Grid.Column="0" Source="{Binding ImageUrl}" Stretch="Fill"/>
</Border>
<StackPanel Grid.Row="0" Grid.Column="1" Margin="12 0 0 0">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Title:" FontFamily="Arial" Foreground="White"/>
<TextBlock Text="{Binding Title}" FontFamily="Arial" Foreground="White" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Release Date:" FontFamily="Arial" Foreground="White" />
<TextBlock Text="{Binding ReleaseDate}" FontFamily="Arial" Foreground="White" />
</StackPanel>
<TextBlock Text="Synopsis" FontFamily="Arial" Foreground="White" />
<TextBox Background="#454545" Text="{Binding Synopsis}" MinHeight="76" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
To get a TextBox to wrap inside a ListBox you can make the following changes:
Set the content of the listbox equal to the width of the listbox using: HorizontalContentAlignment="Stretch".
Disable the horizontal scrollbar of the listbox to prevent listbox from getting the desired size of the controls and preventing the word wrap in your textbox.
Set TextWrapping="Wrap" in the TextBox
Here is the XAML:
<ListBox Grid.Row="1" x:Name="lstGames" Background="#343434" Padding="5"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
HorizontalContentAlignment="Stretch" >
</ListBox>
<TextBox Text="{Binding Synopsis}" MinHeight="76" TextWrapping="Wrap" />
I believe you need to set the Margin property of your textbox control. In the designer, you can see little circles around each textbox (and each control when you focus them, for that matter). Click the little circle on the right side of the textbox, to make that control grow marginally with the available space in the current layout control (by clicking the circle, the margin will be added into the XAML).
I don't know if in your image you've already adjusted the window size, but with that image it appears you'll also need to set the width for your textbox.
Does this help?

Silverlight/WP7: I want to place an Button after the Listbox element which are data bound

I am fairly new to silverlight. I am developing on the windows phone platform.
I want to place a button at the end of the listbox entries which will be bound to data from the webservice (I am using a listbox template)
List item 1
List item 2
List item 3
List item 4
List item 5
List item 6
List item 7
List item 8
..Button..
I tried number of things of using grid/stackpanel etc to host the button and all my solutions place the button at the bottom of my screen instead of bottom of all the listbox entries which might span multiple screens.
XAML file I have is below. I want to add a button below the "LBoxItems"
<Grid x:Name="LayoutRoot"
Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="ads" >
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Margin="24,24,0,12"
x:Name="SearchTitle">
<StackPanel Orientation="Horizontal">
<TextBlock FontWeight="Bold"
FontSize="{StaticResource PhoneFontSizeLarge}"
Text="{Binding Location}" />
<TextBlock FontSize="{StaticResource PhoneFontSizeLarge}"
Text=" > " />
<TextBlock FontWeight="Bold"
FontSize="{StaticResource PhoneFontSizeLarge}"
Text="{Binding Category}" />
</StackPanel>
<TextBlock FontSize="{StaticResource PhoneFontSizeMedium}"
Text="{Binding Converter={StaticResource SearchHistoryItemSubTitleConverter}}" />
</StackPanel>
</Grid>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentGrid"
Grid.Row="2">
<ListBox x:Name="LBoxItems"
HorizontalAlignment="Left"
Margin="24, 0"
SelectionChanged="LBoxItems_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="{StaticResource PhoneTouchTargetOverhang}" >
<TextBlock FontSize="{StaticResource PhoneFontSizeMediumLarge}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Foreground="{StaticResource PhoneAccentBrush}"
Text="{Binding Title.Text}" TextWrapping="Wrap" Margin="-4,20,0,0">
</TextBlock>
<TextBlock Text="{Binding PublishDate, Converter={StaticResource ItemPublishDateConverter}}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
<l:SpinnerControl x:Name="SpinnerControl"
Width="55"
Height="55"
Grid.RowSpan="2" />
<TextBlock x:Name="TxtNoResultsMessage"
FontSize="{StaticResource PhoneFontSizeLarge}"
Text="No results found"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Grid.RowSpan="2"
Visibility="Collapsed" />
</Grid>
You could use a ScrollViewer:
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="800"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<ListBox Grid.Row="0">
</ListBox>
<Button Grid.Row="1" Height="30" Content="Test"></Button>
</Grid>
</ScrollViewer>
Simply divide the Grid inside into two rows, the second one being for the Button.
For your specific case it would be:
<Grid x:Name="ContentGrid"
Grid.Row="2">
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="600"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<ListBox x:Name="LBoxItems"
HorizontalAlignment="Left"
Margin="24, 0"
SelectionChanged="LBoxItems_SelectionChanged" Grid.Row="0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="{StaticResource PhoneTouchTargetOverhang}" >
<TextBlock FontSize="{StaticResource PhoneFontSizeMediumLarge}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Foreground="{StaticResource PhoneAccentBrush}"
Text="{Binding Title.Text}" TextWrapping="Wrap" Margin="-4,20,0,0">
</TextBlock>
<TextBlock Text="{Binding PublishDate, Converter={StaticResource ItemPublishDateConverter}}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Content="Sample" Height="30" Grid.Row="1" />
</Grid>
</ScrollViewer>
</Grid>
Of course, you can set the appropriate height depending on your situation.
What you want to do, really is to mix and match different items in the DataTemplate. If you're not really happy with how the other solutions work out I might consider adding a button to the datatemplate, but set its visibility to collapsed. Then for the very last entry, set its visibility to visible.
Either way you are in for a bit of a hack, but this way the button is in your list box. If all the button events point to the same handler, and only one is visible, you should be good to go.
I had the same problem and tried using the ScrollViewer approach, however I couldn't get rid of the 'stuck scrolling' issue until I disabled the vertical scrollbar on the listbox. Maybe this will help others too.

Wpf Bind View to ViewModel add to wpf window

I have a view that contains a ItemsControl with some textblocks inside to display the name and other information. in my window I am adding the view to the window as follows and in the code behind of the window i am binding the datacontext of the view to the view model in the MainWindow Loaded event as follows ViewOwnerSideBar.DataContext = viewModel The application compiles but when I run it I dont get data? I checked my viewmodel and I do have data in my collection that I am returning. Does anyone have any good examples of how to do this. I am going to have a sidebar view and a main view on the right displaying the details of the owner.
This is my View
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Resources/ColorsAndBrushes.xaml"/>
<ResourceDictionary Source="/Resources/DefaultStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<DockPanel >
<ScrollViewer VerticalScrollBarVisibility="Auto" >
<ItemsControl Width="250"
VerticalAlignment="Stretch"
BorderThickness="0"
ItemsSource="{Binding Path=AllOwners}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="2">
<Border Margin="2 2 0 0"
CornerRadius="4"
Background="Gray"
Opacity=".5" />
<Border BorderBrush="{StaticResource redBrush}"
BorderThickness="2"
CornerRadius="4"
Background="White"
Margin="0 0 2 2"
Padding="3">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.ColumnSpan="2"
FontWeight="Bold"
Text="{Binding FullName}" />
<TextBlock Grid.Row="1"
Text=" FirstName: " />
<TextBlock Grid.Row="1"
Grid.Column="1"
Text="{Binding FirstName}" />
<TextBlock Grid.Row="2"
Text=" Email: " />
<TextBlock Grid.Row="2"
Grid.Column="1"
Text="{Binding Email}" />
</Grid>
</Border>
<Button Style="{StaticResource openButton}" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</DockPanel>
This is my window
<DockPanel>
<v:HeaderTopBar DockPanel.Dock="Top"></v:HeaderTopBar>
<!--<uc:SearchBar DockPanel.Dock="Top" />-->
<StatusBar DockPanel.Dock="Bottom">
<StatusBarItem DockPanel.Dock="Right">
<Slider x:Name="zoomSlider"
Width="125"
Value="1"
Minimum=".5"
Maximum="2" />
</StatusBarItem>
<StatusBarItem DockPanel.Dock="Right">
<TextBlock>Zoom:</TextBlock>
</StatusBarItem>
<StatusBarItem>
<TextBlock Text="{Binding StatusText}" />
</StatusBarItem>
</StatusBar>
<Expander DockPanel.Dock="Left"
ExpandDirection="Right"
IsExpanded="True"
BorderThickness="0 1 1 1"
BorderBrush="Gray"
Margin="0 2 0 0"
Padding="2">
<Expander.Header>
<TextBlock Text="Contacts"
FontSize="14"
FontWeight="Bold">
<TextBlock.LayoutTransform>
<RotateTransform Angle="90" />
</TextBlock.LayoutTransform>
</TextBlock>
</Expander.Header>
<v:OwnerSideBar/>
</Expander>
<TabControl x:Name="tabs"
Grid.Column="2"
Margin="5 0">
<TabControl.LayoutTransform>
<ScaleTransform ScaleX="{Binding ElementName=zoomSlider,
Path=Value}"
ScaleY="{Binding ElementName=zoomSlider,
Path=Value}" />
</TabControl.LayoutTransform>
</TabControl>
</DockPanel>
Firstly, ensure that the AllOwners collection you are binding to is an ObservableCollection.
Also, check the Output window in Visual Studio when executing, look for First chance exceptions being caught. This will be a clue as to where your binding problem will be.
I like to put a textblock on the View bound to the Items.Count property on the ItemsControl so that you can see if it is binding and not rendering anything or not binding correctly.
Give the ItemsControl a name, then put a textblock in:
<TextBlock Text="{Binding ElementName=itemControl1,Path=Items.Count}/>
This might be something you already looked at, but you might have a binding typo, did you check your output window to see if you get any trace messages?
And I guess I'm blind but I don't see where your usercontrol is in the xaml of the second entry.

Resources