I am looking for a way to set image background there.. Because it is white on a gray background.. Selected item trigger doesnt work because there is no parent ComboboxItem..
<ComboBox.Resources>
<DataTemplate x:Key="DataTemplate1">
<Border x:Name="border" Padding="10">
<Image Source="{Binding }" Stretch="None"/>
</Border>
</DataTemplate>
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
<WrapPanel Width="{Binding ActualWidth , RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type ComboBox }}}" Background="{StaticResource ListItemSelected}" Orientation="Horizontal" IsItemsHost="True"/>
</ItemsPanelTemplate>
</ComboBox.Resources>
Related
Please tell me about WPF, Binding, MVVM, I have 2 problems:
Click on the other rectangle and drag it left and right within the
border containing it.
To mouse over the right edge of the rectangle, click and drag to
change its width. Please guide me.
Image of my software interface here:
Here is a small code of 1 border, as shown I have 2 borders and 1 timeline:
<Border x:Name="BoderN" Background="Transparent" Grid.Row="1" Margin="3" BorderBrush="Black" BorderThickness=".5" AllowDrop="True">
<ItemsControl ItemsSource="{Binding HuNLst}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="StackN" Orientation="Horizontal" Margin="0 2"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0 0 1 0" Background="White">
<Border BorderBrush="Black" BorderThickness=".7">
<Grid x:Name="gridElement" Width="{Binding Duration}">
<Rectangle x:Name="rectOuter" Fill="Blue" Opacity=".3" />
<Grid HorizontalAlignment="Center">
<TextBlock x:Name="txt2" Text="{Binding Title}" Margin="0,0,0,0" Width="Auto" HorizontalAlignment="Stretch"/>
</Grid>
</Grid>
</Border>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
I have a grid that contains dynamically created buttons.
I have a selector tool that will select a "rectangle" of buttons and do whatever on them.
I'm stuck at this point, because I'm going down the MVVM route.. but I previously had a list of all the buttons and would do:
var buttonPos = button.TransformToAncestor(someGrid).Transform(new Point(0, 0));
Now I do not have the luxury of being able to get all the buttons in my itemscontrol to do that (or at least I don't know how).
This is a section of my XAML.
<Grid Name="mainGrid" DockPanel.Dock="Left" MouseDown="MainGrid_MouseDown" MouseUp="MainGrid_MouseUp" MouseMove="MainGrid_MouseMove" Background="Transparent"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
MinWidth="{Binding GridWidth}" Height="{Binding GridHeight}">
<ItemsControl x:Name="ObjItemControl" ItemsSource="{Binding ObjCompositeCollection}">
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Row" Value="{Binding Row}"/>
<Setter Property="Grid.Column" Value="{Binding Column}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid DockPanel.Dock="Top" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Name="objGrid" Grid.Row="1"
Width="{Binding MinWidth, ElementName=mainGrid}"
Height="{Binding Height, ElementName=mainGrid}"
engine:GridHelper.RowCount="{Binding RowCount}"
engine:GridHelper.ColumnCount="{Binding ColumnCount}" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type engine:ObjA}">
<ToggleButton Content="{Binding Id}"
Tag="{Binding Id}"
IsChecked="{Binding IsSelected}"
Height="{Binding ElementName=ObjItemControl,
Path=DataContext.ButtonHeightWidth}"
Width="{Binding ElementName=ObjItemControl,
Path=DataContext.ButtonHeightWidth}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="{Binding ElementName=wellPlateItemControl,
Path=DataContext.ButtonMarginToUse}"
Padding="2"
PreviewMouseLeftButtonDown="Button_PreviewMouseLeftButtonDown"
PreviewMouseLeftButtonUp="Button_PreviewMouseLeftButtonUp"
MouseEnter="Button_MouseEnter"
MouseLeave="Button_MouseLeave"
Style="{StaticResource ObjButton}">
</ToggleButton>
</DataTemplate>
<DataTemplate DataType="{x:Type engine:GridLabeller}">
<TextBlock Text="{Binding HeaderName}" Style="{StaticResource GridHeaders}"/>
</DataTemplate>
</ItemsControl.Resources>
</ItemsControl>
<ItemsControl ItemsSource="{Binding RectForMarquee}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Rectangle Width="{Binding Width}" Height="{Binding Height}"
Visibility="{Binding Visibility}"
Stroke="{StaticResource ResourceKey=SecondaryThemeColour}"
StrokeThickness="2" StrokeDashArray="2,1"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<!--<Canvas>
<Rectangle x:Name="selectionBox" Visibility="Collapsed" Stroke="{StaticResource ResourceKey=SecondaryThemeColour}" StrokeThickness="2" StrokeDashArray="2,1"/>
</Canvas>-->
</Grid>
I want to be able to get all of the ObjA toggle buttons and do that TransformToAncestor check... unless there is a better way?
I can also do this in the View code-behind but not sure if this is a bit naughty...
private void MainGrid_MouseUp(object sender, MouseButtonEventArgs e)
{
// Need to find a better way for this...
List<UIElement> tgInItemControl = new List<UIElement>();
foreach (var toggleButton in VisualHelperExtensions.FindVisualChildren<ToggleButton>(ObjItemControl))
{
tgInItemControl.Add(toggleButton);
}
viewModel.MainGrid_MouseUp(tgInItemControl, e);
}
I wan't to display a grid view list item but I don't know why the gridview (in purple) take all the place I wan't but the grid elements does not take all the width evailable they wrap the content, what I'm missing ?
<GridView
Background="Purple"
Grid.Row="1"
Margin="20,20,20,0"
ItemsSource="{Binding MyItems}"
Style="{StaticResource GridViewStyle}"
SelectionMode="Multiple"
HorizontalContentAlignment="Stretch">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="White"
BorderThickness="1"
BorderBrush="Gray">
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Stretch">
<TextBlock Text="{Binding Name, Mode=OneWay}"/>
<TextBlock Text="{Binding Creator, Mode=OneWay}"/> </StackPanel>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="0,0,0,20"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"
VerticalAlignment="Center"
HorizontalAlignment="Center"
MaximumRowsOrColumns="1"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
Here is the render :
If you want the items to stack like this, you should be using a ListView instead. All you have to do is to remove the whole <GridView.ItemsPanel>...</GridView.ItemsPanel> code, change the GridView to ListView and TargetType="GridViewItem" to TargetType="ListViewItem".
It looks like you want a single-column GridView. Try to use a ListView instead, and remove the custom ItemsPanelTemplate from your code. In the ListView items will use all the width available.
Alternatively set the HorizontalAlignment="Stretch" in your ItemsWrapGrid.
I would like to create a listview, which contains some items.
Each items have a specific size (same for all) and are clickable.
I've created the listview, but once I have reach the max width size of the listview, it wraps and goes on a second line. I would like to have a horizontal Scroll Bar and all my items on one line.
For exemple, I have 5 items, but it displays that :
I would like to have the horizontal scrollbar to be able to see the fifth.
Here is my xaml code :
<ListView Background="#1A1A1A" HorizontalAlignment="Stretch" Margin="10,0,10,0" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Auto" Height="100" ItemsSource="{Binding Projects}" SelectionChanged="ListView_SelectionChanged">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType=ListView}}"
MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType=ListView}}" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#CCCCCC" BorderThickness="1">
<StackPanel Orientation="Horizontal" Height="100" Width="200">
<TextBlock Height="100" Width="200" FontSize="20" Padding="0,25,0,0" TextAlignment="Center" Foreground="#1A1A1A" Background="{Binding BackgroundColor}" Text="{Binding Title}" />
</StackPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
you can change wrap panel to stackPanel
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType=ListView}}"
MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType=ListView}}" />
</ItemsPanelTemplate>
to
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}" />
</ItemsPanelTemplate>
I have a ListBox which displays its items in a WrapPanel. The ListBox itself is embeddded in Border. But the more items I put into the ListBox, the larger window gets. How can I prevent that and display the vertical scrollbar instead?
I found several other posts but nothing worked so far.
<Border Background="WhiteSmoke" BorderBrush="Gray" BorderThickness="4" Margin="5">
<ListBox Background="Transparent" BorderThickness="0" Height="Auto"
ItemsSource="{Binding Path=Snapshots, RelativeSource={RelativeSource AncestorType=Demo:CameraCanvas}}"
SelectedItem="{Binding Path=Snapshots.SelectedSnapshot, RelativeSource={RelativeSource AncestorType=Demo:CameraCanvas}}"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.CanContentScroll="True"
>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel
Width="{Binding (FrameworkElement.ActualWidth),
RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType=ListView}}"
MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType=ListView}}" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border CornerRadius="5" Background="WhiteSmoke" BorderBrush="Gray" BorderThickness="2" Margin="5" Padding="2">
<StackPanel Orientation="Vertical">
<Image Source="{Binding Path=Image, UpdateSourceTrigger=PropertyChanged}" Width="64" Height="64" Stretch="Uniform" StretchDirection="Both" />
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>
Put the ListBox in a DockPanel, the dockpanel should be constrainted in size.
read the following msdn topic Panels Overview