We Keep Coding

How can I change the direction in which children are added to a wrapPanel?

I have a WrapPanel which is the parent of many TextBlock in an ItemsControl.
Each TextBlock displays a word in Arabic, and the whole forms a sentence. To display the sentence, I put in my Binding List to the ItemsControl the words in the order they are in an Arabic reading (from right to left).
public UserControl_ArabicVerseSelectable(List<WordInVerse> wordsInVerse)
{
InitializeComponent();
List<WordsOfUC> items = new List<WordsOfUC>();
foreach (WordInVerse word in wordsInVerse)
{
items.Add(new WordsOfUC() { Arabic = word.Arabic, WordID = word.WordID });
}
items.Reverse();
ItemControl_Words.ItemsSource = items;
}
WPF:
<ItemsControl x:Name="ItemControl_Words"
HorizontalAlignment="Center"
Margin="0,10,0,0" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical"
Margin="5,0,5,0">
<TextBlock Tag="{Binding WordID}"
x:Name="textBlock_arabic"
Text="{Binding Arabic}"
FontSize="40"
HorizontalAlignment="Center"
FontFamily="Noto Naskh Arabic"
Cursor="Hand"
MouseDown="textBlock_arabic_MouseDown"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
That is to say:
...word3, word2, word1
The problem is that when the sentence is only one line long in the wrapPanel, it displays very well:
But as soon as the sentence is two lines long...
The last line should be above the first, as it is the beginning of the sentence, but since the words are added from right to left, first the first line fills and then only the second.
So is there any way to add children to the WrapPanel from right to left, or if not, is there any way to reverse all the lines in a WrapPanel?

Add The "FlowDirection" Style Triggers to your TextBlock
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="5,0,5,0">
<TextBlock Tag="{Binding WordID}" x:Name="textBlock_arabic" Text="{Binding Arabic}" FontSize="40" HorizontalAlignment="Center"
FontFamily="Noto Naskh Arabic" Cursor="Hand"
MouseDown="textBlock_arabic_MouseDown">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="FlowDirection"
Value="RightToLeft">
<Setter Property="TextAlignment"
Value="Right" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
NOTE: I took this of a project a long time ago.

How do I select a new ListBoxItem in C# WPF after I just inserted it automatically

I have the following problem with my calculator app which I'm doing in the MVVM pattern.
I'm redoing the Windows 10 Calculator in Standard Mode. I made an ObservableCollection of MemoryItem.
MemoryItem is a class that contains an int for the Index, a double for the value and a RelayCommand for the MemoryButtons.
Basically it looks like this and is connected to my ViewModel:
public class MemoryItem
{
public double MemoryItemValue { get; set; }
public int SelectedMemoryItemIndex { get; set; }
public RelayCommand MemoryItemChange { get; set; }
}
So I've binded the SelectedMemoryItemIndex Property to the SelectedItemIndex in WPF.
My ListBox looks like this:
<ListBox Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource MemoryListBoxStyle}"
Visibility="{Binding MemoryVisibility}" ItemsSource="{Binding MemoryCollection}"
SelectedItem="{Binding SelectedMemoryItem}" SelectionMode="Extended" SelectedIndex="{Binding SelectedMemoryItemIndex}"
HorizontalContentAlignment="Right"/>
While the style of it looks like this:
<Style x:Key="MemoryListBoxStyle" TargetType="ListBox">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<UniformGrid Rows="2" Margin="5">
<TextBlock Style="{StaticResource DisplayStyle}" Text="{Binding MemoryItemValue}" FontSize="20"/>
<DockPanel LastChildFill="False">
<Button Content="MC" Style="{StaticResource MemoryItemButton}"
Command="{Binding MemoryItemChange}" CommandParameter="{x:Static md:MemoryUsage.Clear}"/>
<Button Content="M+" Style="{StaticResource MemoryItemButton}"
Command="{Binding MemoryItemChange}" CommandParameter="{x:Static md:MemoryUsage.Add}"/>
<Button Content="M-" Style="{StaticResource MemoryItemButton}"
Command="{Binding MemoryItemChange}" CommandParameter="{x:Static md:MemoryUsage.Substract}"/>
</DockPanel>
</UniformGrid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
The bindings work BUT I don't know how to have the new MemoryItem selected after Inserting the new MemoryItem and deleting the new one. Is there a better of way inserting the new item? ObservableCollection doesn't include a method to update a specific item (as far as I know).
This is the method I'm using to add the value to the MemoryItemValue and insert it in my Collection:
case MemoryUsage.Add:
if (SelectedMemoryItemIndex == -1)
{
SelectedMemoryItemIndex = 0;
}
MemoryItemValue += Eingabe1;
MemoryCollection.Insert(SelectedMemoryItemIndex +1, MItem);
MemoryCollection.RemoveAt(SelectedMemoryItemIndex);
break;
This way it worked but I always have to select the new inserted MemoryItem.
I'm thankful for ANY help provided by you.
Please keep in mind that I'm a beginner in programming and this is my first SO question ever.

