is there an easy way to use a calculated property in a view?
I need to give a left padding proportional to an actual width of a grid, or the width of a column.
For example if I tilt the phone the grid gets wider and I want to update the padding.
This seems to work, but I want to calculate a value from the width, for example width/50:
<Label Text="Seg"
Style="{StaticResource subTitleLightTextStyle}"
Grid.Row="1"
Padding="{Binding Source={x:Reference bodyCalendar},
Path=Width}"
Grid.Column="1" />
Related
Have a checkbox with custom control template which looks like this in design view:
XAML code:
<CheckBox IsChecked="{Binding Fareklasse21}" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="1">
<CheckBox.Template>
<ControlTemplate>
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<Image Source="pack://application:,,,/Asd.WWs.Client.Wpf;component/Resources/ADR-M.png" Width="64" Height="64" SnapsToDevicePixels="True">
</Image>
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type CheckBox}}}"></CheckBox>
<TextBlock>2.1</TextBlock>
</StackPanel>
</StackPanel>
</ControlTemplate>
</CheckBox.Template>
When I start the application, the image (which is originally 64x64px) gets distorted (and enlarged?)
Could it be that the image inherits some value from the Prism wrapper? I can't really see anything interesting while doing live inspection:
Here are the properties of the specific image:
The WPF graphics system uses device-independent units to enable resolution and device independence. Each device independent pixel automatically scales with the system's dots per inch (dpi) setting. This provides WPF applications proper scaling for different dpi settings and makes the application automatically dpi-aware. See also wiki page.
This is the reason why if you even specify Stretch=None for an Image control, you may notice that the image does not appear at the expected number of pixels wide/high. This can happen if the image’s resolution (DPI) doesn’t match your current system DPI.
The conversion from physical pixels to DIPs uses the following formula.
DIPs = pixels / (SystemDPI / 96.0)
If you want to convert DIP to the "real" pixels you can use next formula:
Width (pixels) = Width (WPF Units) * (SystemDPI / 96)
Height (pixels) = Height (WPF Units) * (SystemDPI / 96)
You can specify element size in DIP, inches, centimeters or points. But it's better to use vectorized graphics if possible.
If you have SVG files you can use sharpvector framework via nuget:
Install-Package SharpVectors
So there is SvgViewbox to render SVG in XAML:
<UserControl ...
xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
...>
...
<svgc:SvgViewbox Margin="5" Height="20" Width="20" Stretch="Uniform" Source="/Resources/Icons/Sample.svg"/>
...
</UserControl>
So say I have a textblock with a fontsize 32. The value of the text property is a variable amount of characters. If the text at a fontsize of 32 is cut off, how could i down scale the fontsize until the total width of the textblock is equal to the page width?
-I'd post a screenshot but not enough rep :/
The best solution is insert the TextBlock inside a fix width ViewBox:
<Viewbox Width="300" StretchDirection="Both" >
<TextBlock x:Name="testblock" Foreground="Magenta" FontSize="24" Text="This is a test"/>
</Viewbox>
And that will make the job without any effort. Change the parameters depending you need, and you can insert the textblock inside a border,etc.
I'm plotting a histogram of a grayscale image using an array of 256 values. Im doing so by creating my own chart with 256 vertical rectangles (columns). My aim is that first rectangle fill color to be red and the last rectangle to be blue. All the rectangles in between to be filled with a solid color which will make the transition from the first (red) to last (blue) smooth, like achiving a gradient with a rectangle step in changing the color.
When you look to the code, you can see that I'm able to fetch the index value of each element (rectangle) from the array. This is encapsulated in AlternationIndex and I'm thinking that the solution should use this in order to manipulate the Fill color value. Is it possible than to have a pure XAML solution for this ?
So the transition should look something like:
Here is my XAML code
<ItemsControl ItemsSource="{Binding HistogramValues}" AlternationCount="{Binding Path=HistogramValues.Count}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Rectangle Height="{Binding}" ToolTip="{Binding Path=(ItemsControl.AlternationIndex), RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ContentPresenter}}" Width="3" VerticalAlignment="Bottom" Fill="Black"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Where in view model I have:
public float[] HistogramValues { get; set; }
Write a custom converter which will pass an AlternationIndex & AlternationCount as parameters, and which spits out the color.
You can do linear interpolation between colors given those two parameters:
R = firstCol.R * p + secondCol.R * (1 - p)
The formula is quite easy, firstCol is the start color, secondCol is the end color.
p stands for current percentage, which can be calculated as currentAlternationIndex / AlternationCount.
You can do such calculation for each component(R, G, B), and your converter can return SolidColorBrush with concrete components.
Not sure though what you mean by pure Xaml solution. If you mean no converters, then there probably isn't one that is decent enough to mention here.
The other solution is to switch from height model into line model. Instead of ItemsControl, perhaps you can use Polyline to draw the data & then the gradient problem will be trivial.
I have read so much material and tried so many things over the past week and I am not getting anywhere with this.
I have a main window MainWindowView which has checkboxes as defined below:
<CheckBox IsChecked="{Binding Path=ocv_checkbox, Mode=TwoWay}" Margin="0, 0, 0, 2" Content="OCV"/>
<CheckBox IsChecked="{Binding Path=battery_temperature_checkbox, Mode=TwoWay}" Margin="0, 0, 0, 2" Content="Battery Temperture"/>
<CheckBox IsChecked="{Binding Path=slope_checkbox, Mode=TwoWay}" Margin="0, 0, 0, 2" Content="Slope"/>
Depending on which boxes are checked, I want to plot a line on a graph when the user clicks a Button. I want all lines on the same graph.
The issue is that depending on the box clicked I may need an additional axis to plot on. For example, if I have 3 checkboxes 1 2 and 3. Number 1 and 2 have units of inches and checkbox 3 has units of gallons. If all 3 are checked, I will need a vertical axis for inches on the left (or right) side and an axis for gallons of the right side (to plot 3).
How do I do that programatically using D3? There is not much documentation at all and I have need seen a clear answer online.
Currently I have:
<d3:ChartPlotter Name="plotter" Margin="10,10,20,10">
<d3:ChartPlotter.HorizontalAxis>
<d3:HorizontalIntegerAxis Name="dateAxis"/>
</d3:ChartPlotter.HorizontalAxis>
<d3:ChartPlotter.VerticalAxis>
<d3:VerticalIntegerAxis Name="countAxis"/>
</d3:ChartPlotter.VerticalAxis>
<d3:Header FontFamily="Arial" Content="{Binding ElementName=ThisGraphWindowInstance, Path=title}"/>
<d3:VerticalAxisTitle FontFamily="Arial" Content="{Binding ElementName=ThisGraphWindowInstance, Path=yAxis}"/>
<d3:HorizontalAxisTitle FontFamily="Arial" Content="{Binding ElementName=ThisGraphWindowInstance, Path=xAxis}"/>
</d3:ChartPlotter>
in my GraphWindowView.xaml which obviously only has 2 axes. I would like to add one using the code behind if possible.
Thank you,
Rich
If you want to add multiple Y axis, go for the InjectedPlotter object. Foreach type of data (inch, gallons...), you will need an InjectedPlotter that you add as a children to your chartplotter. When all the lines of one kind of data are disabled (checkboxes unchecked), just hide the injected plotter. You have to link each lines with his correct axis (injected plotter).
I'm trying to implement zoom-functionality in a RadSlideView ItemTemplate. I'm doing this by using a ViewportControl with a Canvas and then applying a RenderTransform (ScaleTransform) to a StackPanel in the Canvas. Similar to the SDK-sample found here.
The problem I have is that the ScaleTransform seems to be affecting the swipe-gesture used to change item in the SlideView/Panorama/Pivot control. E.g. if the ScaleTransform is set to 0.1 it seems like I only need to swipe 1/10th of the length to change item compared to using a ScaleTransform of 1.0.
I found that if I set IsHitTestVisible to false on the ItemTemplate the swiping works like I want. But this is not a solution since I sometimes need to be able to pan the content vertically while still being able to change item by swiping horizontally.
So my question is how can I solve this?
For reference the XAML looks like this:
<Controls:RadSlideView Name="SlideView" ItemsSource="{Binding Pages}" IsLoopingEnabled="False" SelectionChanged="RadSlideView_SelectionChanged" CacheMode="BitmapCache" ManipulationStarted="SlideView_ManipulationStarted" ManipulationCompleted="SlideView_ManipulationCompleted" ManipulationDelta="SlideView_ManipulationDelta">
<Controls:RadSlideView.ItemTemplate>
<DataTemplate>
<ViewportControl x:Name="SlideViewViewport" ViewportChanged="SlideViewViewport_ViewportChanged" Loaded="SlideViewViewport_Loaded">
<Canvas>
<StackPanel>
<Image Source="{Binding Image}" Stretch="Fill" Width="{Binding ElementName=SlideView, Path=DataContext.PageWidth}" Height="{Binding ElementName=SlideView, Path=DataContext.PageHeight}" CacheMode="BitmapCache"/>
<StackPanel.RenderTransform>
<ScaleTransform x:Name="xform"/>
</StackPanel.RenderTransform>
</StackPanel>
</Canvas>
</ViewportControl>
</DataTemplate>
</Controls:RadSlideView.ItemTemplate>
I have also looked at Teleriks RadPanAndZoom-control to avoid implementing my own zoom-functionality, but since I sometimes need to place two pictures side by side and zoom them as if they were one I don't think I can use it.
The problem is that ScaleTransformation scales your picture, but doesn't change it's height and width. Only if Height And Width are overflowing scrollviewer you can scroll the content