I'm not entirely sure how to articulate what I'm trying to do, so apologies in advance if anything is unclear.
I'm writing a Twitter client in UWP C#. One of the things I need to do is control the DataTemplate of each tweet in an array of tweets (as returned by Twitter's API). The problem I'm running into is that I'm going to end up with a lot of identical code, if I make a separate DataTemplate for each tweet type. This is because a tweet can be any of a combination of tweet types (text, image, video, GIF, URL, retweet, and retweet with quote).
Instead of having to copypasta the same DataTemplate for each possible combination, is there a way I can reuse the main Tweet template between different tweet types?
For retweets and quote tweets, the tweet object contains a nested second tweet object (for either the retweet or quote tweet, aka retweet + text), but I don't know how to pass that second tweet object in any way that would let me reuse my existing template.
Here's an example of my DataTemplates that I have right now - I've only done tweets and retweets so far. RetweetTemplate is almost identical to TweetTemplate, except for one extra row at the top of the grid for the "#username retweeted" text, and the bindings are pointed to Tweet.RetweetedStatus instead of Tweet.
So is there a way I can do this with less redundant code? Or am I stuck making a near-duplicate template for each possible combination to accommodate media and retweeted tweets with media?
<DataTemplate x:Key="TweetTemplate">
<Grid MinHeight="150" Width="450" BorderBrush="{ThemeResource SystemControlDisabledListMediumBrush}" BorderThickness="1" Margin="-12 0" Padding="10 5">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<StackPanel Orientation="Horizontal" Padding="5">
<TextBlock Text="{Binding Path=User.Name}" Margin="0 0 8 0" FontWeight="Bold" />
<TextBlock Text="{Binding Path=User.ScreenName, Converter={StaticResource GetHandle}}" Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}" />
<TextBlock Text="⦁" Margin="8 0" />
<TextBlock Text="{Binding CreationDate, Converter={StaticResource FormatDate}}" />
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<TextBlock Text="{Binding Text}" Padding="5" TextWrapping="WrapWholeWords" />
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*" MaxWidth="100"/>
<ColumnDefinition Width="2.5*"/>
<ColumnDefinition Width="2.5*"/>
<ColumnDefinition Width="2.5*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Button x:Name="cmdComment" Content="" Style="{StaticResource MetaButtons}" />
</Grid>
<Grid Grid.Column="1">
<Button x:Name="cmdRetweet" Content="" Style="{StaticResource MetaButtons}" />
</Grid>
<Grid Grid.Column="2">
<Button x:Name="cmdLike" Content="" Style="{StaticResource MetaButtons}" />
</Grid>
<Grid Grid.Column="3">
<Button x:Name="cmdMessage" Content="" Style="{StaticResource MetaButtons}" />
</Grid>
</Grid>
</Grid>
</DataTemplate>
<DataTemplate x:Key="RetweetTemplate">
<Grid MinHeight="150" MinWidth="420">
<Grid.RowDefinitions>
<RowDefinition Height="28"/>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<StackPanel Orientation="Horizontal" Padding="4 8 4 0">
<StackPanel.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="12"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlPageTextBaseMediumBrush}" />
</Style>
</StackPanel.Resources>
<Border Height="28">
<TextBlock Height="24" FontFamily="{StaticResource FontAwesome}" xml:space="preserve"><Run Text=" "/></TextBlock>
</Border>
<TextBlock Text="{Binding Path=User.Name}" />
<TextBlock Text=" retweeted"/>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<StackPanel Orientation="Horizontal" Padding="5">
<TextBlock Text="{Binding Path=RetweetedStatus.User.Name}" Margin="0 0 8 0" FontWeight="Bold" />
<TextBlock Text="{Binding Path=RetweetedStatus.User.ScreenName, Converter={StaticResource GetHandle}}" Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}" />
<TextBlock Text="⦁" Margin="8 0" />
<TextBlock Text="{Binding Path=RetweetedStatus.CreationDate, Converter={StaticResource FormatDate}}" />
</StackPanel>
</Grid>
<Grid Grid.Row="2">
<TextBlock Text="{Binding RetweetedStatus.Text}" Padding="5" TextWrapping="WrapWholeWords" />
</Grid>
<Grid Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*" MaxWidth="100"/>
<ColumnDefinition Width="2.5*"/>
<ColumnDefinition Width="2.5*"/>
<ColumnDefinition Width="2.5*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Button x:Name="cmdComment" Content="" Style="{StaticResource MetaButtons}" />
</Grid>
<Grid Grid.Column="1">
<Button x:Name="cmdRetweet" Content="" Style="{StaticResource MetaButtons}" />
</Grid>
<Grid Grid.Column="2">
<Button x:Name="cmdLike" Content="" Style="{StaticResource MetaButtons}" />
</Grid>
<Grid Grid.Column="3">
<Button x:Name="cmdMessage" Content="" Style="{StaticResource MetaButtons}" />
</Grid>
</Grid>
</Grid>
</DataTemplate>
<local:TweetTemplateSelector x:Key="TweetTemplateSelector"
TweetTemplate="{StaticResource TweetTemplate}"
RetweetTemplate="{StaticResource RetweetTemplate}">
</local:TweetTemplateSelector>
In general, you need to create match Datatemplate for different message type. And UWP has DataTemplateSelector class that could use to select specified Datatemplate dynamically. For example,
ListViewDataTemplateSelector.cs
public class ListViewDataTemplateSelector : DataTemplateSelector
{
public DataTemplate MaleData { set; get; }
public DataTemplate FemaleData { set; get; }
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
if (item is Male)
{
return MaleData;
}
return FemaleData;
}
}
Usage
<Page.Resources>
<DataTemplate x:Key="MaleData">
<Grid>
<Border>
<Grid Margin="10,10,10,10">
<StackPanel>
<TextBlock Text="Name"></TextBlock>
<TextBlock Text="{Binding Path=Name}"></TextBlock>
<TextBlock Text="Height"></TextBlock>
<TextBlock Text="{Binding Path=Stature}"></TextBlock>
</StackPanel>
</Grid>
</Border>
</Grid>
</DataTemplate>
<DataTemplate x:Key="FemaleData">
<Grid>
<Border>
<Grid Margin="10,10,10,10">
<StackPanel>
<TextBlock Text="Name"></TextBlock>
<TextBlock Text="{Binding Path=Name}"></TextBlock>
<TextBlock Text="Age"></TextBlock>
<TextBlock Text="{Binding Path=Year}"></TextBlock>
</StackPanel>
</Grid>
</Border>
</Grid>
</DataTemplate>
<local:ListViewDataTemplateSelector x:Key="Selector" FemaleData="{StaticResource FemaleData}"
MaleData="{StaticResource MaleData}"></local:ListViewDataTemplateSelector>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView ItemsSource="{x:Bind View.HumanWorld}"
ItemTemplateSelector="{StaticResource Selector}"></ListView>
<TextBlock Text="http://blog.csdn.net/lindexi_gd" VerticalAlignment="Bottom"></TextBlock>
</Grid>
So is there a way I can do this with less redundant code? Or am I stuck making a near-duplicate template for each possible combination to accommodate media and retweeted tweets with media?
I know you want less redundant code, but the less redundant code you write, the more behavioral controls you need. This will increase the complexity of your code. Although it is redundant that create Datatemplates for each message type, but the code is simple.
Instead of having to copypasta the same DataTemplate for each possible combination, is there a way I can reuse the main Tweet template between different tweet types?
No. You can't base a template on another template. A DataTemplate must always be defined as a whole, i.e. you cannot "override" only some part of a template but keep the rest of it. XAML doesn't support this.
Or am I stuck making a near-duplicate template for each possible combination to accommodate media and retweeted tweets with media?
Yes, I am afraid so. You could consider creating the templates programmatically using the XamlReader class to be able to re-use as much markup as possible.
Related
I've the following pivot control in my application
<phone:PivotItem Header="{Binding Path=LocalizedResources.requests_title, Source={StaticResource LocalizedStrings}}" >
<Grid Margin="0,-12,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" >
<TextBlock FontWeight="Bold"
TextDecorations="Underline"
VerticalAlignment="Top"
TextWrapping="NoWrap"
FontSize="{StaticResource PhoneFontSizeMediumLarge}"
Foreground="{StaticResource PhoneAccentBrush}"
toolkit:TurnstileFeatherEffect.FeatheringIndex="1"/>
<toolkit:PhoneTextBox AcceptsReturn="False"
TextWrapping="NoWrap"
Visibility="Collapsed"
TextChanged="SearchBox_TextChanged"
toolkit:TurnstileFeatherEffect.FeatheringIndex="1"/>
</StackPanel>
<toolkit:LongListMultiSelector Grid.Row="1"
ItemsSource="{Binding Details_OC}"
SelectionChanged="Requests_SelectionChanged"
toolkit:TurnstileFeatherEffect.FeatheringIndex="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0,0,24,0">
<toolkit:LongListMultiSelector.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0.25" BorderBrush="{StaticResource PhoneAccentBrush}">
<Grid Background="{StaticResource TransparentBrush}" HorizontalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal"
Grid.Row="0"
Grid.Column="0"
HorizontalAlignment="Left"
VerticalAlignment="Top" >
<TextBlock Text="#" FontSize="{StaticResource PhoneFontSizeLarge}" />
<TextBlock x:Name="ID"
Text="{Binding ID}"
FontSize="{StaticResource PhoneFontSizeLarge}"
TextWrapping="NoWrap"/>
</StackPanel>
<TextBlock x:Name="date"
Text="{Binding Path=TIME, Converter={StaticResource dateConverter}}"
Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Right"
VerticalAlignment="Top"
FontSize="{StaticResource PhoneFontSizeSmall}"
TextWrapping="NoWrap"/>
</Grid>
</Border>
</DataTemplate>
</toolkit:LongListMultiSelector.ItemTemplate>
</toolkit:LongListMultiSelector>
</Grid>
</phone:PivotItem>
The result appears as follows
You can see that the date Textblock is not appearing fully. I couldn't find the reason for this unexpected behavior. Please help.
Thank you.
The problem appears to be in the sizing of your columns. See the following, inside the <toolkit:LongListMultiSelector.ItemTemplate>:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
In this case I would give the first column a static width and then the second can fill the remaining space. Like this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
Alternatively you may wish to take a look into the ItemInfoTemplate property of the LongListMultiSelector.
It gives you the ability to display a second column at the far right which does not get squashed over by the checkboxes when they become active.
An example can be found here.
How do I make my middle column take up the full width available while allowing space for the comment section so that all those comment boxes are nicely aligned to the right:
<DataTemplate x:Key="ActivityStreamItemTemplate">
<StackPanel VerticalAlignment="Top" Margin="5,0,0,0">
<Button Command="{Binding Path=DataContext.LoadSpacesCommand, ElementName=OrganisationList}" CommandParameter="{Binding}" Padding="-5,0,-5,-5" Margin="-7,-12,-7,-7" Height="auto" BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" UseLayoutRounding="True" FontSize="0.01">
<Grid Height="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="60" />
</Grid.ColumnDefinitions>
<StackPanel Height="auto" Grid.Column="0" Background="Transparent">
<Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding created_by.image.link}" Width="62" Height="62"></Image>
</Border>
</StackPanel>
<StackPanel Height="auto" Grid.Column="1">
<TextBlock Text="{Binding type}" HorizontalAlignment="Left" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
<TextBlock Text="{Binding ttitle}" HorizontalAlignment="Left" FontSize="15" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" TextWrapping="Wrap"/>
<TextBlock Text="{Binding created_by.name}" HorizontalAlignment="Left" FontSize="11" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
</StackPanel>
<StackPanel Height="60" Grid.Column="2" Margin="10,0,0,0">
<StackPanel.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/Icons/CommentsIcon.png"/>
</StackPanel.Background>
<TextBlock Text="{Binding comments.Count}" HorizontalAlignment="Center" FontSize="20" Foreground="Black" TextAlignment="Center" Padding="0,8,0,0"/>
</StackPanel>
</Grid>
</Button>
</StackPanel>
</DataTemplate>
I tried placing horizontal align on the third stackpanel but that actually didn't work.
EDIT: Thanks for the tries but no cigar:
You need to alter the style of the ListBoxItem itself to ensure that the content is stretched across the available width.
Define this style:
<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>
Then the Right alignment of the "Comments" image will work and the central text box will stretch to fill the available space.
You might find that just using a StackPanel with an horizontal orientation works better than a Grid for the item template, especially if the data in columns 0 and 2 are a constant width.
Play around with the space given for the columns, for example:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
This gives the center column 3 times more space than the right column
It's hard to tell exactly what you want because of how you've blurred your image. But I think the key is to make the container of the grid take up all available space, HorizontalAlignment="Stretch".
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="60" />
</Grid.ColumnDefinitions>
<!-- items here -->
</Grid>
</StackPanel>
The item you set to have Grid.Column="0" will have width 67dip, the one with Grid.Column="2" will be width 60dip, and the one with Grid.Column="1"will fill up the rest of the space.
dip = device independent pixels - all Windows Phone apps are measured as if the screen is 480x800 and then rendered at the actual resolution of the screen.
Inside a StackPanel you can't do HorizontalAlignment to right while its orientation is LeftToRight, as far as I know. Avoid using it.
The problem stems from using a StackPanel as the top-most UIElement. Use a Grid instead and follow the rest of this advice:
Right align content in ListBox
Which leads to this answer as well:
C# windows phone -Alignment in xaml ListBox.ItemTemplate
Your problem is the Button, if it's not mandatory try deleting it and add a "Tap" Event to the StackPanel, i've tried it and it works.
<DataTemplate x:Key="ActivityStreamItemTemplate">
<StackPanel Tap="...">
// no <Button> here
<Grid>
---
</Grid>
// no </Button> here
</StackPanel>
</DataTemplate>
better option
<DataTemplate x:Key="ActivityStreamItemTemplate">
<Grid Tap="...">
...
</Grid>
</DataTemplate>
I have a number of grids that have almost the same layout. This is an example
<Grid x:Name="OptionChangeUserState" Grid.Row="0" Style="{StaticResource MenuItemGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Style="{StaticResource MenuItemTextblockStyle}" Text="Status wijzigen" Margin="0"/>
<Image Grid.Column="1" Source="/UserControlSolution;component/Image/user.png" Margin="5" />
</Grid>
I want to turn this in a controltemplate like here :no template property on grid style in WPF?
But how can I change the Textblock text and Image source when I use a controltemplate ?
You can achieve this by creating the one model with Text and Source properties. Then depending on the different number of instance where you want to use this ControlTemplate you can set the model instance in the Tag of your Grid.
<local:MyModel x:Key="myModel1" Text="" Source=""/>
<ContentControl Tag="{StaticResource myModel1}" Template={StaticResource myTemplate}>
</ContentControl>
and in template
<ControlTemplate x:Key="myTemplate" TargetType="ContentControl">
<Grid x:Name="OptionChangeUserState" Grid.Row="0" Style="{StaticResource MenuItemGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Style="{StaticResource MenuItemTextblockStyle}" Text="{Binding Tag.Text, RelativeSource={RelativeSource TemplatedParent}}" Margin="0"/>
<Image Grid.Column="1" Source="{Binding Tag.Source, RelativeSource={RelativeSource TemplatedParent}}" Margin="5" />
</Grid>
</ControlTemplate>
As far as I am aware, you can only do this with a DataTemplate and only if each of your data bound classes had properties of the same name, in this case, TextValue and ImageSource. I don't think that you can get access to the data object directly from the ControlTemplate.
<DataTemplate>
<Grid x:Name="OptionChangeUserState" Grid.Row="0" Style="{StaticResource MenuItemGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Style="{StaticResource MenuItemTextblockStyle}" Text="{Binding TextValue}" Margin="0"/>
<Image Grid.Column="1" Source="{Binding ImageSource}" Margin="5" />
</Grid>
</DataTemplate>
You'd also need to use the ContentTemplate property instead.
<ContentControl Content="{Binding DataObject}"
ContentTemplate="{StaticResource Template}" />
This can be done with data-binding, but it would be preferable to use a property interface so that you can simply type something like:
<local:OptionControl Text="Status wijzigen" ImageSource="/UserControlSolution;component/Image/user.png" />
This way you don't need to have your UI labels and icons in a separate data layer.
This can be achieved by creating a control class which defines Dependency Properties, and using TemplateBindings to bind to them in the ControlTemplate.
It's possible that an existing control has appropriate properties that you can create a template for. This HeaderedContentControl template should work for you, although a custom control would be nicer:
<Style x:Key="HeaderedContentControlStyle" TargetType="HeaderedContentControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HeaderedContentControl">
<Grid Style="{StaticResource MenuItemGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Style="{StaticResource MenuItemTextblockStyle}" Text="{TemplateBinding Header}" />
<Image Grid.Column="1" Source="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Usage:
<HeaderedContentControl Name="OptionChangeUserState" Grid.Row="0"
Style="{StaticResource HeaderedContentControlStyle}"
Header="Status wijzigen">
<BitmapImage>/UserControlSolution;component/Image/user.png</BitmapImage>
</HeaderedContentControl>
Note that we need to wrap the image path in BitmapImage explicitly. This is because the HeaderedContentControl.Content property is not declared as an image type, so WPF will not automatically convert it.
Use DataTemplate with some sort of DTO, DictionaryEntry will do for two items.
<DataTemplate DataType="{x:Type Collections:DictionaryEntry}" x:Key="gridTemplate">
<Grid Style="{StaticResource MenuItemGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Style="{StaticResource MenuItemTextblockStyle}" Text="{Binding Key}" Margin="0"/>
<Image Grid.Column="1" Source="{Binding Value}" Margin="5" />
</Grid>
</DataTemplate>
Usage:
<ContentControl ContentTemplate="{StaticResource gridTemplate}">
<ContentControl.Content>
<Collections:DictionaryEntry Key="Status wijzigen" Value="/UserControlSolution;component/Image/user.png" />
</ContentControl.Content>
I've got 2 listbox and one scrollviewer and I want the scrollviewer to scroll the two listbox together. But i don't know how to do.. Here's my xaml :
<ScrollViewer Grid.Row="1">
<Grid>
<ListBox Name="listboxRSSFeedItems" Width="240" Height="644" Margin="0,0,240,0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock TextWrapping="Wrap" Text="{Binding Title}" Grid.Row="0" FontSize="24" HorizontalAlignment="Left" />
<HyperlinkButton Content="Link to details" NavigateUri="{Binding Link}" HorizontalAlignment="Left" Grid.Row="1" Margin="0,0,0,30" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox Name="listboxRSSFeedItems2" Width="240" Height="644" Margin="240,0,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock TextWrapping="Wrap" Text="{Binding Title}" Grid.Row="0" FontSize="24" HorizontalAlignment="Left" />
<HyperlinkButton Content="Link to details" NavigateUri="{Binding Link}" HorizontalAlignment="Left" Grid.Row="1" Margin="0,0,0,30" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</ScrollViewer>
Thanks a lot
Ok. I just tried to do one listbox with grid. it works fine, but how to choose which grid to add my item.
I used to add with "listboxRSSFeedItems.Items.Add(item)", but now, how can i choose the 2nd Column only.
<ScrollViewer Grid.Row="1">
<ListBox x:Name="listboxRSSFeedItems" Width="480" Height="680">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid x:Name="first" Grid.Column="0">
<TextBlock TextWrapping="Wrap" Text="{Binding Title}" />
<HyperlinkButton NavigateUri="{Binding URL}" TargetName="_blank"/>
</Grid>
<Grid x:Name="second" Grid.Column="1">
<TextBlock TextWrapping="Wrap" Text="{Binding Title}" />
<HyperlinkButton NavigateUri="{Binding URL}" TargetName="_blank" />
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
Thanks again
You shouldn't set height of your listBoxes.
ps: Consider layout using columns
<ScrollViewer >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ListBox x:Name="first" Grid.Column="0" />
<ListBox x:Name="second" Grid.Column="1" />
</Grid>
</ScrollViewer>
Set VerticalScrollBarVisibility to "Disabled" for listBoxes.
And it will be better using StackPanel for this puprose instead of Grid.
I am working on a small university project where I need to read a Lua file with some tables and functions and make a shape out of it. That's done.
The problem is when I try to make it interactive. Here's my XAML:
<Window x:Class="Gemi.WPF.VentanaPrincipal"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Gemi.WPF"
Title="GEMI - Geometría Interactiva!" Height="350" Width="525">
<Window.Resources>
<local:DoblesAPunto x:Key="DoblesAPunto"/>
</Window.Resources>
<DockPanel LastChildFill="True" Background="White">
<Grid DockPanel.Dock="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Content="Figura Seleccionada: "/>
<ComboBox Name="cbFiguras" HorizontalAlignment="Stretch" Grid.Column="1"
ItemsSource="{Binding Path=Figuras}" DisplayMemberPath="Nombre" SelectionChanged="cbFiguras_FiguraSeleccionada" />
</Grid>
<ScrollViewer DockPanel.Dock="Bottom" Name="scrollPropiedades"
Height="Auto" VerticalScrollBarVisibility="Auto">
<DockPanel Name="dpPropiedades">
<StackPanel Orientation="Vertical" Name="spNombres" DockPanel.Dock="Left"/>
<StackPanel Orientation="Vertical" Name="spValores" DockPanel.Dock="Right" Margin="10, 0, 0, 0"/>
</DockPanel>
</ScrollViewer>
<DockPanel LastChildFill="True">
<Slider Name="controlZoom" DockPanel.Dock="Bottom" Value="1"
Maximum="50" Minimum="0.1" Orientation="Horizontal" ToolTip="Controla el zoom de la figura"/>
<ItemsControl x:Name="cnvFigura" ItemsSource="{Binding Puntos}">
<ItemsControl.LayoutTransform>
<ScaleTransform
CenterX="0" CenterY="0"
ScaleX="{Binding ElementName=controlZoom,Path=Value}"
ScaleY="{Binding ElementName=controlZoom,Path=Value}"/>
</ItemsControl.LayoutTransform>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Path Fill="Black" local:DragCanvas.CanBeDragged="True"
local:DragCanvas.Top="{Binding Y, Mode=TwoWay}"
local:DragCanvas.Left="{Binding X, Mode=TwoWay}">
<Path.Data>
<EllipseGeometry RadiusX="5" RadiusY="5">
<EllipseGeometry.Center>
<MultiBinding Converter="{StaticResource DoblesAPunto}">
<Binding Path="X" />
<Binding Path="Y" />
</MultiBinding>
</EllipseGeometry.Center>
</EllipseGeometry>
</Path.Data>
<Path.ToolTip>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="X = " Grid.Column="0" Grid.Row="0"/>
<TextBlock Text="{Binding X}" Grid.Column="1" Grid.Row="0"/>
<TextBlock Text="Y = " Grid.Column="0" Grid.Row="1"/>
<TextBlock Text="{Binding Y}" Grid.Column="1" Grid.Row="1"/>
</Grid>
</Path.ToolTip>
</Path>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<local:DragCanvas IsItemsHost="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</DockPanel>
</DockPanel>
</Window>
The issue in question is that the binding does not update. The "Punto" object's setters are never called even if I drag the ellipses making up the DataTemplate. Any ideas?
Also, why do I seem to need to bind the center of the ellipses? If I only bind DragCanvas' Top/Bottom/Left/Right all the points are drawn at 0,0, and this induces a problem as i can't drag the points further left nor top where they initially were.
This might be caused because Drag-n-drop does not modify the Canvas.Left and Canvas.Top but instead uses a Transformation (Translation).
Binding to this Translation might be tricky because I expect that the drag-n-drop system adds this transformation to the transformation group. So it will not update a translation you added to the Transformations.