Synchronize the size of controls that lay in different ItemsCollections - wpf

I want to synchronize the width of two controls.
<!--DataContext-->
<DockPanel LastChildFill="True" x:Name="HeaderDockPanel">
<DockPanel LastChildFill="True" MinHeight="60" DockPanel.Dock="Top" DataContext="{Binding Month}" d:DataContext="{d:DesignInstance Type=local:Month}" >
<TextBlock Text="{Binding Name}" Style="{StaticResource TitleTextBlock}" DockPanel.Dock="Left" />
<!--this shoud to set the Width-->
<!--Nested_1 DataContext Model_1-->
<local:DaysLine HorizontalAlignment="Left" Width="{Binding ElementName=HeaderDockPanel, Path=DataContext.DaysHeaderWidth, Mode=TwoWay}" />
</DockPanel>
<!--Nested_1 DataContext Model_2-->
<ListView Grid.Row="1" ItemsSource="{Binding CarBusiness}">
<ItemsControl.ItemTemplate>
<DataTemplate >
<DockPanel d:DataContext="{d:DesignInstance Type=local:CarBusiness}" LastChildFill="True">
<TextBlock Text="{Binding Name}" Style="{StaticResource TitleTextBlock}" DockPanel.Dock="Left" Margin="-6 0 0 0"/>
<!--this shoud to get the Width-->
<!--Nested_2 DataContext Model_3-->
<ItemsControl ItemsSource="{Binding Business}" Style="{StaticResource HorizontalItemsControl}" Width="{Binding DaysHeaderWidth}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:BusinessTextBlock d:DataContext="{d:DesignInstance Type=local:Business}" Business="{Binding}" ColumnWidth="20" HorizontalAlignment="Left" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DockPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListView>
</DockPanel>
The problem is that i can't find the source by RelativeSource Binding use FindByName.
The target control whatch on nested DataContext that is an item of the first and i cant set it in without adding to all this models the MyWidth property.
Is there a some enother way to bind them more correct?
I am thinking about a static property but it is not as correct as i want because i have planned to have a several instances of this control.

Related

Cannot associate CarouselNavigator with CarouselPanel when CarouselPanel is a child element within CarouselItemsControl ItemsPanelTemplate

i have xaml layout as shown below
<DockPanel Grid.Row="1" Grid.ColumnSpan="2">
<dxca:CarouselItemsControl x:Name="carouselItemsControl" ItemsSource="{Binding ImageList}" DockPanel.Dock="Top">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<dxca:CarouselPanel x:Name="carousel" AttractorPointIndex="2" IsRepeat="True" PathSizingMode="Proportional" FirstVisibleItemIndex="0" Height="Auto" ItemSize="180,120" IsAutoSizeItem="True" VisibleItemCount="5" ActiveItemIndex="1" AnimationTime="500" IsInvertedDirection="True" PathVisible="False">
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas>
<Image Source="{Binding Data.Data}" Width="480" Height="320" Margin="10"/>
<TextBlock Canvas.Left="100" Canvas.Top="10" Text="{Binding Identifier}" FontSize="12" FontWeight="Bold"></TextBlock>
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
</dxca:CarouselItemsControl>
<dxca:CarouselNavigator DockPanel.Dock="Bottom" Carousel="< TODO : BINDING EXPRESSION TO BIND TO CarouselPanel>" Width="300" Height="40" />
</DockPanel>
How do i bind the CarouselNavigator to the carousel object in the carousel property using xaml only?
Just use the CarouselItemsControl.Carousel property for this purpose:
<dxca:CarouselNavigator Carousel="{Binding Path=Carousel, ElementName=carouselItemsControl}" />

Horizontal stackpanel to wrap DataBinded ItemsControl

