<DataTemplate x:Key="StatusColumnTemplate">
<Canvas>
<Rectangle Fill="Red" Canvas.ZIndex="1" Opacity="30" Height="{Binding Value, ElementName=Stacky}" Width="{Binding Value, ElementName=Stacky}"></Rectangle>
<StackPanel x:Name="Stacky" Orientation="Horizontal">
<Image Height="16" Margin="0,8,0,0" Opacity="{Binding Comment, Converter={StaticResource OpacityConverter}}" VerticalAlignment="Top" Width="16" Source="grade.png" Stretch="Fill"/>
<Image Height="16" Margin="5,8,0,0" Opacity="{Binding Grade, Converter={StaticResource OpacityConverter}}" VerticalAlignment="Top" Width="16" Source="/Module.Reports;Component/thumb-up.png" Stretch="Fill"/>
<Image Height="16" Margin="0,8,0,0" Opacity="{Binding Effort, Converter={StaticResource OpacityConverter}}" VerticalAlignment="Top" Width="16" Source="notepad.png" Stretch="Fill"/>
</StackPanel>
</Canvas>
</DataTemplate>
Currently the rectangle does not seem to bind to the height and width of the stackpanel. Is there anyway I can achieve it where a rectangle covers a datagrid cell with an opacity?
Height="{Binding ActualHeight, ElementName=Stacky}" Width="{Binding ActualWidth, ElementName=Stacky}"
Please check your code use used Value instead you should bind it to ActualHeight and ActualWidth of the Stacky.
Related
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.
I'm using the following DataTemplate
<DataTemplate x:Key="platform_resources">
<StackPanel Orientation="Horizontal">
<Viewbox Width="30" Height="30" ToolTip="Network Domain Count" Stretch="Uniform">
<ContentControl DataContext="{Binding}" Focusable="False" Content="{DynamicResource appbar_server}" />
</Viewbox>
<TextBlock Margin="0,7,0,0" Text="{Binding Path=workload_count}"/>
<Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" />
<Viewbox Width="30" Height="30" ToolTip="Logical Network Count" Stretch="Uniform">
<ContentControl Focusable="False" Content="{DynamicResource appbar_network_server_connecting}" />
</Viewbox>
<TextBlock Margin="0,7,0,0" Text="{Binding Path=vlan_count}"/>
<Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" />
<Viewbox Width="30" Height="30" ToolTip="Network Domain Count" Stretch="Uniform">
<ContentControl Focusable="False" Content="{DynamicResource appbar_network}" />
</Viewbox>
<TextBlock Margin="0,7,0,0" Text="{Binding Path=networkdomain_count}"/>
</StackPanel>
</DataTemplate>
The template displays all the relevant data with separators but only shows the images on the last record. It's leaves spaces where the images are supposed to be, but no images.
Make sure you add x:Shared="False" property to your resources.
Example:
<Canvas x:Key="appbar_server" x:Shared="False">
<!-- ... -->
</Canvas>
This happens because you probably defined some Images (e.g appbar_server) in your resources and trying to display them in multiple items. But Image is a Visual and in WPF each Visual can only have one parent. So when your items are being generated, each item steals the Image from the previous one until the last item finally gets it.
Solution:
Unlike Image, BitmapImage is not a Visual and thus can be set multiple times as the source of different items. So instead of defining Images in your Resources, define BitmapImages:
<Window.Resources>
<BitmapImage x:Key="appbar_server" UriSource="C:\...\appbar_server.png"/>
....
And then instead of ContentControls create Image instances in your DataTemplate to present them:
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Viewbox Width="30" Height="30" ToolTip="Network Domain Count" Stretch="Uniform">
<Image Focusable="False" Source="{DynamicResource appbar_server}" />
</Viewbox>
<TextBlock Margin="0,7,0,0" Text="{Binding Path=workload_count}"/>
...
*Update:
The image is captured in a canvas which seems to be needing some
special wrapper to make this work.
In that case, you should define a DataTemplate for each Canvas like this:
<Window.Resources>
<DataTemplate x:Key="appbar_3d_3ds">
<Canvas Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="32" Height="40" Canvas.Left="23" Canvas.Top="18" Stretch="Fill" Fill="Black" Data="F1 M 27,18L 23,26L 33,30L 24,38L 33,46L 23,50L 27,58L 45,58L 55,38L 45,18L 27,18 Z "/>
</Canvas>
</DataTemplate>
....
And then create ContentPresenter Instances in your ItemTemplate with their ContentTemplate set to your pre-defined data templates (e.g. appbar_3d_3ds).
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Viewbox Width="30" Height="30" ToolTip="Network Domain Count" Stretch="Uniform">
<ContentPresenter ContentTemplate="{DynamicResource appbar_3d_3ds}"/>
</Viewbox>
<TextBlock Margin="0,7,0,0" Text="{Binding Path=workload_count}"/>
....
I'm a beginner in WPF and have to add functionality to someone's user interface. Here's part of the code.
<Border BorderBrush="Black" BorderThickness="1" Grid.Row="1" >
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="{Binding ElementName=passFailIndicator, Path=Width}"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Background="Black" local:StretchPanel.Proportion="1" Name="imageBorder" Grid.Column="0">
<Border BorderThickness="1" Margin="2" BorderBrush="Green" HorizontalAlignment="Left" VerticalAlignment="Top" Width="{Binding ElementName=imageBorder, Path=Width}">
<Grid Width="{Binding ElementName=imageBorder, Path=Width}">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="{Binding ElementName=imageSelectExpander, Path=Width}"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" x:Name="image" Source="{Binding DisplayImage, Mode=OneWay}" VerticalAlignment="Top" Stretch="Uniform" HorizontalAlignment="Left" StretchDirection="Both" MouseMove="image_MouseMove" />
<TextBlock Name="pxPos" Text="mouse position" HorizontalAlignment="Right" VerticalAlignment="Bottom" MaxHeight="20" Foreground="Aqua"></TextBlock>
<Expander Grid.Column="1" VerticalAlignment="Top" Name="imageSelectExpander">
<ComboBox x:Name="imageSelect" ItemsSource="{Binding AvailableImages, Mode=OneWay}" SelectedIndex="{Binding ImageSelect, Mode=TwoWay}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Margin="4" Padding="4" MaxHeight="40"></ComboBox>
</Expander>
</Grid>
</Border>
</Border>
<Border x:Name="passFailIndicator" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Width="100" Height="100">
<Viewbox Stretch="Uniform" >
<Path Style="{Binding TestResult, Mode=OneWay, Converter={StaticResource testResultToPathStyle}}" Margin="2" />
</Viewbox>
</Border>
</Grid>
</Border>
I'm trying to access the Margin="2" on line 10. When I use this.imageBorder.Margin, I get {0,0,0,0}. How would I get the 2 (of course, this value may change)?
thanks
edit:
FrameworkElement fe = (FrameworkElement)this.imageBorder.Child;
pxPos.Text = (string.Format("x:{0} y:{1}", (int)((double)(pt.X - fe.Margin.Left) * (double)this.image.Source.Width / this.image.ActualWidth), (int)((double)(pt.Y - fe.Margin.Top)*(double)this.image.Source.Height / this.image.ActualHeight)));
The Border labeled imageBorder does not have its Margin property set to anything, so you are getting the default Margin, which is 0.
To get the Margin property of the Border inside your named border, either give it an x:Name so you can access it in code behind, or look in imageBorder.Child property to find the child Border object, then cast it to a FrameworkElement to get its Margin property.
As for why you're getting {0,0,0,0}, the Margin property is of type Thickness, which consists of properties for Left, Top, Right, and Bottom. If you set a margin to a single value, such as 2, it automatically converts that to a Thickness object with all 4 of its properties set to 2.
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.
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.