Get binding from listbox item label - wpf

I have a listbox in WPF which consists of few labels and a rectangle.
I am trying to get all the label values of items in a ListBox.
My WPF markup for ListBox is:
<ListBox x:Name="izabraniList" ItemTemplate="{DynamicResource izabraniIzbornik}" Margin="0,80,10,108" HorizontalAlignment="Right" Width="289" Background="{x:Null}" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
<ListBox.Resources>
<DataTemplate x:Key="izabraniIzbornik">
<Border BorderBrush="white" CornerRadius="2,2,2,2" BorderThickness="1,1,1,1">
<StackPanel Orientation="Horizontal" Width="254" Height="64" UseLayoutRounding="False" Opacity="100">
<DockPanel>
<Rectangle Height="62" Width="62"
Margin="2,0" RadiusX="5" RadiusY="5" >
<Rectangle.Fill>
<ImageBrush ImageSource="{Binding Path=ART_SIFRA, Converter={StaticResource ImageSourceConverter}}"/>
</Rectangle.Fill>
</Rectangle>
</DockPanel>
<DockPanel Width="133" >
<Label Content="{Binding ART_NAZIV}"
VerticalAlignment="Center"
HorizontalAlignment="left"
FontSize="12" Width="auto" Foreground="#FF303030" FontWeight="Bold" />
</DockPanel>
<DockPanel HorizontalAlignment="right" Width="55" Height="64">
<DockPanel HorizontalAlignment="Right" VerticalAlignment="top" Height="20" FlowDirection="RightToLeft"/>
<DockPanel HorizontalAlignment="Right" VerticalAlignment="bottom" Height="64" FlowDirection="RightToLeft" Width="55">
<Label x:Name="cijena" Content="{Binding SKC_PRICE}" FontSize="11" DockPanel.Dock="Right" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" Width="55" />
<Label Content="{Binding kolicina}" FontSize="11" DockPanel.Dock="Right" HorizontalAlignment="left" VerticalAlignment="top" FontWeight="Bold" Width="55" />
</DockPanel>
</DockPanel>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.Resources>
</ListBox>
And I would like to do something like this:
For Each i As String In izabraniList.Items("SKC_PRICE")
Console.WriteLine(i)
Next

