I am trying to get a custom UserControl to render in a ListBox, but nothing is being rendered. I came across this question and solution which works for the simple example, but my situation is a little different. I have a PersonControl for a Person object and a CoupleControl that can reference two PersonControl controls.
I've tried a couple things in the CoupleControl which haven't worked. I commented out one of the ways:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Control:PersonControl Grid.Column="0"
x:Name="LeftPerson" />
<Control:PersonControl Grid.Column="1"
x:Name="RightPerson" />
<!-- This is how I'd like to do it in case I create other controls
I wish to replace the PersonControls (e.g. AnimalControl) -->
<!--<UserControl Grid.Column="0"
x:Name="LeftPerson" />-->
<!--<UserControl Grid.Column="1"
x:Name="RightPerson" />-->
</Grid>
The relevant WPF snippet for the list box:
<ListBox Grid.Row="1"
ItemsSource="{Binding Persons}">
<ListBox.ItemTemplate>
<DataTemplate>
<Control:CoupleControl />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In the code-behind:
public ObservableCollection<CoupleControl> Persons { get; private set; }
Person joe = new Person("Joe", "Smith", Person.SexType.Male);
Person jane = new Person("Jane", "Smith", Person.SexType.Female);
PersonControl joeControl = new PersonControl();
PersonControl janeControl = new PersonControl();
joeControl.DataContext = joe;
janeControl.DataContext = jane;
CoupleControl coupleControl = new CoupleControl();
coupleControl.LeftPerson.DataContext = joe;
coupleControl.RightPerson.DataContext = jane;
//coupleControl.LeftPerson.Content = joeControl; // Also doesn't work
//coupleControl.RightPerson.Content = janeControl; // Also doesn't work
Persons.Add(coupleControl);
Can someone help me get the CoupleControl to render in a ListBox?
Your approach is a bit too code-heavy for my taste, why not set DataContext in XAML?
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Control:PersonControl DataContext="{Binding LeftPerson}" />
<Control:PersonControl DataContext="{Binding RightPerson}" Grid.Column="1" />
</Grid>
Or maybe even drop UserControls altogether if they are not so complex? In this case using DataTemplates can be faster and simpler. Say we defined templates for Person and Couple in Window resources (Couple is just a class with LeftPerson and RightPerson properties):
<Window.Resources>
<DataTemplate x:Key="personTemplate" DataType="TestWPF:Person">
<Border BorderThickness="1" BorderBrush="Green" CornerRadius="5">
<StackPanel>
<TextBlock Text="{Binding FirstName}" />
<TextBlock Text="{Binding LastName}" Margin="3,0,0,0" />
</StackPanel>
</Border>
</DataTemplate>
<DataTemplate x:Key="coupleTemplate" DataType="TestWPF:Couple">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ContentControl Content="{Binding LeftPerson}"
ContentTemplate="{StaticResource personTemplate}" />
<ContentControl Content="{Binding RightPerson}"
ContentTemplate="{StaticResource personTemplate}" Grid.Column="1" />
</Grid>
</DataTemplate>
</Window.Resources>
Then you set ItemTemplate for your ListBox:
<ListBox Grid.Row="1" ItemsSource="{Binding Persons}" ItemTemplate="{StaticResource coupleTemplate}" />
This way you can make some more templates for the types you need and just set them in ListBox in one single line.
Related
I have a Grid control defined in WPF...
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
Further down, I have defined an ItemsControl...
<ItemsControl Name="EntitlementsList" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ItemsSource="{Binding Entitlements, Mode=TwoWay}"
Margin="0 10 0 3" AlternationCount="2">
<ItemsControl.Template>
...
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type Model:Entitlement}">
<Grid Margin="0 0 10 0" >
<Grid.Style>
...
</Grid.Style>
<Grid.ColumnDefinitions>
...
</Grid.ColumnDefinitions>
<ToggleButton Grid.Column="0"
HorizontalAlignment="Left" Margin="0 2 0 0"
VerticalAlignment="Bottom"
Style="{DynamicResource NotesToggleButton}"
CommandParameter="{Binding}"
Command="{Binding Path=DataContext.GetEntitlementDetails,
RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type ItemsControl}}}" />
...
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
This displays my Entitlements correctly.
The command for the ToggleButton is defined as...
private RelayCommand _getEntitlementDetails;
public RelayCommand GetEntitlementDetails
{
get
{
return _getEntitlementDetails ?? (_getEntitlementDetails = new RelayCommand(x =>
{
CurrentEntitlement = x as Entitlement;
}));
}
}
Then I have another ItemsControl that is collapsed until CurrentEntitlement is set...
<ItemsControl Name="ProductList" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="5" Height="150"
HorizontalAlignment="Stretch" BorderBrush="Transparent"
ItemsSource="{Binding ContextManager.CurrentContext.CurrentEntitlement.ProductList, Mode=TwoWay}"
Visibility="{Binding ContextManager.CurrentContext.CurrentEntitlement,
Converter={StaticResource NullVisibilityConverter}}">
<ItemsControl.Template>
...
</ItemsControl>
My item source is ProductList inside the Entitlements class...
private ObservableCollection<Product> _productList;
public ObservableCollection<Product> ProductList
{
get { return _productList; }
set
{
_productList = value;
OnPropertyChanged();
}
}
...where all the properties of "Product" raise OnPropertyChanged.
Now, I have been fully expecting my button to execute the command to set the CurrentEntitlement, make my second ItemsControl visible within the grid and display the ProductList, and stepping through the code shows that CurrentEntitlement does get set with a valid instance with items in the ProductList...but I still see nothing on the UI. I have been searching for a solution for 3 days, and I apologize if this is a duplicate question, but I am at my wit's end!
I can't see the issue. What am I doing wrong here?
Visual Studio 2015 Community, targeting 4.5, running on Windows 7 Enterprise SP1.
Thanks in advance!
I ended up finally figuring it out. There was a binding to some data that was written incorrectly that invalidated the second ItemsControl.
I have changed the Background and Foreground Color of the MediaElement's MediaTransportControls using this solution UWP custom media controls not working
Now I want to
change the place of the 'TimeRemainingElement' and put it on the left of the Slider.
make the time show as 00:00 not 0:00:00
Is it possible to do that? Any idea how to do it?
1 more question: Is it possible to remove the "Cast to Device" icon/option from the MediaTransportControls?
Yeah, this is possible. As I've mentioned in my previous answer in UWP custom media controls not working, we can edit MediaTransportControls styles and templates to achieve what you want.
change the place of the 'TimeRemainingElement' and put it on the left of the Slider.
TimeRemainingElement is located in the Grid named "TimeTextGrid" which is in the second row of the Grid named "MediaTransportControls_Timeline_Grid". And the Slider named "ProgressSlider" is in the first row. So to put TimeRemainingElement on the left of the Slider, we can add a Grid in the first row, then remove TimeRemainingElement and ProgressSlider to the different columns of the new grid like:
<Grid x:Name="MyGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="TimeRemainingElement"
Style="{StaticResource MediaTextBlockStyle}"
Text="00:00" />
<Slider x:Name="ProgressSlider"
Grid.Column="1"
Height="33"
MinWidth="80"
Margin="12,0"
VerticalAlignment="Center"
IsThumbToolTipEnabled="False"
Style="{StaticResource MediaSliderStyle}" />
<TextBlock x:Name="TimeElapsedElement"
Grid.Column="2"
Style="{StaticResource MediaTextBlockStyle}"
Text="00:00" />
</Grid>
And set the Visibility of TimeTextGrid to Collapsed like:
<Grid x:Name="TimeTextGrid"
Grid.Row="1"
Height="15"
Margin="12,0"
Visibility="Collapsed">
<!--<TextBlock x:Name="TimeElapsedElement"
Margin="0"
HorizontalAlignment="Left"
Style="{StaticResource MediaTextBlockStyle}"
Text="00:00" />
<TextBlock x:Name="TimeRemainingElement"
HorizontalAlignment="Right"
Style="{StaticResource MediaTextBlockStyle}"
Text="00:00" />-->
</Grid>
Here we can't delete TimeTextGrid. Missing TimeTextGrid would cause exception is some scenarios.
make the time show as 00:00 not 0:00:00
Changing the format of elapsed and remaining time is not easy. They are set in code-behind, just editing properties of TimeElapsedElement or TimeRemainingElement won't work. And I'm not sure why you need them show as "00:00". What if the media's duration is large than one hour? How to show a time that is "2:10:20"? I'd suggest you just use the original format, but if you do want to show it like "00:00", here is a workaround:
Firstly, we need to create a Format Converter to convert the time format like following:
public class TimeSpanFormatConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
if (!string.IsNullOrEmpty(value.ToString()))
{
var timeSpan = TimeSpan.Parse(value.ToString());
return timeSpan.ToString(#"mm\:ss");
}
else
{
return "00:00";
}
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
Then as the Text of TimeElapsedElement and TimeRemainingElement are set in code-behind, we can't use TimeSpanFormatConverter in TimeElapsedElement and TimeRemainingElement directly. So I add two TextBlocks and bind their Text property to the Text of TimeElapsedElement and TimeRemainingElement and use TimeSpanFormatConverter in my new TextBlock like:
<TextBlock x:Name="MyTimeRemaining"
Style="{StaticResource MediaTextBlockStyle}"
Text="{Binding Text,
Converter={StaticResource TimeSpanFormatConverter},
ElementName=TimeRemainingElement}" />
The StaticResource TimeSpanFormatConverter is defined as
<local:TimeSpanFormatConverter x:Key="TimeSpanFormatConverter" />
After this, I can hide TimeTextGrid and use my TextBlocks in MyGrid:
<Grid x:Name="MediaTransportControls_Timeline_Grid">
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid x:Name="MyGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="MyTimeRemaining"
Style="{StaticResource MediaTextBlockStyle}"
Text="{Binding Text,
Converter={StaticResource TimeSpanFormatConverter},
ElementName=TimeRemainingElement}" />
<Slider x:Name="ProgressSlider"
Style="{StaticResource MediaSliderStyle}"
Grid.Column="1"
Height="33"
MinWidth="80"
Margin="12,0"
VerticalAlignment="Center"
IsThumbToolTipEnabled="False" />
<TextBlock x:Name="MyTimeElapsedElement"
Style="{StaticResource MediaTextBlockStyle}"
Grid.Column="2"
Text="{Binding Text,
Converter={StaticResource TimeSpanFormatConverter},
ElementName=TimeElapsedElement}" />
</Grid>
<ProgressBar x:Name="BufferingProgressBar"
Grid.ColumnSpan="3"
Height="4"
Margin="0,2,0,0"
VerticalAlignment="Top"
IsHitTestVisible="False"
IsIndeterminate="True"
Visibility="Collapsed" />
<Grid x:Name="TimeTextGrid"
Grid.Row="1"
Height="15"
Margin="12,0"
Visibility="Collapsed">
<TextBlock x:Name="TimeElapsedElement"
Style="{StaticResource MediaTextBlockStyle}"
Margin="0"
HorizontalAlignment="Left"
Text="00:00" />
<TextBlock x:Name="TimeRemainingElement"
Style="{StaticResource MediaTextBlockStyle}"
HorizontalAlignment="Right"
Text="00:00" />
</Grid>
</Grid>
Is it possible to remove the "Cast to Device" icon/option from the MediaTransportControls?
To remove the "Cast to Device" icon/option from the MediaTransportControls, we can just delete the AppBarButton named "CastButton" in "MediaControlsCommandBar" :
<!--<AppBarButton x:Name="CastButton"
Style="{StaticResource AppBarButtonStyle}"
MediaTransportControlsHelper.DropoutOrder="7">
<AppBarButton.Icon>
<FontIcon Glyph="" />
</AppBarButton.Icon>
</AppBarButton>-->
And finally, after these changes, the MediaTransportControls will look like:
I have a ListView defined in a XAML interface which is bound to a collection.
The list view's DataTemplate features a WebView. I need this WebView to size to its contents, which means that after the ListView is bound, and elements are created, and those elements are bound, I need to execute a fragment of code on each WebView.
I've already taken care of getting the WebView to bind, and I have the code which will size a WebView. I simply need to know how to execute it; where to put it; how to get the WebViews and when to try to get them.
EDIT:
Here's my list view.
<ListView Opacity="{Binding IsRefreshing, Mode=OneWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource BooleanToGhost}}" Grid.Row="0" Name="listView" ItemsSource="{Binding Messages}" IsItemClickEnabled="False" SelectionMode="Single">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Grid.ColumnSpan="2" Grid.RowSpan="2" Fill="White" RadiusX="12" RadiusY="12" />
<TextBlock Foreground="#FFAAAAAA" Grid.Row="0" Grid.Column="0" Margin="8" Text="You" HorizontalAlignment="Left" FontSize="11" Visibility="{Binding IsFromStaff, Mode=OneTime,Converter={StaticResource BooleanToInvisibility}}" />
<TextBlock Foreground="#FFAAAAAA" Grid.Row="0" Grid.Column="0" Margin="8" Text="Staff" HorizontalAlignment="Left" FontSize="11" Visibility="{Binding IsFromStaff, Mode=OneTime,Converter={StaticResource BooleanToVisibility}}" />
<TextBlock Foreground="#FFAAAAAA" Grid.Row="0" Grid.Column="1" Margin="8" Text="{Binding Timestamp, Mode=OneTime}" HorizontalAlignment="Right" FontSize="11" />
<WebView local:MyProperties.HtmlString="{Binding Body}" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="8" ScrollViewer.VerticalScrollBarVisibility="Disabled" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="SelectionChanged">
<core:InvokeCommandAction Command="{Binding ShowCaseCommand, Mode=OneWay}" CommandParameter="{Binding ElementName=listView, Path=SelectedItem}" />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</ListView>
The solution is something called "Behaviors".
We see in the code snippet that the DataTemplate contains a WebView, which is the item I want to affect. So I add a Behavior to the WebView, which is a class with code. The class looks like so:
public class WebViewSizeBehavior : DependencyObject, IBehavior
{
public DependencyObject AssociatedObject { get; private set; }
public void Attach(DependencyObject associatedObject)
{
var control = associatedObject as WebView;
if (control == null)
throw new ArgumentException(
"WebViewSizeBehavior can be attached only to WebView.");
AssociatedObject = associatedObject;
control.LoadCompleted += Control_LoadCompleted;
}
private void Control_LoadCompleted(object sender, Windows.UI.Xaml.Navigation.NavigationEventArgs e)
{
var control = (WebView) AssociatedObject;
var resizeTask = control.ResizeToContent();
}
public void Detach()
{
var control = (WebView) AssociatedObject;
control.LoadCompleted -= Control_LoadCompleted;
AssociatedObject = null;
}
}
My namespaces and XAML are rigged up such that this class is reachable only the local namespace. How this is done is beyond the scope of this answer. So, given that, I can amend the XAML like so:
<ListView.ItemTemplate>
<DataTemplate>
…
<WebView …>
<interactivity:Interaction.Behaviors>
<local:WebViewSizeBehavior />
</interactivity:Interaction.Behaviors>
</WebView>
</DataTemplate>
</ListView.ItemTemplate>
I've left out content which is beyond the scope of this thread. Information about fitting a WebView to its content, as well as namespaces and XML namespaces, is available elsewhere.
<ListView Name="myList" Background="Transparent" Margin="15,88,15,15">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<Grid Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Margin="5">
<TextBlock Name="xName" Text="{Binding Name}" FontSize="30" Margin="10,0,5,0" FontWeight="Medium"/>
<TextBlock Name="xNo" Text="{Binding No}" FontSize="25" Margin="10,0,5,0" TextTrimming="CharacterEllipsis"/>
</StackPanel>
<Grid Grid.Column="1" Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<RadioButton Grid.Column="0" Name="r1" Content="1" Width="10" Margin="5,15,-2,5"/>
<RadioButton Grid.Column="1" Name="r2" Content="2" Width="10" Margin="5,15,-2,5"/>
</Grid>
</Grid>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Now I want to retrieve each item in ListView i.e, the controls in it. The TextBlocks content and to know which RadioButton is selected.
I tried taking classes like this
public class Att
{
public string Name;
public string No;
public RadioButton r1;
public RadioButton r2;
}
There are separate sources for the content of the TextBoxes in the ListView. They come from different classes. I tried retrieving the items using above class Att.
But it is showing some type conversion errors. Please anyone help me! I'm a beginner.
Thanks is advance.
Thanks for all the support!
Well I tried doing this on my own and finally I got it. What I really wanted is to know which RadioButton is checked. I tried taking class Att for retrieving the items in ListView. I made modifications to the Att Class and added properties r1 and r2 of type bool instead of RadioButton and binded this property to the IsChecked property of the RadioButton in XAML and also mode of binding is TwoWay. So the changes done in the XAML can be reflected in the source list of items.
lets begin with the scenario:
I have an ItemsControl inside a UserControl. In this ItemsControl I have a dynamicly created DataTemplate which is created and added in codebehind. As there doesn't seem to be a nice way to create a DataTemplate in codebehind I had to programmatically generate the xaml code for my DataTemplate into a string and then create a DataTemplate object out of it through XamlReader:
StringBuilder stringBuilder = new StringBuilder();
XmlWriter xmlWriter = XmlWriter.Create(stringBuilder);
... // use xmlWrite to generate desired xaml
// substring is use to cut out the xml declaration
DataTemplate template = (DataTemplate)XamlReader.Load(stringBuilder.ToString().Substring(39));
myItemsControl.ItemTemplate = template;
The generated XAML code looks like this and is actually used (the items get rendered as expected):
<DataTemplate xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Grid HorizontalAlignment="Stretch" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding b0}" Grid.Column="0" />
<TextBox Text="{Binding b1, Converter={StaticResource customConverter}}" HorizontalAlignment="Stretch" Grid.Column="1" LostFocus="TxtAttribute_LostFocus" />
<TextBox Text="{Binding b2, Converter={StaticResource customConverter}}" HorizontalAlignment="Stretch" Grid.Column="2" LostFocus="TxtAttribute_LostFocus" />
<TextBox Text="{Binding b3, Converter={StaticResource customConverter}}" HorizontalAlignment="Stretch" Grid.Column="3" LostFocus="TxtAttribute_LostFocus" IsReadOnly="True" />
</Grid>
In case you wonder: the xmlns attribute is needed by the XamlReader to render the control, else you'll get an exception when reaching the code.
My problem:
now while the items look like expected and data is correctly bound neither my customConverter that should reformat the bound data, nor the LostFocus event are correctly applied. I don't get any error messages or warnings, converter and event just don't get called. Anyone an idea why and how I can get this to work?
Update:
I reached a point where I have to solve this problem or to try a different approach.
In my last tests I tried to add the Converter directly in the DataTemplate but I had no luck. The generated code now looks like this:
<DataTemplate xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Conv="clr-namespace:my.Namespace" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Grid HorizontalAlignment="Stretch" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Conv:DecimalConverter x:Name="cnvDecimalConverter" />
</Grid.Resources>
<TextBlock Text="{Binding b0}" Grid.Column="0" />
<TextBox Text="{Binding b1, Converter={StaticResource cnvItemsDecimalConverter}}" HorizontalAlignment="Stretch" Grid.Column="1" LostFocus="TxtAttribute_LostFocus" />
<TextBox Text="{Binding b2, Converter={StaticResource cnvItemsDecimalConverter}}" HorizontalAlignment="Stretch" Grid.Column="2" LostFocus="TxtAttribute_LostFocus" />
<TextBox Text="{Binding b3, Converter={StaticResource cnvItemsDecimalConverter}}" HorizontalAlignment="Stretch" Grid.Column="3" LostFocus="TxtAttribute_LostFocus" IsReadOnly="True" />
</Grid>
</DataTemplate>
Any ideas?
Update 2:
As I just found out XamlReader.Load() just is not able to hook up events. See this Thread in the Silverlight Forums
The Converters should work, I guess I still have some kind of namespace problem I don't see. I'm kind of out of options with my "simple" ItemsControl approach so I think it's time to look for another method to reach my needs.
Just to clear up the situation: It is not possible to generate dynamic DataTemplates with events through generating an xaml string and extract the control from this. The only option to parse xaml code with events is through Application.LoadComponent which needs a URI to work.
I ended up using nested ItemControls to create my "dynamic" behaviour.