I have an ItemsControl for which the ItemsSource is Binded. i coded it as per the below so that it would add the UserControl (showing the different items) to a StackPanel with a horizontal orientation that then contains a wrappanel to wrap the items inside but it is not working. All of the items are showing but they are all on one line and do not wrap to a new line when needed.
How can this code be fixed to include wrapping?
<ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto"
Grid.Column="0" Grid.Row="1">
<ItemsControl x:Name="tStack"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Row="1"
ItemsSource="{Binding Items.View}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel x:Name="stckPnl" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<WrapPanel>
<Viewbox HorizontalAlignment="Left" Height="400">
<Controls1:MyItemsUserControl Padding="5"/>
</Viewbox>
</WrapPanel>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
I have solved this issue by setting Width for WrapPanel. In below snippet i have binded WrapPanel width to its Parent Grid control named MainGrid and Path to its ActualWidth. Please see below snippet will helps you sometimes to solve your issue
<ItemsControl Name="ThemesItemControl"
Grid.Column="1"
Grid.Row="1"
ItemsSource="{Binding InstalledCollection}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderThickness="0.5">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"
VerticalAlignment="Top"
Width="{Binding ElementName=MainGrid, Path=ActualWidth}"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Button Width="210"
Height="260"
Margin="20"
Tag="{Binding ID}"
Command="{Binding DataContext.ThemeSelectCommand,RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type Window}}}"
CommandParameter="{Binding RelativeSource={RelativeSource Self}}">
<StackPanel>
<Image Source="{Binding TileImage}"/>
</StackPanel>
</Button>
<TextBlock Text="{Binding Title}"
FontWeight="ExtraBold"
HorizontalAlignment="Center"
FontSize="15"
FontFamily="Segoe Print"
Foreground="Red"/>
<TextBlock Text="{Binding Description}"
HorizontalAlignment="Center"
FontSize="13"
FontFamily="Segoe Print"
Foreground="Red"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Showing a collection of items inside of a ItemsControl horizontally

Here is the XAML markup:
<ScrollViewer Grid.Column="1" Grid.Row="2" HorizontalScrollBarVisibility="Disabled" Width="990">
<StackPanel Margin="50 0 0 40">
<ItemsControl x:Name="streamList" ItemsSource="{Binding StreamInformations}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10" Orientation="Horizontal" >
<StackPanel Orientation="Horizontal">
<Image Source="{Binding ImageUrl}" Height="60" />
<StackPanel Margin="10 0 0 0" VerticalAlignment="Center">
<TextBlock Foreground="Black" Text="{Binding ChannelName}" FontSize="12" />
<TextBlock Foreground="#999" Text="{Binding PlayerName}" FontSize="10" />
<TextBlock Foreground="#999" Text="{Binding ViewCount}" FontSize="10" />
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
And this is how it looks:
I'd like these items to appear horizontally and flow down when it reaches the edge of the StackPanel.
It seems that currently, each item in my DataContext collection is creating it's own StackPanel, so this isn't what I want.
Any suggestions?
If you change the ItemsPanel template to either a WrapPanel or horizontal StackPanel, you can achieve the effect you are after...
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<!--other stuff here-->
</ItemsControl.ItemTemplate>
</ItemsControl>
In this snippet, the ItemsPanel is set to a WrapPanel oriented horizontally. The ItemTemplate would include the binding and styling you already have...

WPF Treeview HierarchicalDataTemplate Drag and drop

I have a treeview in wpf that is built using the xaml below. It is a well structured data source, and I am having a lot of trouble dragging and dropping. I have tried several methods, all to no avail. Can anyone tell me what the standard procedure is for doing this type of thing?
<TreeView x:Name="_treeView" ItemsSource="{Binding}" Grid.Row="0" Grid.Column="0">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type Logic:Statement}"
ItemsSource="{Binding Path=PagedChildren}">
<TextBlock Text="{Binding StatementName}"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type Logic:StatementPage}"
ItemsSource="{Binding Path=Children}">
<WrapPanel>
<TextBlock Text="Page: "/>
<TextBlock Text="{Binding PageIndex}"/>
</WrapPanel>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type Logic:StatementFund}">
<Border HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="2" CornerRadius="25">
<WrapPanel Margin="30 0 30 0" Width="150" Height="150" >
<StackPanel>
<TextBlock Text="Fund"/>
<WrapPanel>
<TextBlock Text="Fund: "/>
<TextBlock Text="{Binding FundNumber}"/>
</WrapPanel>
<WrapPanel Margin="10 0 0 0">
<TextBlock Text="{Binding ColumnIndex}"/>
</WrapPanel>
</StackPanel>
</WrapPanel>
</Border>
</DataTemplate>
<DataTemplate DataType="{x:Type Logic:StatementPreviousCycle}">
<Border HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="2" CornerRadius="25">
<WrapPanel Margin="30 0 30 0" Width="150" Height="150" >
<StackPanel>
<TextBlock Text="Previous Cycle"/>
<WrapPanel>
<TextBlock Text="Fund: "/>
<TextBlock Text="{Binding FundNumber}"/>
</WrapPanel>
<WrapPanel Margin="10 0 0 0">
<TextBlock Text="{Binding ColumnIndex}"/>
</WrapPanel>
</StackPanel>
</WrapPanel>
</Border>
</DataTemplate>
</TreeView.Resources>
</TreeView>
i use the techniques on this site for a general drag and drop.
tree view can get messy, if you want to know which node you are preivewMouseDown'ing on, to then use as your drag item you can end up walking the visual tree. there is some code to do that here. another way is to subclass treeview, and treeviewitem, then you can override the preview mouse down on each tree view item, and tell your derived parent treeview about it, which could set the tree view item to be the selected item.

