I've added a WPF gauge control from this class https://github.com/JohanLarsson/GaugeBox but I'm not sure how to wire the control up to a field of type double degreeOutput declared in the code behind.
My aim is to bind degreeOutput to the gauge control and have the values from degreeOutput update the gauge accordingly.
The process I followed in setting up the control is:
1)Add the control to the user control's xaml layout and declare the namespace
xmlns:gauges="clr-namespace:Gauges;assembly=Gauges"
2)Set the value property to Value="{Binding degreeOutput}"
3)Run application, (but the gauge doesn't update in accordance with the
degree readings being output from degreeOutput)
Does anyone know what step I'm missing in binding the control to my degree field?
This is the xaml layout for the guage control:
<gauges:Gauge x:Name="Gauge"
Grid.Row="0"
Margin="13,18,134,134"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Marker="{Binding Marker}"
Maximum="{Binding Max}"
Minimum="{Binding Min}"
Placement="{Binding Placement}"
ShowLabels="{Binding ShowLabels}"
ShowMajorTicks="{Binding ShowTicks}"
ShowTrack="{Binding ShowTrack}"
TickFrequency="{Binding TickFrequency}"
Value="{Binding degreeOutput}" RenderTransformOrigin="0.5,0.5">
<gauges:Gauge.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-89.868"/>
<TranslateTransform/>
</TransformGroup>
</gauges:Gauge.RenderTransform>
<gauges:Gauge.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0.0" Color="Red" />
<GradientStop Offset="0.10" Color="Red" />
<GradientStop Offset="0.10" Color="Green" />
<GradientStop Offset="0.90" Color="Green" />
<GradientStop Offset="0.90" Color="Red" />
<GradientStop Offset="1.0" Color="Red" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</gauges:Gauge.Background>
</gauges:Gauge>
And the code behind where degreeOutput is declared:
private double degreeOutput;
Generally speaking you can't bind to fields in WPF (see the answer to this SO question).
Try changing degreeOutput into a public property. This will be enough to feed the initial value through into the gauge control.
If you also want changes made by the gauge control to feed back into your property then the class containing the property must also implement INotifyPropertyChanged.
Related
I did some research about the listbox but i didnt understand how to solve my problem.
I have a Listbox in my xaml page and i want to add now a listviewitem using the Template (so i get toggle button and so on) not in xaml and with the help of c#. How do i do this? Thx for your help
<ListBox x:Name="Listbox" Background="Red">
<ListBox.ItemTemplate >
<DataTemplate>
<Grid x:Name="TemplateGrid">
<ToggleSwitch x:Name="Toggle" Foreground="Black">
<ToggleSwitch.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
</ToggleSwitch.Background>
</ToggleSwitch>
<TextBlock HorizontalAlignment="Right" VerticalAlignment="Center" Width="26" x:Name="Text" Foreground="Black">Test</TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
The listbox will use the template automatically. From your code, just call Listbox.Items.Add(obj). One thing to note though - in your data template I don't see that you are specifying a datatype for your data template to target, so it will use a generic display by calling ToString() on your object.
Having difficulty getting a certain UI behavior. I have two user controls defined. The first control simply goes and gets the path of a database to open. I want the second control to be enabled when a path is selected. Here is my XAML...
<advanced2:LoadOnDemandDemoControl BorderBrush="#FFA1BD17" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Width="290" Margin="25,34,0,52"
DataContext="{Binding SourceTree}" IsEnabled="{Binding ElementName=pathName, Path=Text.Length, Mode=OneWay}">
<advanced2:LoadOnDemandDemoControl.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FFCFB0B0" Offset="1"/>
</LinearGradientBrush>
</advanced2:LoadOnDemandDemoControl.Background>
</advanced2:LoadOnDemandDemoControl>
<advanced2:PathSelector x:Name="pathName" Grid.Row="0" Grid.Column="0" Margin="0,61,0,0" RenderTransformOrigin="0.53,1.6"></advanced2:PathSelector>
Use a property trigger to Enable your control when there is text in pathName control.
You can use elementName to find your source control.
You can do https://stackoverflow.com/a/822961/1011959
I want to create a Slider that has a Gradient from Black to a certain Color as a Background.
The color is to be set additionally to the Style of the Slider. AFAIK, no extra properties can be added to a given control using just Control Templates (i.e. no attached properties and no derived controls).
I therefore want to use the Tag property and have created this snippet:
<Style x:Key="ColorSlider" TargetType="{x:Type Slider}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
<Grid>
<Rectangle Grid.Column="1" Grid.Row="1">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="{TemplateBinding Tag}" Offset="0.0"/>
<GradientStop Color="Black" Offset="1.0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
....
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and use it like this:
<Slider Style="{StaticResource ColorSlider}" Width="100" Height="500" Tag="{StaticResource redColor}"/>
with redColor beeing a static resource (although I'd prefer typing colors directly using HEX codes or predefined colors).
This however doesn't work, any idea why?
Instead of using TemplateBinding which gets resolved at compile time, use RelativeSource with Mode set to TemplatedParent which gets resolved at run time.
TemplateBinding gets resolved at compile time but actual value for tag will be resolved at runtime when staticResource gets applied. That's why you should use another approach.
<GradientStop Color="{Binding Tag, RelativeSource={RelativeSource
Mode=TemplatedParent}}" Offset="0.0"/>
I'm working on a very eye-candy program and I'm required to add a reflection and a 3D depth to the controls.
On both cases I need to paint the control a couple of times, but with changes:
For the reflection I'll have to repaint the control again at the bottom + flip it.
And as for the 3D depth, it's just a lot of copies behind + to the side.
The question is how can I get the image of the control in order to modify it and paint it below / behind it? Do you have any caveats and warnings / helpful tips regarding such actions? (I've never tried anything similar before).
Many thanks.
In WPF you can use a VisualBrush as the background/fill of another element (such as a Rectangle). This VisualBrush has a Visual property that can be bound to another control in order to mimic its content. Using transforms and alpha masks on this control can help apply reflection-style effects. For example:
<StackPanel Width="200">
<TextBox x:Name="tb">Hello world</TextBox>
<Rectangle Height="40" HorizontalAlignment="Stretch">
<Rectangle.Fill>
<VisualBrush Visual="{Binding ElementName=tb}" />
</Rectangle.Fill>
<Rectangle.RenderTransform>
<ScaleTransform CenterY="20" ScaleY="-1" />
</Rectangle.RenderTransform>
<Rectangle.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#00000000" Offset="0" />
<GradientStop Color="#FFFFFFFF" Offset="1" />
</LinearGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
</StackPanel>
I am very new to WPF and I am a bit stuck.
I'm trying to create a demo program that displays several embedded win forms applications. I'd like to add a reflection of the form, but most of the existing tutorials I've seen seen for image reflections do not work.
If anyone can point me in the right direction I would really appreciate it.
Here is the relevent XAML - the form control is added to the embedForm stack panel dynamically.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Name="inkBorder" Grid.Row="0" VerticalAlignment="Bottom" Margin="20"
Width="400" Height="500" CornerRadius="5" BorderThickness="4">
<Border.BorderBrush>
<LinearGradientBrush SpreadMethod="Reflect" StartPoint="0,0" EndPoint="0.5,0.5">
<LinearGradientBrush.GradientStops>
<GradientStop Color="Gray" Offset="0" />
<GradientStop Color="#eeeeee" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
<StackPanel Name="EmbedForm" Height="100" Width="400" ></StackPanel>
</Border>
<Rectangle Grid.Row="1" VerticalAlignment="Top"
Width="{Binding ElementName=inkBorder,Path=ActualWidth}"
Height="{Binding ElementName=inkBorder,Path=ActualHeight}">
<Rectangle.OpacityMask>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.0" Color="#66000000" />
<GradientStop Offset="1.0" Color="#00000000" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.OpacityMask>
<Rectangle.Fill>
<VisualBrush
Visual="{Binding ElementName=inkBorder}">
<VisualBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="-1" />
<TranslateTransform Y="1" />
</TransformGroup>
</VisualBrush.RelativeTransform>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
To clarify the question a bit...
I am mainly looking for a way to apply any visual transformations to controls like the WindowsFormHost and the WebBrowser control.
I've found that even simple transformations do not work with these, and I was wondering if there is any trick to treating these like standard visual elements or if it is a lost cause.
Transformations on WindowsFormsHost or WebBrowser won't work, because these controls don't use the WPF rendering engine, they use GDI+.
As far as I know, the only way to achieve what you want would be to capture the control's content as an image, and manually perform the transformation on the image using GDI+ functions... It's quite easy for a simple reflection, but it can get tricky for other kinds of transformation...