Here is a post that helps answer this question.
But basically:
Create an IsSelected property on your MemoryItem class and bind ListBoxItem.IsSelected to that property.
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
</Style>
</ListBox.ItemContainerStyle>
When you want your new item selected, just set IsSelected to true.
IsSelected = true;
And shazam! It should work.
Here is code copied from another answer that may give you more information.
<ListBox ItemsSource="{Binding Items, Source={StaticResource ViewModel}}"
SelectionMode="Extended">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="IsSelected" Value="{Binding IsItemSelected}"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding ItemText}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Forgive me for leaving that example exactly as I found it.

Which Control will be more appropriate to the output shown below?

My project was working good before I made some changes in my database and my code.
Before Changes :
Output :
Tile1 Tile7 .......... Tile(N-x)
Tile2 Tile8 Tile(N-x+1)
Tile3 Tile9 ....
Tile4 Tile10 ....
Tile5 Tile11 ....
Tile6 Tile12 Tile(N)
Table in Database: 1------- [Primary Key]
Title |
Background |
Image |
ParentID *------- [Foreign Key]
XAML :
<ListBox Grid.Row="1" x:Name="lst"
ItemsSource="{Binding ChildrenMenus}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Vertical" MaxHeight="{Binding ElementName=lst, Path=ActualHeight}"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Width" Value="250" />
<Setter Property="Height" Value="125" />
<Setter Property="Margin" Value="2.5" />
<Setter Property="Padding" Value="2.5" />
<Setter Property="Background" Value="{Binding Background, Converter={StaticResource stringToBrushConverter}}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="VerticalContentAlignment" Value="Bottom" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="{Binding Background, Converter ={StaticResource stringToBrushConverter}}" />
</Trigger>
</Style.Triggers>
</Style>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="125" Width="250">
<Path Data="{Binding Image}" VerticalAlignment="Center"
Stretch="Uniform" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"
Width="68" Height="68" Margin="10" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
<TextBlock Text="{Binding Title, Converter={StaticResource spaceToNewLineConverter}}" VerticalAlignment="Top"
Margin="40,10,10,10" FontSize="24" Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Currently:
Required Output:
Text1 Text2 Text3 .......... Text(N)
Tile1 Tile3 Tile7 Tile9 Tile13 Tile(N-x) .....
Tile2 Tile4 Tile8 Tile10 Tile(N-x + 1) .....
Tile5 Tile11 .... .....
Tile6 Tile12 .... Tile(N)
Changes in database:
I have tried many changes in ViewModel and XAML files and now it got messed up. So, if I post those codes then also it will not be useful to anybody.
I hope I have mentioned everything correctly in question.
Update
First of all I am sorry. My internet connection was down for the whole day. I have read your messages just now.
Now, I have got something. I can get data from database in Design_Master_MenuItems. See the Image below:
But still Binding does not work correctly. I mean my ListBoxes inside ItemsControl are not being populated.
Here is my current XAML:
<ItemsControl ItemsSource="{Binding MenuCategories}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel IsItemsHost="True" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}" FontSize="30" />
<ListBox Grid.Row="1" x:Name="lst"
ItemsSource="{Binding Design_Master_TileItems}" DisplayMemberPath="Title">
</ListBox>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Here is myViewModel :
public class MainWindowViewModel : ViewModelBase
{
public MainWindowViewModel()
{
using (Entities db = new Entities())
{
ParentMenus = new ObservableCollection<Design_Master_ParentMenus>(from d in db.Design_Master_ParentMenus select d);
if (SelectedParent != null)
MenuCategories = new ObservableCollection<Design_Master_Categories>(from d in db.Design_Master_Categories
where d.ParentMenuID == SelectedParent.ParentMenuID
select d);
}
}
private ObservableCollection<Design_Master_ParentMenus> _parentMenus;
public ObservableCollection<Design_Master_ParentMenus> ParentMenus
{
get
{
return _parentMenus;
}
set
{
_parentMenus = value;
OnPropertyChanged("ParentMenus");
}
}
private Design_Master_ParentMenus _selectedParent;
public Design_Master_ParentMenus SelectedParent
{
get
{
return _selectedParent;
}
set
{
_selectedParent = value;
OnPropertyChanged("SelectedParent");
using (Entities db = new Entities())
{
MenuCategories = new ObservableCollection<Design_Master_Categories>(from d in db.Design_Master_Categories
where d.ParentMenuID == SelectedParent.ParentMenuID
select d);
}
}
}
private ObservableCollection<Design_Master_Categories> _menuCategories;
public ObservableCollection<Design_Master_Categories> MenuCategories
{
get
{
return _menuCategories;
}
set
{
_menuCategories = value;
OnPropertyChanged("MenuCategories");
}
}
}
Yes, and I will not be available for next 10 hours. If you find any mistake in the above code you may comment. Thanks for a big helping hand.
Update2
Yes now I find the binding error in Output window:
System.Windows.Data Error: 17 : Cannot get 'Design_Master_TileItem' value (type 'ICollection`1') from ''
(type 'Design_Master_Catego_79D2EFE4D31EC6575261E40C340C9D078D37C022F94C70A5F8A88A9017957C24').
BindingExpression:Path=Design_Master_TileItem;
DataItem='Design_Master_Catego_79D2EFE4D31EC6575261E40C340C9D078D37C022F94C70A5F8A88A9017957C24'
(HashCode=28842409); target element is 'ListBox' (Name=''); target property is 'ItemsSource' (type
'IEnumerable') TargetInvocationException:'System.Reflection.TargetInvocationException: Property accessor
'Design_Master_TileItem' on object
'System.Data.Entity.DynamicProxies.Design_Master_Catego_79D2EFE4D31EC6575261E40C340C9D078D37C022F94C70A5F8A8
8A9017957C24' threw the following exception:'The ObjectContext instance has been disposed and can no
longer be used for operations that require a connection.' ---> System.ObjectDisposedException: The
ObjectContext instance has been disposed and can no longer be used for operations that require a
connection.
System.Windows.Data Error: 17 : Cannot get 'Design_Master_TileItem' value (type 'ICollection`1') from ''
(type 'Design_Master_Catego_79D2EFE4D31EC6575261E40C340C9D078D37C022F94C70A5F8A88A9017957C24').
BindingExpression:Path=Design_Master_TileItem;
DataItem='Design_Master_Catego_79D2EFE4D31EC6575261E40C340C9D078D37C022F94C70A5F8A88A9017957C24'
(HashCode=13006057); target element is 'ListBox' (Name=''); target property is 'ItemsSource' (type
'IEnumerable') TargetInvocationException:'System.Reflection.TargetInvocationException: Property accessor
'Design_Master_TileItem' on object
'System.Data.Entity.DynamicProxies.Design_Master_Catego_79D2EFE4D31EC6575261E40C340C9D078D37C022F94C70A5F8A8
8A9017957C24' threw the following exception:'The ObjectContext instance has been disposed and can no
longer be used for operations that require a connection.' ---> System.ObjectDisposedException: The
ObjectContext instance has been disposed and can no longer be used for operations that require a
connection.