make a separate property in your class that flattens the list (i.e.
public string property { get { return String.Join(", ", izabranilist.Select(x => x.Skc_Price).toarray()); } }
and then bind that to the label.

Related

How to change the Border width and height in code from a <ItemsControl.ItemTemplate><DataTemplate>

I would like to get the width and height of both the borders from code and change them programmatically. I have a button that should change the size of both of them but I don't know how to get them from my class. How can I do it? The size of both is always the same
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto" x:Name="games_list" MouseDoubleClick="Games_list_MouseDoubleClick" Background="{StaticResource DefaultBackgroundColor}" Padding="10" BorderBrush="{x:Null}" Foreground="{x:Null}" SelectionChanged="Games_list_SelectionChanged" KeyDown="Games_list_KeyDown" MouseEnter="Games_list_MouseEnter" MouseLeave="Games_list_MouseLeave" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Margin="10" Width="150" Height="225" Background="{StaticResource DetailsColor}">
<StackPanel>
<Border Width="150" Height="225">
<DockPanel>
<Image Source="/icons/delete.png" Width="24" Height="24" HorizontalAlignment="Left" Margin="2" VerticalAlignment="Top" MouseLeftButtonUp="Delete_MouseLeftButtonUp" >
<Image.Effect>
<DropShadowEffect/>
</Image.Effect>
</Image>
<Image Source="/icons/info.png" Width="24" Height="24" HorizontalAlignment="Right" Margin="2" VerticalAlignment="Top" MouseLeftButtonUp="Info_MouseLeftButtonUp" >
<Image.Effect>
<DropShadowEffect/>
</Image.Effect>
</Image>
</DockPanel>
<Border.Background>
<ImageBrush ImageSource="{Binding Image_path}"/>
</Border.Background>
</Border>
<Rectangle Fill="#4C000000" Margin="0,-20,0,10" Height="20"/>
<TextBlock Text="{Binding Name}" Foreground="White" FontSize="16" TextAlignment="Center" Margin="0,-32,0,44" />
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
You only need to set a Binding, the following is a minimalist demo of mine:
(Use the slider to control the width and height of the border.)
<StackPanel Margin="30,40,37,81">
<Border Width="{Binding Path=Value,ElementName=slider1}" Height="{Binding Path=Value,ElementName=slider1}" BorderBrush="Black" Margin="5">
<DockPanel Background="Black">
<Label >TEST</Label>
</DockPanel>
</Border>
<Slider x:Name="slider1" Maximum="100" Minimum="0" Margin="5" />
</StackPanel>
Updated:
xaml:
<Grid Loaded="Grid_Loaded">
<StackPanel Margin="30,40,37,81">
<Border Name="border1" BorderBrush="Black" Margin="5" Loaded="Border_Loaded">
<DockPanel Background="Black">
</DockPanel>
</Border>
</StackPanel>
</Grid>
code:
private void Border_Loaded(object sender, RoutedEventArgs e)
{
int c = 500;
int d = 300;
this.border1.SetBinding(Border.HeightProperty, new Binding(".") { Source = c });
this.border1.SetBinding(Border.WidthProperty, new Binding(".") { Source = d });
}

Oxyplot (wpf) get rid of empty space to the right of PlotView

I'm using OxyPlot for WPF and the PlotView adds a space to the right of it instead of filling up the entire area as you can see in this picture:
I added the black box to show to where the PlotView should extend to.
But in the designer the PlotView does extrend so far:
Is this something that is fixable? Or is the only way to fix it is to "cheat" and instead of fitting controls together in a panel i just overlap the rightside over the PlotView.
<Grid Background="{StaticResource Milky}">
<DockPanel>
<Grid Height="50" Width="5" DockPanel.Dock="Left"/>
<Grid Height="5" Width="50" DockPanel.Dock="Top"/>
<Grid Width="122" DockPanel.Dock="Right" VerticalAlignment="Top">
<StackPanel>
<Border Margin="3" Height="248" Width="116" BorderThickness="1" BorderBrush="{StaticResource LightGrayGray}" CornerRadius="3">
<ItemsControl ItemsSource="{Binding Path=GraphLineItems}" HorizontalAlignment="Left">
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:GraphLineItemV DataContext="{Binding }" ColorPalette="{StaticResource MilkyPalette}">
</local:GraphLineItemV>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
<Border Margin="3 0 3 3" Height="128" BorderThickness="1" BorderBrush="{StaticResource LightGrayGray}" CornerRadius="3">
<WrapPanel>
<local:IconButton Width="32" Command="{Binding Path=FitToFrameCmd}" ToolTip="{StaticResource ToolTipFitGraph}" Margin="1" Height="32" BorderThickness="1" IconHeight="28" IconWidth="28" ColorPaletteFore="{StaticResource DarkestGraySolid}" ColorPalette="{StaticResource MilkyGPalette}" Image="{StaticResource ZoomIcon}" IconMargin="1"/>
<local:IconButton Width="32" Command="{Binding Path=ClearGraphCmd}" ToolTip="{StaticResource ToolTipClearGraph}" Margin="1" Height="32" BorderThickness="1" IconHeight="24" IconWidth="24" ColorPaletteFore="{StaticResource DarkestGraySolid}" ColorPalette="{StaticResource MilkyGPalette}" Image="{StaticResource DeleteIcon}" IconMargin="4"/>
</WrapPanel>
</Border>
</StackPanel>
</Grid>
<Grid Height="80" DockPanel.Dock="Bottom">
<StackPanel>
<StackPanel Orientation="Horizontal">
<local:ColoredImage x:Name="zoomIcon" Image="{StaticResource ZoomIcon}" Width="24" Height="24" HorizontalAlignment="Left" VerticalAlignment="Top" Color="{StaticResource Gray}"/>
<Slider HorizontalAlignment="Left" Minimum="0.5" Maximum="85" VerticalAlignment="Top" Margin="0,5,0,0" Value="{Binding Zoom, UpdateSourceTrigger=PropertyChanged}">
<Slider.Width>
<MultiBinding Converter="{StaticResource Subtraction}">
<Binding Path="ActualWidth" ElementName="graph"/>
<Binding Path="ActualWidth" ElementName="zoomIcon"/>
</MultiBinding>
</Slider.Width>
</Slider>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,8,0,0">
<TextBlock Text="Refresh rate: " HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBox Text="{Binding UpdateInterval, Mode=TwoWay, UpdateSourceTrigger=LostFocus}" PreviewTextInput="NumberValidationTextBox" MaxLength="3" FontFamily="{StaticResource MonoFont}" Width="28" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock Text=" (ms)" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,8,0,0">
<TextBlock Text="Saved length: " HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBox Text="{Binding SavedLength, Mode=TwoWay, UpdateSourceTrigger=LostFocus}" PreviewTextInput="NumberValidationTextBox" MaxLength="3" FontFamily="{StaticResource MonoFont}" Width="28" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock Text=" (s)" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
</StackPanel>
</Grid>
<Grid x:Name="grid">
<Canvas x:Name="canvas" Background="{StaticResource White}"/>
<Grid Background="Black" Width="20" Height="20" HorizontalAlignment="Right"/>
<oxy:PlotView x:Name="graph" Background="Transparent"/>
</Grid>
</DockPanel>
</Grid>
I guess you bind your PlotView to a PlotModel? In that case you can set the PlotModel's PlotMargins property to set the margins of the plot area within the plot view and assign values for all four sides independently.
In order to get completely rid of the margin at the right side, you need to assign a negative value.
I have created the plot below using this line
plotModel.PlotMargins = new OxyThickness(40, -8, -8, 35);
I have changed the general background color of the plot view to make it clearer.

Adding Scrollbar to ItemsControl

I have a long list coming from my Business logic which I need to display on the UI. As the list is long, I tried adding Scrollviewer but I am unable to scroll.
please find the XAML code below
<Grid Margin="0,32,0,0">
<TextBlock Text="{Binding IDC_WiFi, Source={StaticResource Resources}}" FontFamily="Segoe UI" FontSize="20" Foreground="#4cb5ab" HorizontalAlignment="Left" />
<Button Command="{Binding HardwareWifiAccordionCommand}" BorderThickness="0" Width="16" HorizontalAlignment="Right" Height="16" >
<Button.Background>
<ImageBrush ImageSource="{Binding AccordionImageHardwareWifi}" />
</Button.Background>
</Button>
</Grid>
<TextBlock Text="Klein's, Anil's" FontFamily="Segoe UI" FontSize="15" Foreground="#8fa3ad"/>
<StackPanel Height="200" Visibility="{Binding IsAccordionHardwareWifi, Converter={StaticResource Bool2Visible}}">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding WifiList,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,32,0,0">
<Grid>
<Image Source="/Images/Assets/da_wifi1_16x16.png" Height="16" Width="16" HorizontalAlignment="Left" />
<TextBlock Margin="25,0,0,0" Text="{Binding NetworkName}" FontSize="15" Foreground="#FFFFFF" />
<TextBlock Text="" FontSize="15" Foreground="#8fa3ad" HorizontalAlignment="Right" />
</Grid>
<TextBlock Text="" FontSize="15" Foreground="#8fa3ad" HorizontalAlignment="Left" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</StackPanel>
Put it into a ScrollViewer.
<ScrollViewer>
<StackPanel >
</StackPanel>
</ScrollViewer>
As #StepUp points out you can just wrap it with a ScrollViewer but I believe this breaks virtualization. That's outside the scope of this question of course but it's something to keep in mind. If performance is likely to become an issue then I'd suggest implementing this as shown in the answer to this question.
The scrollviewer needed a Height to be set
<Grid Margin="0,32,0,0">
<TextBlock Text="{Binding IDC_WiFi, Source={StaticResource Resources}}" FontFamily="Segoe UI" FontSize="20" Foreground="#4cb5ab" HorizontalAlignment="Left" />
<Button Command="{Binding HardwareWifiAccordionCommand}" BorderThickness="0" Width="16" HorizontalAlignment="Right" Height="16" >
<Button.Background>
<ImageBrush ImageSource="{Binding AccordionImageHardwareWifi}" />
</Button.Background>
</Button>
</Grid>
<TextBlock Text="Klein's, Anil's" FontFamily="Segoe UI" FontSize="15" Foreground="#8fa3ad"/>
<StackPanel Height="200" Visibility="{Binding IsAccordionHardwareWifi, Converter={StaticResource Bool2Visible}}">
<ScrollViewer VerticalScrollBarVisibility="Auto" Height="350">
<ItemsControl ItemsSource="{Binding WifiList,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,32,0,0">
<Grid>
<Image Source="/Images/Assets/da_wifi1_16x16.png" Height="16" Width="16" HorizontalAlignment="Left" />
<TextBlock Margin="25,0,0,0" Text="{Binding NetworkName}" FontSize="15" Foreground="#FFFFFF" />
<TextBlock Text="" FontSize="15" Foreground="#8fa3ad" HorizontalAlignment="Right" />
</Grid>
<TextBlock Text="" FontSize="15" Foreground="#8fa3ad" HorizontalAlignment="Left" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</StackPanel>

Put TextBlock on top of another TextBlock

I tried to implement case in which one TextBlock appears on top of another TextBlock, playing with Visibility property - but it doesn't working yet.
TextBlock are inside DockPanel:
<DockPanel Grid.Row="1" Margin="5">
<TextBlock Text="Text1" Height="20" HorizontalAlignment="Right" DockPanel.Dock="Right">
<TextBlock Text="Text2" Background="Aqua" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Visibility="{Binding IfDeviceSelected, NotifyOnSourceUpdated=True, Converter={StaticResource ResourceKey=BoolToVisibilityConverter}}" />
</TextBlock>
<TextBlock Text="#Device Focus:" Height="20" HorizontalAlignment="Right" DockPanel.Dock="Right" />
</DockPanel>
You will want to use a Grid to group these TextBlocks, DockPanel/StackPanel will not allow overlapping controls(without horrible manipulation of Margins etc)
<DockPanel Grid.Row="1" Margin="5" >
<Grid DockPanel.Dock="Right" >
<TextBlock Text="Text1" />
<TextBlock Text="Text2" Background="Aqua" Visibility="{Binding IfDeviceSelected, NotifyOnSourceUpdated=True, Converter={StaticResource ResourceKey=BoolToVisibilityConverter}}" />
</Grid>
<TextBlock Text="#Device Focus:" Height="20" HorizontalAlignment="Right" DockPanel.Dock="Right" />
</DockPanel>

retrieving the content properties from data template in wpf

I have a particular template for a listbox item which contains different textblocks. After adding the items in the listbox I want to retrieve the text of a particular textblock of a particular listbox item. How can I do that?
<ListBox x:Name="listBox1" Grid.Row="0" SelectionChanged="listBox1_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,2,0,0">
<CheckBox Name="cbSelect" VerticalAlignment="Center" Visibility="{Binding isVisible}"/>
<StackPanel Orientation="Vertical">
<Grid HorizontalAlignment="Stretch" >
<TextBlock Name="txtTitle" VerticalAlignment="Bottom" Text="{Binding Title}" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Name="txtDate" Foreground="{StaticResource PhoneInverseInactiveBrush}" HorizontalAlignment="Right" VerticalAlignment="Center" Text="{Binding CreatedOn}" Margin="0,0,30,0" Style="{StaticResource PhoneTextSmallStyle}" />
<!-- <Image x:Name="lineImg" Source="/Icons/appbar.next.rest.png" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="48" Height="48"/>-->
</Grid>
<TextBlock Name="txtContent" Foreground="{StaticResource PhoneDisabledBrush}" VerticalAlignment="Bottom" Text="{Binding Content}" Style="{StaticResource PhoneTextNormalStyle}" />
<Line Stroke="{StaticResource PhoneBorderBrush}" StrokeThickness=" 2" X1="0" Y1="0" X2="{Binding ElementName=listBox1, Path=ActualWidth}" Y2="0" Margin="0,6,0,0" ></Line>
<!-- <Image x:Name="lineImg" Source="/Icons/Line.png" HorizontalAlignment="Center" Width="500" Height="2" Margin="0,15,0,0" />-->
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In the above code, after adding the items to the listbox, I want the text of txtTitle of a particular item. How can I get it?
You need to get a reference to the ContentPresenter of the item.
ListBoxItem myListBoxItem = (ListBoxItem)(myListBox.ItemContainerGenerator.ContainerFromItem(myListBox.Items.CurrentItem));
ContentPresenter myContentPresenter = FindVisualChild<ContentPresenter>(myListBoxItem);
DataTemplate myDataTemplate = myContentPresenter.ContentTemplate;
TextBlock myTextBlock = (TextBlock)myDataTemplate.FindName("textBlock", myContentPresenter);
The FindVisualChild method along with the full example can be found here.

Resources