I need a WPF Popup inside a DataTemplate, something like this:
<ScrollViewer>
<ItemsControl ItemsSource="{Binding Collection}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<TextBox Name="MyTextboxBrief" Text="{Binding TextBrief}"/>
<Popup PlacementTarget="{Binding ElementName=MyTextboxBrief}" Placement="Center">
<TextBox Name="MyTextboxVerbose" Text="{Binding TextVerbose}"/>
</Popup>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
But, this Popup should behave like this:
it must scroll together with relevant ItemsControl item
when app window is minimized - it shouldn't stay visible on desktop
it will be taller than ItemsControl, its content mustn't be clipped, but it mustn't change ItemsControl height
it will be wider than relevant ItemsControl item - but it shouldn't shift other ItemsControl items to the left or to the right
I have a strong feeling that I should somehow use ComboBox template - but I don't understand how to get it's Popup behavior
I don't think that Popup will help you here, nor ComboBox. See if this helps you any further:
<DataTemplate>
<Grid>
<TextBox Name="MyTextboxBrief" Text="{Binding TextBrief}" />
<!-- You might want to bind visibility against
some kind of property -->
<Canvas >
<Canvas.RenderTransform>
<!--In case you want to move-->
<TranslateTransform Y="-5" />
</Canvas.RenderTransform>
<Border Width="100" Height="20" Background="Black">
<TextBlock Text="Test" />
</Border>
</Canvas>
</Grid>
</DataTemplate>
Related
I have a ListView populated with ListViewItems, like navigation bar style menu options.
I would like to create the effect of the ListViewItem border "bulging" like in the Mail application on Win10 as shown in this picture
The border "bulges" (fisheye?) as the mouse moves left and right along the ListViewItem. It's a nice effect that I'd like to replicate but am struggling to even get started on how to tackle this.
My list items are bound to a content control which is templated with a ControlTemplate. The ItemsControl ItemTemplate is a DataTemplate containing an image and a Textbox wrapped inside a button control, like this .... (although I suspect how it's created is probably not relevant to my question)
<ContentControl Content="{Binding Path=MenuModel.AllMenuItems}"
x:Name="menuCtrl1"
Template="{StaticResource MenuListItemControlTemplate}"
VerticalAlignment="Top" />
...
<ControlTemplate x:Key="MenuListItemControlTemplate" TargetType="ContentControl">
<Border Background="Transparent" >
<ScrollViewer Margin="{StaticResource DefaultNoMargin}" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{TemplateBinding Content}"
ItemTemplate="{StaticResource MenuListItemDataTemplate}" />
</ScrollViewer>
</Border>
</ControlTemplate>
...
<DataTemplate x:Key="MenuListItemDataTemplate" DataType="local:SingleMenuItem">
<Button Command="{Binding MenuCommand}" Style="{StaticResource MenuButtonStyle}" >
<StackPanel Orientation="Horizontal" >
<Image Source="{Binding MenuIconSource}" Style="{StaticResource MenuItemImage}" />
<TextBox Text="{Binding DisplayText}" Style="{StaticResource MenuItemStyle}" />
</StackPanel>
</Button>
</DataTemplate>
Any tips on how to achieve it or even where to start would be gratefully received.
I have UserControl that includes several rectangles:
<StackPanel>
<Rectangle Height="70" Width="100" x:Name="Image1" />
<Rectangle Height="70" Width="100" x:Name="Image2" />
<Rectangle Height="70" Width="100" x:Name="Image3" />
</StackPanel>
How can I create various number of rectangles via data binding and set rectangles width and height (and other properties) instead of this static hardcode approach?
Thank you in advance!
Generally, you would have an ItemsControl (or a ListBox, etc.) and modify its item template to show the rectangles:
<ItemsControl ItemsSource={Binding MyRectangles}>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Rectangle Width="{Binding Width}" Height="{Binding Height}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Note that this assumes the data context has a MyRectangles collection, and each item within that collection has a Width and Height property.
I have a Listview defined like this:
<ListView x:Name="lvPlaylist" Width="530" Height="337" IsItemClickEnabled="True" ItemClick="gvPlaylist_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Image Stretch="Fill" Source="{Binding albumArtURI}" Height="48" Width="48" />
<TextBlock Text="{Binding GetPlaylistFormat}" Width="500" Height="18"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I want to open a "context"-Flyout on each Item on click.
So far I was only able to attach the flyout to the whole but then the flyout is shown at the border of the listview - not directly attached to the selected item.
Buttons have a Flyout property. All you have to do is wrap the contents of the template in a Button, create a Style for the button which removes all visuals for it, then create a Flyout for it.
<DataTemplate>
<Button Style="{StaticResource ButtonWrapperStyle}">
<Button.Content>
<Grid>
<Image Stretch="Fill" Source="{Binding albumArtURI}" Height="48" Width="48" />
<TextBlock Text="{Binding GetPlaylistFormat}" Width="500" Height="18"/>
</Grid>
</Button.Content>
<Button.Flyout>
<!-- Make Flyout Here -->
</Button.Flyout>
</Button>
</DataTemplate>
Obviously there is stuff left to do here, but you get the idea.
Hope this helps and happy coding!
Looks like you can also do it like this
From MSDN
"The next example shows a Flyout attached to a TextBlock. As noted earlier, you can attach a Flyout to any FrameworkElement by using the FlyoutBase.AttachedFlyout attached property."
<TextBlock Text="{Binding ElementName=MyTextBox, Path=Text}"
Tapped="TextBlock_Tapped" FontSize="18">
<FlyoutBase.AttachedFlyout>
<Flyout>
<TextBox x:Name="MyTextBox" Text="You can edit this text by tapping it."/>
</Flyout>
</FlyoutBase.AttachedFlyout>
</TextBlock>
My WPF application contains a window that has a single ListBox in it. The View Model for the window contains an ObservableCollection of DomainViewModel objects.
The window defines the following DataTemplate:
<DataTemplate x:Key="DomainTemplate" DataType="DomainViewModel">
<Border BorderBrush="{Binding Converter={StaticResource BrushConverter}, Path=IsSelected}"
BorderThickness="2"
Name="SelectedBorder">
<Button Click="SelectDomain_Click"
Content="{Binding Path=Name}"
FontSize="16"
FontWeight="Bold"
Height="60"
HorizontalAlignment="Stretch" />
</Border>
</DataTemplate>
And here's the ListBox's declaration:
<ListBox FontSize="16"
FontWeight="Bold"
Grid.Row="2"
ItemsSource="{Binding Path=Domains}"
ItemTemplate="{StaticResource DomainTemplate}"
Name="DomainListBox" />
When the window renders, each button is exactly wide enough to display the text in its Content property. But that's not what I want. I want each button to be the width of the ListBox, which is going to vary with the width of the window itself.
How do I get the Buttons to keep their width set to the ListBox's width?
<ListBox HorizontalContentAlignment="Stretch"
.../>
I have a ItemControl in silverlight 4 with a Canvas as a ItemPanel, the idea is to simulate a canvas area with drag and dop items.
ItemsControl has a ItemTemplate with a image and one button.
The idea is that when the button of itemTemplate Click the itemTemplate change.
Some of my code:
(Items Control)
<ItemsControl ItemsSource="{Binding Devices}"
ItemTemplate="{StaticResource deviceItemTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
MouseLeftButtonDown="Canvas_MouseLeftButtonDown"
MouseMove="Canvas_MouseMove"
LostMouseCapture="Canvas_LostMouseCapture"></Canvas>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
(ItemTemplate)
<DataTemplate x:Key="deviceItemTemplate">
<ContentControl>
<Grid IsHitTestVisible="True" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
</Grid.RowDefinitions>
<Image IsHitTestVisible="False" Grid.Row="0" Stretch="UniformToFill"
Width="50" Height="50"
Source="{Binding ImagePath}"/>
<Button Grid.Row="1" Content="{Binding EditarDispositivoCommand.DisplayName}" Command="{Binding EditarDispositivoCommand.Command}"></Button>
</Grid>
<ContentControl.RenderTransform>
<TranslateTransform X="{Binding X, Mode=TwoWay}" Y="{Binding Y, Mode=TwoWay}"></TranslateTransform>
</ContentControl.RenderTransform>
</ContentControl>
</DataTemplate>
I try to get that when a button in a itemTemplate is clicked the template of this item change to other template from resource.
Was that possible or i taking a bad way. Thanks a lot.
You could try using a DataTemplateSelector for Silverlight - it's not built in like WPF, but it can be achieved with some extra code.
Here is a good example from CodeProject:
http://www.codeproject.com/KB/silverlight/SLTemplateSelector.aspx
Just add an element to you view model to specify the template...
I just used the following article to do what you suggested.
I have two item templates defined for a view and can progamatically change the item template at runtime though codebehind
http://weblogs.asp.net/psheriff/archive/2010/08/25/change-templates-dynamically-in-silverlight.aspx
Hope this helps
(Sample also uses a button to change the item template)