How do I programmatically set border XAML objects?
I can set it in the XAML:
<Border Grid.Column="2" Grid.Row="1">
<TextBlock Text="Typical Code" />
</Border>
Here I have it with a name to set it:
<Border x:Name="Column8Text" Grid.Column="3" Grid.Row="1">
</Border>
This has no effect:
Column8Text.Name = "test";
This is the entire grid im trying to dynamiclly manipulate:
<StackPanel x:Name="GridViewView" >
<Grid x:Name="StaticGridView" Background="WhiteSmoke">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Column5" />
<ColumnDefinition x:Name="Column6" />
<ColumnDefinition x:Name="Column7" />
<ColumnDefinition x:Name="Column8" />
<ColumnDefinition x:Name="Column9" />
<ColumnDefinition x:Name="Column10" />
<ColumnDefinition x:Name="Column11" />
<ColumnDefinition x:Name="Column12" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="Background" Value="White" />
<Setter Property="Padding" Value="5" />
</Style>
<Style TargetType="TextBlock">
<Setter Property="TextBlock.FontSize" Value="16" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="TextBlock.FontWeight" Value="Bold" />
</Style>
</Grid.Resources>
<Border Grid.Column="0" Grid.Row="1">
<TextBlock Text="Item" />
</Border>
<Border Grid.Column="1" Grid.Row="1">
<TextBlock Text="Drawing" />
</Border>
<Border Grid.Column="2" Grid.Row="1">
<TextBlock Text="Typical Code" />
</Border>
<Border x:Name="Column8Text" Grid.Column="3" Grid.Row="1">
</Border>
<Border x:Name="Column9Text" Grid.Column="4" Grid.Row="1">
</Border>
<Border x:Name="Column10Text" Grid.Column="5" Grid.Row="1">
</Border>
<Border x:Name="Column11Text" Grid.Column="6" Grid.Row="1">
</Border>
<Border x:Name="Column12Text" Grid.Column="7" Grid.Row="1">
</Border>
</Grid>
</StackPanel>
This has no effect: Column8Text.Name = "test";
To set any child object's values one cannot simply name the parent and have access to the children.
Each individual child control has to be named to be accessed in code behind.
Otherwise to change the child objects via a parent, one should create a custom control with specific dependency properties tied to the children underneath to facilitate the passage of data to the children.
To complete your example
<Border Grid.Column="2" Grid.Row="1">
<TextBlock Name="tbBorderChild" Text="Typical Code" />
</Border>
Then access it in codebehind as such:
tbBorderChild.Text = "Changed";
Related
This is what I am currently having on screen with my texts:
Is there a way to align the 152 and bar? Also the same with..
15 MinutesRemaining and x?
Here is my current code:
<Grid>
<Frame Style="{StaticResource FrameStyle}">
<Grid Style="{StaticResource TellyGridStyle}">
<Frame Grid.Column="0" BackgroundColor="Green" Margin="0,10,10,10" Padding="20">
<Label Text="1" Style="{StaticResource TeamLabelStyle}" />
</Frame>
<Grid Grid.Column="1" Style="{StaticResource AutoGridStyle}">
<Grid Grid.Column="0" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
<Label TextColor="Green" Text="152" FontSize="72" VerticalTextAlignment="End" />
<Label Grid.Column="1" VerticalTextAlignment="End" Text="bar" TextColor="Blue" FontSize="54" />
</Grid>
<Grid Grid.Column="1" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
<Label Grid.Row="0" TextColor="Lime" IsVisible="false" Text="Low Pressure Warning" FontSize="40" />
<Label Grid.Row="1" Text="Evacuation Confirmed" IsVisible="false" FontSize="33" Style="{StaticResource LabelStyle}" />
</Grid>
<BoxView Grid.Row="1" Grid.ColumnSpan="4" HeightRequest="20" BackgroundColor="Gray" HorizontalOptions="FillAndExpand" />
<Grid Grid.Row="2" Grid.ColumnSpan="3" Style="{StaticResource RadioGridStyle}">
<Label Grid.Column="0" Text="15" FontSize="33" Style="{StaticResource LabelStyle}" />
<Label Grid.Column="1" Text="MinutesRemaining" FontSize="25" Style="{StaticResource LabelStyle}" />
<Label Grid.Column="2" Text="X" Style="{StaticResource LabelStyle}" />
</Grid>
</Grid>
<StackLayout Grid.Column="2" Style="{StaticResource VerticalStackLayoutStyle}" Padding="30,40,30,40" BackgroundColor="Red">
<Label Text="R" TextColor="{StaticResource EcbWhite}" FontSize="42" HorizontalTextAlignment="Center" Style="{StaticResource LabelStyle}" />
<Label Text="Evacuate" TextColor="{StaticResource EcbWhite}" Style="{StaticResource LabelStyle}" />
</StackLayout>
</Grid>
</Frame>
</Grid>
Static Resources:
<Style x:Key="BaseStyle" TargetType="View">
<Setter Property="Margin" Value="0" />
</Style>
<Style x:Key="StackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Padding" Value="0" />
<Setter Property="Spacing" Value="0" />
</Style>
<Style x:Key="HorizontalStackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource StackLayoutStyle}">
<Setter Property="Orientation" Value="Horizontal" />
<Setter Property="HorizontalOptions" Value="Start" />
<!-- <Setter Property="Spacing" Value="10" />-->
</Style>
<Style x:Key="VerticalStackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource StackLayoutStyle}">
<Setter Property="Orientation" Value="Vertical" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
</Style>
<Style x:Key="GridStyle" TargetType="Grid" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Padding" Value="0" />
<Setter Property="RowSpacing" Value="0" />
<Setter Property="ColumnSpacing" Value="5" />
</Style>
<Style x:Key="FrameStyle" TargetType="Frame" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Padding" Value="0" />
<Setter Property="HorizontalOptions" Value="FillAndExpand" />
<Setter Property="VerticalOptions" Value="FillAndExpand" />
<Setter Property="BackgroundColor" Value="{DynamicResource themeColor}" />
</Style>
<Style x:Key="LabelStyle" TargetType="Label">
<Setter Property="VerticalTextAlignment" Value="End" />
<Setter Property="TextColor" Value="Black" />
</Style>
<Style x:Key="TeamLabelStyle" TargetType="Label">
<Setter Property="FontSize" Value="24" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="VerticalTextAlignment" Value="End" />
<Setter Property="TextColor" Value="{StaticResource MsaWhite}" />
</Style>
<!--<ColumnDefinitionCollection x:Key="AutoColumns">
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</ColumnDefinitionCollection>-->
<RowDefinitionCollection x:Key="AutoRows">
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</RowDefinitionCollection>
<Style x:Key="TellyGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions" Value="{StaticResource AutoRows}">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="AutoGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="EvacuationGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RadioGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
Thanks in Advance!
To avoid the issue that each of your labels vertical (Y / height) size is different due to the fact that different size fonts are being used and to avoid hard-coding the height of those labels, you can combine those labels into one by using FormattedString.
This way, you have one label who's height is calculated by the tallest element (i.e. font) and thus when using YAlign="End" VerticalTextAlignment="End" your text is bottom aligned.
<Grid Grid.Column="0" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
<Label YAlign="End" VerticalTextAlignment="End">
<Label.FormattedText>
<FormattedString>
<Span Text="152" TextColor="Green" FontSize="72" />
<Span Text="bar" TextColor="Blue" FontSize="54" />
</FormattedString>
</Label.FormattedText>
</Label>
</Grid>
Note: If you need to change the discrete elements of the FormattedString just as if they were separate labels, you can assign x:Name, BindingContext, Binding as a Span is a bindable object.
<Span x:Name="barValue" BindingContext="aContext" Text="{Binding BarValue}" TextColor="Green" FontSize="72" />
I'm trying to get the GridSplitter to work across the rows in my grid:
However, the RowSpan property doesn't seem to work in case of this control.
How can I get the GridSplitter to work across my grid table and share the column width when moved?
This is my code:
<StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".3*" MinWidth="100" />
<ColumnDefinition Width="2" />
<ColumnDefinition Width="*" MinWidth="400" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Padding" Value="3" />
<Setter Property="Foreground" Value="Silver" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Silver" />
<Setter Property="Background" Value="Black" />
</Style>
</Grid.Resources>
<Border Grid.Column="0">
<TextBlock Text="First Column" />
</Border>
<GridSplitter
Grid.RowSpan="1"
Grid.Column="1"
HorizontalAlignment="Stretch"
ShowsPreview="True" />
<Border Grid.Column="2">
<TextBlock Text="Second Column" />
</Border>
</Grid>
<Grid
Grid.Row="1"
Height="400"
Background="Silver">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".3*" MinWidth="100" />
<ColumnDefinition Width="*" MinWidth="400" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock
FontSize="30"
Foreground="Red"
Text="First Column Content" />
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock
FontSize="30"
Foreground="red"
Text="Second Column Content" />
</StackPanel>
</Grid>
</Grid>
</StackPanel>
You only have GridSplitter in the first Gird. You could merge the two grids you have into one grid to get the desired result. Here is merged XAML for you to try:
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Padding" Value="3" />
<Setter Property="Foreground" Value="Silver" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Silver" />
<Setter Property="Background" Value="Black" />
</Style>
</Grid.Resources>
<StackPanel Grid.Column="0">
<Border>
<TextBlock Text="First Column" />
</Border>
<TextBlock FontSize="30"
Foreground="Red"
Text="First Column Content" />
</StackPanel>
<GridSplitter Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Stretch"
ShowsPreview="True"
Background="Gray"/>
<StackPanel Grid.Column="2">
<Border>
<TextBlock Text="Second Column" />
</Border>
<TextBlock FontSize="30"
Foreground="red"
Text="Second Column Content" />
</StackPanel>
Also, here is the screenshot of resulting output:
You may also want to refer to this how-to page on MSDN.
I need to remove the bottom Buttons from the TimePicker-Controll Flyout.
This style does it, but I can't see where the magic happens:
<Style x:Key="TimePickerStyle1" TargetType="TimePicker">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Foreground" Value="{ThemeResource TimePickerForegroundThemeBrush}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TimePicker">
<Border x:Name="LayoutRoot"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0">
<Grid Margin="{TemplateBinding Padding}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentPresenter x:Name="HeaderContentPresenter"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
FlowDirection="{TemplateBinding FlowDirection}"
FontWeight="{ThemeResource TimePickerHeaderThemeFontWeight}"
Foreground="{ThemeResource TimePickerHeaderForegroundThemeBrush}" />
<StackPanel Grid.Row="1"
Margin="0,0,47,0"
Background="#FFFBFBFB"
Orientation="Horizontal">
<Border x:Name="FirstPickerHost" BorderBrush="#FFFBFBFB">
<ComboBox x:Name="HourPicker"
MinWidth="50"
Background="#FFFBFBFB"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}"
Foreground="{TemplateBinding Foreground}"
Padding="4,0,0,0" />
</Border>
<Border x:Name="SecondPickerHost" BorderBrush="#FFFBFBFB">
<ComboBox x:Name="MinutePicker"
MinWidth="50"
Background="#FFFBFBFB"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}"
Foreground="{TemplateBinding Foreground}"
Padding="4,0,0,0" />
</Border>
<Border x:Name="ThirdPickerHost" BorderBrush="#FFFBFBFB">
<ComboBox x:Name="PeriodPicker"
MinWidth="50"
Background="#FFFBFBFB"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}"
Foreground="{TemplateBinding Foreground}"
Padding="0,0,0,0" />
</Border>
</StackPanel>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I would like to use this style, but the formating is messed up, so I'd like to start from a clean copy of the original template
EDIT:
My Visual-Live-Tree
From the Live Visual Tree of Visual Studio, we can find that TimePicker use TimePickerFlyoutPresenter to show it in PopupRoot.
So we can edit its Style and Template to remove the Buttons. To find its Style, we can search TimePickerFlyoutPresenter in generic.xaml.
generic.xaml is available in the (Program Files)\Windows
Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10586.0\Generic
folder from a Windows SDK installation.
We can just comment out the Buttons in its template like following:
<Style TargetType="TimePickerFlyoutPresenter">
<Setter Property="Width" Value="242" />
<Setter Property="MinWidth" Value="242" />
<Setter Property="MaxHeight" Value="398" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
<Setter Property="AutomationProperties.AutomationId" Value="TimePickerFlyoutPresenter" />
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeHighBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource DateTimeFlyoutBorderThickness}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TimePickerFlyoutPresenter">
<Border x:Name="Background"
MaxHeight="398"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid x:Name="ContentPanel">
<!--<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="45" />
</Grid.RowDefinitions>-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="FirstPickerHostColumn" Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition x:Name="SecondPickerHostColumn" Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition x:Name="ThirdPickerHostColumn" Width="*" />
</Grid.ColumnDefinitions>
<Rectangle x:Name="HighlightRect"
Grid.Column="0"
Grid.ColumnSpan="5"
Height="44"
VerticalAlignment="Center"
Fill="{ThemeResource SystemControlHighlightListAccentLowBrush}" />
<Border x:Name="FirstPickerHost" Grid.Column="0" />
<Rectangle x:Name="FirstPickerSpacing"
Grid.Column="1"
Width="2"
HorizontalAlignment="Center"
Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" />
<Border x:Name="SecondPickerHost" Grid.Column="2" />
<Rectangle x:Name="SecondPickerSpacing"
Grid.Column="3"
Width="2"
HorizontalAlignment="Center"
Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" />
<Border x:Name="ThirdPickerHost" Grid.Column="4" />
</Grid>
<!--<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Grid.ColumnSpan="2"
Height="2"
VerticalAlignment="Top"
Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" />
<Button x:Name="AcceptButton"
Grid.Column="0"
Margin="0,2,0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Content=""
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="16"
Style="{StaticResource DateTimePickerFlyoutButtonStyle}" />
<Button x:Name="DismissButton"
Grid.Column="1"
Margin="0,2,0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Content=""
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="16"
Style="{StaticResource DateTimePickerFlyoutButtonStyle}" />
</Grid>-->
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But after this, we can only use Enter to confirm the selected time. And customize this control is not easy as we don't know how this is implemented.
To achieve what you want, I'd like to create a new custom control. Here is a blog about DatePicker calendar custom control for WinRT Xaml. Although this is a DatePicker control, but TimePicker is similar. You can refer to its source code on Codeplex to implement your TimePicker.
Well, I have next problem - On page I have WPF Toolkit Chart, Line Chart.
<chartingToolkit:Chart Grid.Row="1" Grid.ColumnSpan="2" Grid.Column="0" Name="lineChart" Visibility="Hidden" VerticalAlignment="Top" Height="150" BorderThickness="3" BorderBrush="#FF423852">
<chartingToolkit:Chart.Axes>
<chartingToolkit:LinearAxis Orientation="Y" Minimum="0">
<chartingToolkit:LinearAxis.MajorTickMarkStyle>
<Style TargetType="Line">
<Setter Property="Stroke" Value="#bdb3ce" />
<Setter Property="StrokeThickness" Value="1" />
<Setter Property="Y1" Value="-4" />
<Setter Property="Y2" Value="4" />
</Style>
</chartingToolkit:LinearAxis.MajorTickMarkStyle>
</chartingToolkit:LinearAxis>
</chartingToolkit:Chart.Axes>
<chartingToolkit:Chart.Style>
<Style TargetType="Control">
<Setter Property="Foreground" Value="#bdb3ce" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartingToolkit:Chart">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Name="BorderParent">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Use a nested Grid to avoid possible clipping behavior resulting from ColumnSpan+Width=Auto -->
<Grid Grid.Row="1" Margin="5 15">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<primitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
<Grid x:Name="PlotArea" Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}"/>
<Border Canvas.ZIndex="10" BorderBrush="#61596f" BorderThickness="1 0 0 1" Margin="5 2"/>
<Canvas Background="Transparent" x:Name="activePointGridLines" Margin="5 0 0 0" />
</primitives:EdgePanel>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</chartingToolkit:Chart.Style>
<chartingToolkit:Chart.LegendStyle>
<Style TargetType="Control">
<Setter Property="Width" Value="0" />
</Style>
</chartingToolkit:Chart.LegendStyle>
<chartingToolkit:Chart.PlotAreaStyle>
<Style TargetType="Grid">
<Setter Property="Background" Value="Transparent" />
<Setter Property="SnapsToDevicePixels" Value="True" />
</Style>
</chartingToolkit:Chart.PlotAreaStyle>
<chartingToolkit:LineSeries IndependentValuePath="Key" DependentValuePath="Value" ItemsSource="{Binding}" DataContext="{Binding}" Margin="5.5,0,0,3" DataPointStyle="{StaticResource SeriesDataPointStyle}" Name="nLineSeries">
<chartingToolkit:LineSeries.IndependentAxis>
<chartingToolkit:CategoryAxis Orientation="X" MajorTickMarkStyle="{StaticResource ChartMajorTickMarkStyle}"/>
</chartingToolkit:LineSeries.IndependentAxis>
</chartingToolkit:LineSeries>
</chartingToolkit:Chart>
When I go to this page lineChart can be empty, even if data is binded to chart DataContext. I noticed that, when chart is empty it has only one Axis (Y axis). When chart isn't empty, after binding chart has 2 axes.
private void InitLineChart()
{
var valueList = new List<KeyValuePair<string, int>>();
//fill List with data
_lineChart.DataContext = valueList;
}
What can cause this behaviour and how to solve it?
Problem was resolved.
I've removed IndependentAxis
From :
<chartingToolkit:LineSeries IndependentValuePath="Key" DependentValuePath="Value" ItemsSource="{Binding}" DataContext="{Binding}" Margin="5.5,0,0,3" DataPointStyle="{StaticResource SeriesDataPointStyle}" Name="nLineSeries">
<chartingToolkit:LineSeries.IndependentAxis>
<chartingToolkit:CategoryAxis Orientation="X" MajorTickMarkStyle="{StaticResource ChartMajorTickMarkStyle}"/>
</chartingToolkit:LineSeries.IndependentAxis>
</chartingToolkit:LineSeries>
To :
<chartingToolkit:LineSeries IndependentValueBinding="{Binding Path=Key}" DependentValueBinding="{Binding Path=Value}" Margin="5.5,0,0,3" DataPointStyle="{StaticResource SeriesDataPointStyle}" />
And now bind data not to DataContext of chart, but to ItemsSource of LineSeries that exist.
From :
_lineChart.DataContext = valueList;
To :
var lineChartSerie = (LineSeries)_lineChart.Series.FirstOrDefault();
if (lineChartSerie != null) lineChartSerie.ItemsSource = valueList;
I m creating Windows Phone 8.1 app with Visual Studio Where I m putting XAML grid but could not make full width. If I give width to each column then grid will be not full width in all resolution of Phone
My codes are as below
<ListView Name="lvData" Margin="5,0" HorizontalAlignment="Stretch" Grid.Row="2" BorderBrush="Black"
BorderThickness="1" Foreground="#000" VerticalAlignment="Center">
<ListView.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
</Grid.ColumnDefinitions>
<GridViewHeaderItem Grid.Column="0" x:Uid="_Number" Style="{StaticResource GridViewHeader}" />
<GridViewHeaderItem Grid.Column="1" x:Uid="_Dep" Style="{StaticResource GridViewHeader}" />
<GridViewHeaderItem Grid.Column="2" x:Uid="Arr" Style="{StaticResource GridViewHeader}" />
<GridViewHeaderItem Grid.Column="3" x:Uid="CurrentStatus" Style="{StaticResource GridViewHeader}" />
</Grid>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
</Grid.ColumnDefinitions>
<GridViewItem Grid.Column="0" Style="{StaticResource GridViewItem}" Content="{Binding Number}"/>
<GridViewItem Grid.Column="1" Style="{StaticResource GridViewItem}" Content="{Binding DepTime}" />
<GridViewItem Grid.Column="2" Style="{StaticResource GridViewItem}" Content="{Binding ArrTime}"/>
<GridViewItem Grid.Column="3" Style="{StaticResource GridViewItem}" Foreground="{Binding Color}" Content="{Binding CurrentStatus}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
My Style
<Style TargetType="GridViewHeaderItem" x:Key="GridViewHeader">
<Setter Property="Background" Value="#48649F"/>
<Setter Property="Foreground" Value="#fff"/>
<Setter Property="Height" Value="40"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
</Style>
<Style TargetType="GridViewItem" x:Key="GridViewItem">
<Setter Property="Foreground" Value="#000"/>
<Setter Property="BorderBrush" Value="#000"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Height" Value="40"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
Try stretch HorizontalContentAlignment of ListViewItem:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
...
</ListView>