I am trying to programmatically set the width of the column series in a WPF toolkit bar chart. Below is the existing code. But I am unable to set the width using ColumnDataPoint.WidthProperty.
Any suggestions would be of great help!
Style columnStyleRed = new Style(typeof(ColumnDataPoint));
columnStyleRed.BasedOn = this.Resources["CustomStyle"] as Style;
Setter setBackgroundRed = new Setter(ColumnDataPoint.BackgroundProperty, new SolidColorBrush(Colors.DarkRed));
Setter setWidth = new Setter(ColumnDataPoint.WidthProperty, 20);
columnStyleRed.Setters.Add(setBackgroundRed);
Thanks!
I tried the same without any luck.
ATM, I'm looking at OxyPlot, which seems to play much nicer than the toolkit.
This seems to work :
<oxy:ColumnSeries ... ItemsSource="{Binding Items}" ... ColumnWidth="4"/>
It can also be done from the code if you need it.
Ugly fix, I have the same problem, but My displays are going to be static as far as column numbers. I hard coded the margins in the template, that increased there widths.
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DVC:ColumnDataPoint">
<Grid>
<Rectangle
Fill="{TemplateBinding Background}"
Stroke="Black"
StrokeThickness="1"
Margin="0,0,-20,0"/>
<Grid
Background="Transparent"
Margin="0 -20 0 0"
HorizontalAlignment="Stretch"
VerticalAlignment="Top">
<TextBlock
HorizontalAlignment="Center"
Background="Yellow"
Text="{TemplateBinding FormattedDependentValue}"
FontWeight="Bold"
FontSize="8"
Margin="5,5,-20,2"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Related
In an attempt to go around the problem described in this other question: Segoe UI Symbol smiley is sometimes colorful, sometimes not (WP8.1 + XAML), I tried the following: wrapping my Textblock with a Border element with rounded-corners (high CornerRadius). This way I can change the background color of the border and it looks pretty much as if the smiley had a background color itself... almost.
There is still a small gotcha I cannot wrap my head around: the height of the TextBlock seems to be out of my control. The "Segoe UI Symbol" (smiley) I want to display acts as if it had some kind of padding that prevented the border to fit the icon exactly. I end up with some kind of oval shape around my round smiley... not quite what I had in mind.
I stripped the XAML to its bare essence and played with it in a new blank app (just paste this in a new app, you should see exactly the screenshot below):
<Grid>
<Border Background="Red" Grid.Column="0"
CornerRadius="50" BorderThickness="0"
HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="😠"
FontFamily="Segoe UI Symbol" FontSize="50"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</Grid>
This gives you that:
Any idea what I can tweak there?
The problem is that the text (emoticon) has not the same height and width. You can do a custom fix by applying a custom style to the textbox and change its padding until you achieve the result you want. It's not a dynamic solution but if the size of the icon is standard this solution i think will work.
First of all create a new style:
<phone:PhoneApplicationPage.Resources>
<Style x:Key="CustomTextBlockStyle" TargetType="TextBlock">
<Setter Property="Padding" Value="10,0,10,3"/>
</Style>
</phone:PhoneApplicationPage.Resources>
Then apply it to the TextBlock
<Grid>
<Border Background="Red" Grid.Column="0"
CornerRadius="50" BorderThickness="0"
HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="😠"
FontFamily="Segoe UI Symbol" FontSize="50"
HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource CustomTextBlockStyle}" />
</Border>
</Grid>
The result:
If you want something like this:
Try to play around with padding and margin too
<Style x:Key="CustomTextBlockStyle" TargetType="TextBlock">
<Setter Property="Margin" Value="-2,-13,-2,-9"/>
<Setter Property="Padding" Value="0,0,0,0"/>
</Style>
I'm new to Windows 8.1 development, so forgive me if this question is obvious or rudimentary. I've experimented around with the various attributes quite a bit, and I can't make it work the way I want it to, so I figured maybe someone here could give me a hand.
A description of what I'm doing:
I made a UserControl so I can isolate the UI for this one thing I'm trying to do, and also so I can use it in various places in my real UI. The UserControl consists of a Button with a Grid in it. The Grid has definitions for 3 rows, and I want the rows (and the Border elements and TextBlock elements they contain) to take up 20% of the total height, 60% of the height, and 20% of the height for rows 0, 1, and 2, respectively. I also want the Grid to take up the entire height of the Button.
Here's the XAML markup for the UserControl, garishly colored so it's obvious where everything is.
<UserControl
x:Name="UserControlRoot"
d:DesignHeight="300"
d:DesignWidth="400"
mc:Ignorable="d"
>
<Grid x:Name="LayoutRoot" Margin="0" Background="Red">
<Grid.Resources>
<Style TargetType="TextBlock" x:Key="UCTextBlock">
<Setter Property="FontSize" Value="20" />
<Setter Property="TextAlignment" Value="Center" />
<Setter Property="TextWrapping" Value="NoWrap" />
</Style>
</Grid.Resources>
<!-- THIS BUTTON HAS SPACING AROUND IT - WHY? -->
<Button
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
BorderBrush="White"
BorderThickness="5"
Background="Green"
Padding="0"
Foreground="Blue"
Margin="0"
>
<Grid Background="#ff333333">
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="6*" />
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
<Border Grid.Row="0" HorizontalAlignment="Stretch">
<TextBlock Text="THIS IS MY RED TEXT" Foreground="LightCoral" Style="{StaticResource UCTextBlock}" />
</Border>
<Border Grid.Row="1" HorizontalAlignment="Stretch">
<TextBlock Text="THIS IS MY WHITE TEXT, NOT TALL" Foreground="White" Style="{StaticResource UCTextBlock}" />
</Border>
<Border Grid.Row="2" HorizontalAlignment="Stretch">
<TextBlock Text="THIS IS MY BLUE TEXT" Foreground="LightSkyBlue" Style="{StaticResource UCTextBlock}" />
</Border>
</Grid>
</Button>
</Grid>
</UserControl>
This is what it looks like in the designer:
Note that the white text, which is in Row 1 (Height="6*"), is not 3x as tall as Row 0 and Row 2. As far as I understand it, the Height="6*" vs Height="2*" should make Row 1 bigger than Rows 0 and 2. I'm obviously misisng something obvious here, but I don't know what it is.
Any ideas as to why the TextBlocks aren't sizing the way I want them to? There are no external DesignTemplates that are affecting the style of any of the elements (as far as I can tell, though I'm not sure if there's a way for me to explicitly/exhaustively determine whether or not this is truly the case).
A mostly-unrelated aside: In case this helps someone else, I found that putting a Margin="0,-10" on the Button will get rid of the red area around the button within the outer Grid. It took awhile to figure that out, so hopefully it'll save someone else some time. There may be a ThemeResource that has the same effect, but if so I never found it.
In the Button set the horizontal and vertical content alignment to Stretch. This will stretch the content grid.
<Button HorizontalContentAlignment="Stretch" ...
</Button>
TL;DR: Set HorizontalContentAlignment and VerticalContentAlignment to Stretch
The ContentPresenter in the button has its HorizontalAlignment and VerticalAlignment property bound to the HorizontalContentAlignment and VerticalContentAlignment property respectively. You can see this in the default control template found on MSDN.
<Grid>
...
<Border x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Margin="3">
<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"/>
</Border>
...
</Grid>
Because your Grid is actually inside the content presenter, it fills that space (not the entire space of the button). By setting those properties to Stretch you have the ContentPresenter fill the available space, which the Grid then also does, giving you the correct behavior.
I have a Windows Phone 8.1 project with a ListView that has it's itemssource filled from c# code behind. It works but i end up with empty spaces between single line textblocks. I've tried setting heights on the textblock, a grid it sits within, the listview itself. I tried setting an ItemContainerStyle with binding the height to the height of the textblock but it doesn't work.
If I set the text of the TextBlock to the Actual Height binding I get 0 so I must be doing something wrong. I'm pretty sure it has something to do with the height of the ListViewItems but since they are populated from code I can't figure out how to make them do what I want. I also tried switching to a ItemsControl for the list but it doesn't seem to scroll and work as well.
Here is the XAML of the Listview:
<ListView x:Name="TheList" IsHoldingEnabled="True"
ItemsSource="{Binding items}"
Loaded="WhenListViewBaseLoaded"
ContinuumNavigationTransitionInfo.ExitElementContainer="True"
IsItemClickEnabled="True">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Height" Value="{Binding ElementName=txtBibleText, Path=ActualHeight}"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid x:Name="ItemTemplateGrid" Holding="ListViewItem_Holding" Background="Blue">
<FlyoutBase.AttachedFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Share"
Click="ShareFlyoutItem_Click" />
<MenuFlyoutItem Text="Add to Sharing"
Click="AddSharingFlyoutItem_Click" />
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
<Grid x:Name="gridText">
<TextBlock x:Name="txtBibleText"
FontSize="{Binding TheFontSize}"
Grid.Column="1"
VerticalAlignment="Top"
HorizontalAlignment="Left"
TextWrapping="Wrap"
Margin="0,0,0,0" FontFamily="Global User Interface">
<Run Text="{Binding VerseNumber}"/>
<Run Text="{Binding BibleText}"/>
</TextBlock>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Code behind that populates the ListView:
XDocument loadedData = XDocument.Load(TranlationFilePath);
var data = from query in loadedData.Descendants("testament").Descendants("book").Descendants("chapter").Descendants("verse")
where (string)query.Parent.Parent.Parent.Attribute("name") == GetTestament
where (string)query.Parent.Parent.Attribute("name") == GetBibleBook
where (string)query.Parent.Attribute("number") == GetChapter
select new BibleLoad
{
VerseNumber = (string)query.Attribute("number"),
BibleText = (string)query.Value.ToString(),
TheFontSize = FontSize
};
TheList.ItemsSource = data;
Thank you for your time. This is my first time posting a question so hopefully I did it right. I have searched and searched and experimented for quite awhile.
After editing the XML and making a record short.
With turning off the text wrapping.
With wrapping back on, height set to 20 and minheight set to 31.
MinHeight to 20 wrapping on:
The extra space comes from the ListViewItem template for the ItemContainerStyle. The default template includes space not only for the ItemTemplate but also for adornments such as checkboxes used to mark selection. Note the CheckboxContainers' Rectangle's Height of 25.5 and the SelectedCheckMark's Height of 34.
<Grid x:Name="CheckboxContainer">
<Grid.RenderTransform>
<TranslateTransform x:Name="CheckboxContainerTranslateTransform" X="{ThemeResource ListViewItemContentOffsetX}"/>
</Grid.RenderTransform>
<Rectangle x:Name="NormalRectangle" Fill="{ThemeResource CheckBoxBackgroundThemeBrush}" Height="25.5" Stroke="{ThemeResource CheckBoxBorderThemeBrush}" StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}" Width="25.5"/>
<Path x:Name="CheckGlyph" Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" Fill="{ThemeResource CheckBoxForegroundThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Center" Height="17" IsHitTestVisible="False" Opacity="0" Stretch="Fill" StrokeThickness="2.5" StrokeLineJoin="Round" VerticalAlignment="Center" Width="18.5"/>
</Grid>
and
<Border x:Name="SelectedBorder" BorderBrush="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" BorderThickness="{ThemeResource GridViewItemMultiselectBorderThickness}" IsHitTestVisible="False" Opacity="0">
<Grid x:Name="SelectedCheckMark" HorizontalAlignment="Right" Height="34" Opacity="0" VerticalAlignment="Top" Width="34">
<Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" Stretch="Fill"/>
<Path x:Name="SelectedGlyph" Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" Fill="{ThemeResource ListViewItemCheckThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="14.5" Margin="0,1,1,0" Stretch="Fill" VerticalAlignment="Top" Width="17"/>
</Grid>
</Border>
If you don't need the selection behavior you can strip the ItemContainerStyle to just the pieces you need so it doesn't have to make space for adornments that aren't relevant to your app. If you do need selection you can move or resize the selection checks so they'll fit with your design.
You can generate the default ItemContainerStyle template by selecting your ListView in the designer, right clicking and chosing Edit Additional Templates.Edit Generated Item Container (ItemContainerStyle) Edit a copy...
You can then edit down the adornment Heights as needed.
Why are you trying to set minheight or height? try giving a font size and it will adjust the height itself keep the textwrapping=wrap... and another thing why are you setting grid.colum=1? ..you have only 1 column.
I've got this BubbleChart where I wanted to add an individual Style to show a ToolTip. As I did this, the ToolTip was there and everything was fine until I added a second Series - now the former color setup (each series a different color) was gone and each Series had the same color. Does someone knowshow to bind on the default color of the series?
I tried a Template Binding but it won't work.
<Style x:Key="BubbleToolTipTemplate" TargetType="{x:Type c:BubbleDataPoint}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="c:BubbleDataPoint">
<Grid RenderTransformOrigin=".5,.5">
<Grid.RenderTransform>
<ScaleTransform ScaleX=".75" ScaleY=".75" />
</Grid.RenderTransform>
<!-- This Ellipse should bind on the default color -->
<Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" />
<ContentPresenter Content="{TemplateBinding Size}" HorizontalAlignment="Center" VerticalAlignment="Center" />
<ToolTipService.ToolTip>
<StackPanel>
<ContentControl Content ="{ TemplateBinding DependentValue, Converter={StaticResource DoubleToStringConverter}}" />
<ContentControl Content ="{ TemplateBinding IndependentValue}"/>
<ContentControl Content ="{ TemplateBinding Size }" />
</StackPanel>
</ToolTipService.ToolTip>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Maybe someone handled this before! Any help is appreciated!
Ok I've found a solution!
In the Background there is the generic.xaml where you can find the default Style of the Bubbledatapoint (You can find this here ).
As i read through this if found the Palette resource. Later i tried to bind on those colours until i found the trick!
Just set the fill property of the ellipse to {DynamicResource Background}" !
I'm sure this is dead simple, but I can't seem to figure it out.
I have a ListBox to display items, and these are displayed with a DataTemplate. I now want to group these items, so have added a group based on the manufacturer property. This is done in code behind.
ICollectionView view = CollectionViewSource.GetDefaultView(Items);
PropertyGroupDescription groups = new PropertyGroupDescription("Manufacturer");
view.GroupDescriptions.Add(groups);
I wanted to have each group in an expander, so they can be hidden. I have got this working by looking at GroupTemplates at MSDN This involves, having an expander, textblock and then a seperator to rule off the extra space like in Windows Vista/7 Groups. As Below.
The problem I am having is I cannot get the separator to fill up the remaining space correctly. If I use a MinWidth value, all my expanders have the same width. If I use the {binding ActualWidth, ElementName=MyListBox}, then the separator is too wide, as its as wide as the control that contains it. So it sets the scroll bars to be visible, (see screenshot below). If i leave width blank, then the seperator is not drawn at all.
My gut feeling is the stackpanel should have expanded the seperator to use the remaining space but it didn't. So i tried a DockPanel as in the XamlCode below, yet this also fails. I have a few other problems with getting controls to fill up the remaining space, by using a suitable width so if you can help me resolve this, it would be great.
My current WPF Xaml Markup. You will need to add elements to get this to display something.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel x:Name="myStackPanel">
<ListBox x:Name="MyListBox">
<ListBox.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander IsExpanded="True">
<Expander.Header>
<DockPanel HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Height="Auto"
Width="{Binding ActualWidth, ElementName=MyListBox}"
Margin="10">
<TextBlock DockPanel.Dock="Left" Margin="0" FontSize="14" FontWeight="Bold" Foreground="Black" Text="{Binding Path=Name}"/>
<Separator DockPanel.Dock="Right" Margin="4,0,4,0"></Separator>
</DockPanel>
</Expander.Header>
<ItemsPresenter Margin="5,0,0,0" />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListBox.GroupStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<!-- Data Template Here -->
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
It is in fact not trivial, the control template of the Expander consists of a ToggleButton as the Header and a ContentPresenter for the content. The problem is that the ToggleButton itself has a special style & template which contains the arrow that has the alignment hard-coded into it, the default one looks something like this:
<Style x:Key="ExpanderDownHeaderStyle"
TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Padding="{TemplateBinding Padding}">
<Grid Background="Transparent"
SnapsToDevicePixels="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="19"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- ... -->
<!-- The HorizontalAlignment needs to be set to stretch here -->
<ContentPresenter Grid.Column="1"
Margin="4,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
SnapsToDevicePixels="True"
RecognizesAccessKey="True"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<!-- ... -->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
To get your style to work you need to modify the default Expander template (get default templates on MSDN - Default WPF Themes link). Not nice but you don't really have much of a choice.