First you want a ListView with a horizontal StackPanel as the panel template to get your "big" blocks.
Then, for each block, you'll need a "header" and then another ListView, this time with a vertical WrapPanel as the panel template. Below is a "shell" example that would need some styling and bindings to get it to look exactly the way you want, but hopefully it gets you on the right track.
<ListView>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock/>
<ListView>
<ListView.ItemPanelTemplate>
<WrapPanel Orientation="Vertical"></WrapPanel>
</ListView.ItemPanelTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock/>
</DataTemplate>
</ListView.ItemTemplate>
<ListView>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView>
Update:
To have only "one selection", make sure that selecting either list box calls the setter on your property. I normally don't do this with RelativeSource, so here is an example if you want to try it (where your window/user control is named "Root":
"{Binding ElemantName=Root, Path=DataContext.SelectedTileItem}"
A converter is going to get really complicated to do this. This answer has an accepted way of setting up what you are trying to do, and it is probably the way you want to go (I would use the group name route, since that is basically what you are trying to do).

Drawing a border only on the last item inside my listview

I'm trying to create a control like this:
The control denotes the status completion of 4 tile objects (in the above attached pic 2 is completed and 2 is not)
For achieving this I have created a ListView with horizontal orientation, and I'm creating a datatemplate which has some borders inside.Not sure whether this is the right approach or whether a simpler approach is possible, however the issue I'm facing is the following:
I'm not able to close the border of the last item..this is because I have 4 items inside my itemsource of the listview and each item draws a border to it's left. Question is how do I specifically draw the right border for the last item.
The line which passess through the middle should actually go behind the gray shading..how do I achieve that?
Code is as below:
<Style x:Key="FishBoneStyle" TargetType="{x:Type Border}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Completed}" Value="True">
<Setter Property="Background" Value="DarkGray"/>
<Setter Property="Margin" Value="0,3,-2,3"/>
</DataTrigger>
</Style.Triggers>
</Style>
<DataTemplate x:Key="FishBoneTemplate">
<Grid Height="25">
<Border BorderThickness="1,0,0,0" BorderBrush="Black" Height="25" HorizontalAlignment="Left" VerticalAlignment="Stretch"/>
<Border Style="{StaticResource FishBoneStyle}" x:Name="FishBoneBorder" Width="25">
</Border>
</Grid>
</DataTemplate>
<!-- The Main Grid-->
<Grid Grid.Row="1" Height="30" Width="130" HorizontalAlignment="Left">
<ListView BorderThickness="0,0,0,0" BorderBrush="Black" ItemsSource="{Binding ProgressTiles}" ItemTemplate="{StaticResource FishBoneTemplate}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
<!-- The line which passess through the center-->
<Border VerticalAlignment="Center" HorizontalAlignment="Left" Width="100" Margin="3,0,2,0" BorderBrush="Black" BorderThickness="1"></Border>
</Grid>
..and here is the model which is lying inside an observable collection in my viewmodel.There will be always 4 of them.
public class ProgressTile : INotifyPropertyChanged
{
private bool _completed;
public bool Completed
{
get { return _completed; }
set
{
_completed = value;
InvokePropertyChanged("Completed");
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void InvokePropertyChanged(string e)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(e));
}
}
Please can you suggest how to get a look consistent to the attached picture. Also can you please suggest how to solve the issue with drawing a border for the last item and sending the line passing through the middle to background?