Why does WrapPanel wrap TextBlocks horizontally but UserControls vertically?

This correctly wraps the TextBlocks horizontally:
<StackPanel DockPanel.Dock="Top" Margin="10" HorizontalAlignment="Left">
<TextBlock Text="Simple WrapPanel:" Margin="0 0 0 5"/>
<WrapPanel Orientation="Horizontal">
<TextBlock Text="one"/>
<TextBlock Text="two"/>
<TextBlock Text="thee"/>
<TextBlock Text="four"/>
</WrapPanel>
</StackPanel>
But this incorrectly wraps my UserControls vertically stacked on top of each other (I want them to be horizontally wrapped like the TextBlocks above):
<StackPanel DockPanel.Dock="Top" Margin="10" HorizontalAlignment="Left">
<TextBlock Text="Simple WrapPanel:" Margin="0 0 0 5"/>
<WrapPanel Orientation="Horizontal">
<ItemsControl ItemsSource="{Binding CustomerViewModels}" Width="Auto" BorderThickness="0">
<ItemsControl.ItemTemplate>
<DataTemplate>
<views:CustomerSimpleItemView />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</WrapPanel>
</StackPanel>
CustomerSimpleItemView:
<UserControl x:Class="TestMvvmExample2341.Views.CustomerSimpleItemView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock Text="{Binding LastName}" FontWeight="Bold" Width="100"/>
</UserControl>
What do I have to do in my UserControl so that they wrap horizontally?
added: even if I change all widths and heights in the usercontrol to Auto, it still stacks vertically...:
<UserControl x:Class="TestMvvmExample2341.Views.CustomerSimpleItemView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="Auto" Height="Auto">
<TextBlock Text="{Binding LastName}" FontWeight="Bold" Width="Auto" Height="Auto"/>
</UserControl>
In your second sample, try to use the WrapPanel inside a ItemsPanelTemplate for the ItemsControl, otherwise the ItemsControl uses a StackPanel by default and your WrapPanel doesn't do anything as there is nothing to wrap.
<StackPanel DockPanel.Dock="Top" Margin="10" HorizontalAlignment="Left">
<TextBlock Text="Simple WrapPanel:" Margin="0 0 0 5"/>
<ItemsControl ItemsSource="{Binding CustomerViewModels}" Width="Auto" BorderThickness="0">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<views:CustomerSimpleItemView />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
This is happening because the ItemsControl, by default uses a StackPanel in vertical orientation to layout it child objects. So the wrap panel is actually only laying out one child which is the ItemsControl. What you wan't to do is set the ItemsControl's ItemsPanel property so that is uses a WrapPanel for layout. Your code would look like this:
<StackPanel DockPanel.Dock="Top"
Margin="10"
HorizontalAlignment="Left">
<TextBlock Text="Simple WrapPanel:"
Margin="0 0 0 5" />
<!-- Note I am removing the WrapPanel that was surrounding the ItemsControl -->
<ItemsControl ItemsSource="{Binding CustomerViewModels}"
Width="Auto"
BorderThickness="0">
<!-- This is the important part. Here we set the ItemsPanel template -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<views:CustomerSimpleItemView />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>

Resources