I build a Chart with a Grid and some Rectangles, like in this Post:
Drawing a chart in WPF C# design questions
Now I save this Chart to an XAML-File to fill it later by another program.
In this chart I need to bind three Values:
1. Labels
2. MaxHeight - Height (by each bar)
3. Height
My Problem is, that I don't know how to bind it correctly for using it in another application.
The other Application could give me a list or an array with the values and the label, but I dont know how I should bind unknown values to the Rectangles.
In the code below I binded the "ChartLabel" but I need all Chart Labels not only one.
When I creating the chart I don't now how much bars I will have later.
<Grid ShowGridLines="True" Background="#FFF5F5DC" Width="Auto" Margin="5,5,5,5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Rectangle Fill="#FF0000FF" Grid.Column="{Binding Path=Test6_Val, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<TextBox Text="{Binding Path=ChartLabel, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" BorderBrush="#00FFFFFF" Background="#00FFFFFF" HorizontalAlignment="Center" Grid.Column="5" Grid.Row="10" />
<Rectangle Fill="#FF0000FF" Grid.Column="{Binding Path=Test7_Val, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<TextBox Text="{Binding Path=ChartLabel, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" BorderBrush="#00FFFFFF" Background="#00FFFFFF" HorizontalAlignment="Center" Grid.Column="6" Grid.Row="10" />
<Rectangle Fill="#FF0000FF" Grid.Column="{Binding Path=Test8_Val, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<TextBox Text="{Binding Path=ChartLabel, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" BorderBrush="#00FFFFFF" Background="#00FFFFFF" HorizontalAlignment="Center" Grid.Column="7" Grid.Row="10" />
<Rectangle Fill="#FF0000FF" Grid.Column="{Binding Path=Test9_Val, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<TextBox Text="{Binding Path=ChartLabel, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" BorderBrush="#00FFFFFF" Background="#00FFFFFF" HorizontalAlignment="Center" Grid.Column="8" Grid.Row="10" />
<Rectangle Fill="#FF0000FF" Grid.Column="{Binding Path=Test10_Val, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<TextBox Text="{Binding Path=ChartLabel, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" BorderBrush="#00FFFFFF" Background="#00FFFFFF" HorizontalAlignment="Center" Grid.Column="9" Grid.Row="10" />
</Grid>
I'm not sure I follow your description of which part you're having a problem with.
You will have a List.
You want to use a string from that as label and a number as height.
If you iterate that you can find the max and hence calculate some sort of scaling factor so a value of half the max ends up about half the height of your chart.
The way I'd do a series like that is with an itemscontrol. Bind an observablecollection to the itemssource. An itemscontrol has a stackpanel it's contents go in. Make the orientation horizontal and define an itemtemplate. That would have a textblock for the label, (maybe rotated) and a rectangle whose height is bound to your scaled value.
Which is roughly how the terrain visualiser I wrote works.
There are no labels - so this is to give you the idea rather than cut and paste.
<ListBox ItemsSource="{Binding TerrainPointList}"
..
>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel IsItemsHost="True"
Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
...
A listbox has scrollers and selecteditem. I use selecteditem in mine and that might or might not be useful to you.
Related
i'm currently on some design issues. I need a WrapPanel which contains multiple Expander which should fit corretly as i the image shown.
So if the user opens one, some commands should appear. (can be 3 up to 10 commands.) i think a scrollview starting with 5 items should fit best)
Currently i didn't get it to work. If i toggle the first box, each box is toggled.
And if i toggle another box, it takes also the complete height.
And here the Image, if the first box is closed.
I think i need multiple Controls for this.
First is the Expander-Menu and second the VariableSizedWrapGrid. But both together doesn't work, as expected. here my current code.
<controls:DockPanel Grid.Row="1" Grid.Column="1" Background="#efefef" >
<GridView x:Name="CommandList" controls:DockPanel.Dock="Top" Margin="15" SelectionMode="None" VerticalContentAlignment="Top" >
<GridView.ItemTemplate>
<DataTemplate>
<controls:WrapPanel Name="VerticalWrapPanel" Margin="2"
VerticalSpacing="10" HorizontalSpacing="10" Orientation="Vertical">
<controls:Expander Style="{StaticResource ExpanderStyleCheckBox}" VerticalAlignment="Top" Margin="20,20,0,20" VerticalContentAlignment="Top"
IsExpanded="True" Width="500"
ExpandDirection="Down" Background="White" Tapped="Expander1_Tapped" VariableSizedWrapGrid.RowSpan="{Binding RowSpan}" >
<controls:Expander.Content>
<ListView ItemsSource="{Binding Phrases}" Margin="30,0,0,0" Background="#efefef" SelectionMode="None">
<DataTemplate>
<TextBlock TextWrapping="WrapWholeWords" VerticalAlignment="Center" />
</DataTemplate>
</ListView>
</controls:Expander.Content>
<controls:Expander.Header>
<TextBlock Margin="10" HorizontalAlignment="Left" FontSize="18" TextWrapping="WrapWholeWords" VerticalAlignment="Center">
<Run Text="{Binding Heading}" />
</TextBlock>
</controls:Expander.Header>
</controls:Expander>
</controls:WrapPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Margin="20" ItemWidth="530" VerticalAlignment="Top" VerticalChildrenAlignment="Top"
Orientation="Horizontal" MaximumRowsOrColumns="5" >
</VariableSizedWrapGrid>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</controls:DockPanel>
If someone could help me, this would be great.
Thanks and have a nice weekend.
Christian
I have the following AutoCompleteBox:
<Controls:AutoCompleteBox x:Name="txtComponent" VerticalAlignment="Center" Height="25" FontFamily="Segoe UI" MinimumPrefixLength="2"
TextSearch.TextPath="Value" SelectedItem="{Binding Path=Selected, Mode=TwoWay}" IsTextCompletionEnabled="True"
FontSize="13.333" Grid.Row="0" Grid.Column="1" DropDownClosing="txtComponent_DropDownClosing">
<Controls:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=SiteName}"/>
</DataTemplate>
</Controls:AutoCompleteBox.ItemTemplate>
</Controls:AutoCompleteBox>
The problem is that the suggestions drop down list is stretching out of the bound.
How can I set the max width of the DropDown list?
Try this:
<TextBlock Text="{Binding Path=SiteName}" Width="{Binding ElementName=txtComponent, Path=ActualWidth}"/>
It should traverse the tree and bind the dropdown width to the parent width.
I have the following abbreviated for simplicity
<ItemsControl ItemSource="{Binding enumerableList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding displayName, Mode=OneWay}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
How can I get it so that my TextBox shows a bullet point in front of the text bound to it? Desired format:
List item 1
List item 2
You can use the BulletDecorator with the TextBlock. Example:
<BulletDecorator>
<BulletDecorator.Bullet>
<Ellipse Height="10" Width="10" Fill="Blue"/>
</BulletDecorator.Bullet>
<TextBox Text="{Binding displayName, Mode=OneWay}" />
</BulletDecorator>
How can I draw a histogram on the Radslider like the image shown below using C# WPF? I've searched on net but not getting info.
Hi,
<StackPanel Grid.Column="1" Margin="7,-72,7.5,0">
<telerik:RadCartesianChart Palette="Summer" >
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:CategoricalAxis Visibility="Hidden"/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis Visibility="Hidden" MajorStep="20" />
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.Series>
<telerik:BarSeries ItemsSource="{Binding KeyValue, Mode=TwoWay}" CategoryBinding="Key" ValueBinding="Value">
<telerik:BarSeries.PointTemplates>
<DataTemplate>
<Rectangle Width="3" Fill="SkyBlue"/>
</DataTemplate>
</telerik:BarSeries.PointTemplates>
</telerik:BarSeries>
</telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>
</StackPanel>
<telerik:RadSlider Minimum="{Binding LowValue,Mode=TwoWay}" Height="13"
Margin="5" Grid.Column="1" Maximum="{Binding HighValue,Mode=TwoWay}"
SelectionEnd="{Binding SelectionHigh,Mode=TwoWay}"
SelectionStart=" {Binding SelectionLow,Mode=TwoWay}"
TickPlacement="TopLeft"
SelectionChanged="RadSlider_SelectionChanged" SelectionRangeEnabled="True"
IsDirectionReversed="False" SmallChange="10" VerticalAlignment="Bottom">
</telerik:RadSlider>
Instead of customizing RadSlider you can add a RadChart & RadSlider in the same column as I've shown.
I am just putting the Xaml code With the bindings, Now you can write the logic for histogram.
I currently have a list box:
<ListBox HorizontalAlignment="Left"
ItemsSource="{Binding Data, ElementName=bookingDomainDataSource}"
Margin="158,134,0,45"
x:Name="bookingListBox"
Width="429"
SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay, ElementName=bookingComboBox}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=userId}"
Width="100" />
<TextBlock Text="{Binding Path=bookingName}"
Width="100" />
<TextBlock Text="{Binding Path=bookingDate}"
Width="100" />
<TextBlock Text="{Binding Path=showId}"
Width="100" />
<TextBlock Text="{Binding Path=paymentId}"
Width="100" />
<TextBlock Text="{Binding Path=ticketId}"
Width="100" />
<TextBlock Text="{Binding Path=ticketQuantity}"
Width="100" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And I would like to only show rows from the itemssource that have a certain userId, how can I do this?
Thanks.
I think the best solution to this would be to filter the data source BEFORE you get to the front end.
You want to define a filter for your listview.
Uodate: sorry missed the silverlight tag. However CollectionViewSource should still be useful to you. Here a sample using the CollectionViewSource in Silverlight.