Can be done much simpler:
<Window x:Class="So17362172FishBoneProgressBar.MainWindow" x:Name="root"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Fish Bone Progress Bar" Height="350" Width="525" SnapsToDevicePixels="True">
<Grid Width="100" Height="20">
<TickBar Fill="Gray" TickFrequency="25" Placement="Top"/>
<TickBar Fill="Gray" TickFrequency="25" Placement="Bottom"/>
<Line Stroke="Gray" X1="0" Y1="10" X2="100" Y2="10"/>
<ItemsControl ItemsSource="{Binding Tiles, ElementName=root}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Rectangle x:Name="rect" Fill="Gray" VerticalAlignment="Center" Width="25" Height="10"/>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Completed}" Value="False">
<Setter TargetName="rect" Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</Window>
ListView is unnecessary. Much simpler ItemsControl is enough for this.
Ticks can be drawn with TickBar. As inner ticks are drawn smaller, two tick bars are put over each other (it shouldn't be an issue, as these are very lightweight).
Order of drawing is determined by order in the logical tree. If you want something to be drawn over another, you put it into XAML lower.
Grid is unnecessary if it contains only one control.

Two overlapping ListBoxes. Selection problem

I'm trying to display shapes in two separate Listboxes occupying the same space. I've set the Background to both Transparent and {x:Null} but the mouseclick is still getting captured by the topmost Listbox so I can't select any shapes from the underlying ListBox.
Here is some sample code reproducing the problem.
<Grid>
<!-- ListBox 1 -->
<ListBox Background="{x:Null}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="{x:Null}"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="Transparent">
<Ellipse Width="100" Height="100" Stroke="Blue" StrokeThickness="10"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
1
</ListBox>
<!-- ListBox 2 -->
<ListBox Background="{x:Null}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="{x:Null}"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Canvas.Left" Value="100"/>
<Setter Property="Canvas.Top" Value="100"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Ellipse Width="100" Height="100" Stroke="Blue" StrokeThickness="10"/>
</DataTemplate>
</ListBox.ItemTemplate>
1
</ListBox>
</Grid>
This is how I solved this problem for now but I'm more than open for other suggestions :) I enabled hittesting on the Grid and disabled it for both ListBoxes. Then I did the hittesting in the event handler instead
<Grid MouseDown="Grid_MouseDown"
IsHitTestVisible="True"
Background="Transparent">
<!-- ListBox 1 -->
<ListBox Background="Transparent"
IsHitTestVisible="True"
..>
</ListBox>
<!-- ListBox 2 -->
<ListBox Background="Transparent"
IsHitTestVisible="True"
..>
</ListBox>
</Grid>
Event handler and hittesting
private void Grid_MouseDown(object sender, MouseButtonEventArgs e)
{
Grid grid = sender as Grid;
Point ptCurrent = e.GetPosition(grid);
VisualTreeHelper.HitTest(grid, null, new HitTestResultCallback(HitTestCallback), new PointHitTestParameters(ptCurrent));
}
public HitTestResultBehavior HitTestCallback(HitTestResult htrResult)
{
ListBoxItem listBoxItem = GetVisualParent<ListBoxItem>(htrResult.VisualHit);
if (listBoxItem != null)
{
listBoxItem.IsSelected = true;
return HitTestResultBehavior.Stop;
}
return HitTestResultBehavior.Continue;
}
public T GetVisualParent<T>(object child) where T : Visual
{
DependencyObject c = child as DependencyObject;
while ((c != null) && !(c is T))
{
c = VisualTreeHelper.GetParent(c);
}
return c as T;
}

You can bind multiple sets of data to a single ListBox by using a CompositeCollection as the items source:
<ListBox ...>
<ListBox.ItemsSource>
<CompositeCollection>
<CollectionContainer Collection={Binding ...}" />
<CollectionContainer Collection={Binding ...}" />
</CompositeCollection>
</ListBox.ItemsSource>
</ListBox>
You can then use data templates to control the appearance of different data types. You can either use implicit data templates or you can use an ItemTemplateSelector.
For more information about using and binding to a CompositeCollection, see this resource: How do you bind a CollectionContainer to a collection in a view model?

You could bind your ListBoxes to a Visibility variable. This way you can make the bottom box visible when you are in a situation where the bottom one would be selected and the top on collapsed and visa verse when you need the top one to be selected.