Margin and OrientationChanged wp7 - silverlight

I have a listbox with ~20 items.If orientation is portait the margin of the grid must be "140,25,5,0" and width of stackpanel inside 320
If orientation is landscape margin must be "350,25,5,0" and width of stackpanel is 450.How I can change it dinamically such as conversation view in WP7?
<Grid x:Name="LayoutRoot" >
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" x:Name="listmy">
<ListBox.ItemTemplate>
<DataTemplate>
<local:TypeMessage Content="{Binding}">
<local:TypeMessage.Me>
<DataTemplate>
<Grid HorizontalAlignment="Right" Margin="350,25,5,0">
<TextBlock HorizontalAlignment="Right" Margin="0,-25,30,0" TextWrapping="Wrap" Text="Вы" VerticalAlignment="Top"/>
<StackPanel Background="{StaticResource PhoneAccentBrush}" Width="320">
<TextBlock TextWrapping="Wrap" Foreground="{Binding read_state, Converter={StaticResource ReadConverter}}" Text="{Binding text}" Margin="5,3" />
<TextBlock Text="{Binding date_time}" TextAlignment="Right" Margin="5,0"/>
</StackPanel>
<Path Data="m 0,0 l 16,0 l 0,16 l -16,-16"
Fill="{StaticResource PhoneAccentBrush}"
HorizontalAlignment="Right" UseLayoutRounding="False" d:LayoutOverrides="VerticalAlignment, GridBox" Height="16" VerticalAlignment="Top" Margin="0,-15.167,8.757,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform Rotation="91.157"/>
</Path.RenderTransform>
</Path>
</Grid>
</DataTemplate>
</local:TypeMessage.Me>
<local:TypeMessage.You>
<DataTemplate>
<Grid Margin="5,25,30,0" >
<Path Data="m 0,0 l 0,16 l 16,0 l -16,-16"
Fill="{StaticResource PhoneAccentBrush}"
Margin="9.5,-16,0,0" UseLayoutRounding="False" Height="16" VerticalAlignment="Top" d:LayoutOverrides="VerticalAlignment" HorizontalAlignment="Left"/>
<StackPanel Background="{StaticResource PhoneAccentBrush}" Width="320">
<TextBlock TextWrapping="Wrap" Foreground="{Binding read_state,Converter={StaticResource ReadConverter}}" Text="{Binding text}" />
<TextBlock TextAlignment="Right" Text="{Binding date_time}" />
</StackPanel>
<TextBlock HorizontalAlignment="Left" Margin="28,-27,0,0" TextWrapping="Wrap" Text="{Binding author_name}" VerticalAlignment="Top"/>
</Grid>
</DataTemplate>
</local:TypeMessage.You>
</local:TypeMessage>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>

You could detect the orientation change (in the OnOrientationChanged event) and adjust the margins accordingly.
In terms of working with lots of items.
If items share the same margins you could bind the values and update the VM in the event handler.
If everything has a different margin it may be appropriate to use a different template for each orientation.
Alterntively you could look to move to a more fluid layout. Without seeing what the actual design(s) should be it's not posible to say how suitable this may be though.

Related

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.

Get binding from listbox item label

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.

Create WPF-MahApps.Metro Animated tab control to MetroWindow title bar

Can we able to create a MahApps Metro Master Animated Tab Control on to Metro Window title bar ?
I wrote a code like,
<Controls:MetroWindow.WindowCommands>
<Controls:WindowCommands HorizontalAlignment="Left">
<Grid HorizontalAlignment="Left">
<TabControl ItemsSource="{Binding Items1}" FontWeight="Thin" HorizontalAlignment="Left" HorizontalContentAlignment="Left">
<TabControl.ItemTemplate>
<DataTemplate>
<Grid>
<StackPanel Orientation="Horizontal">
<Rectangle Width="20" Height="10">
<Rectangle.Resources>
<SolidColorBrush x:Key="BlackBrush" Color="White"/>
</Rectangle.Resources>
<Rectangle.Fill>
<!--<VisualBrush Stretch="Fill" Visual="{StaticResource appbar_cupcake}" />-->
<ImageBrush Stretch="Fill" ImageSource="/Resources/Images/menu-home-off.png"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock FontSize="14" FontWeight="Bold" Text="{Binding Name}"/>
</StackPanel>
</Grid>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<Label Margin="100 100 100 100" Content="{Binding Content}" Foreground="White" />
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</Grid>
</Controls:WindowCommands>
</Controls:MetroWindow.WindowCommands>
The Tab ItemTemplate is displaying in Title Window, The ContentTemplate is not displaying....
Is it possible?
If yes, How can i achieve this ?
Thanks in advance !!

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