Develop Reference

TextBox does not stretch horizontally in UWP

The Blue Part is my textbox and red is my relative panel. The relative panel is placed in a list view
<ListView RelativePanel.Below="Line" Name="SubTasksListView" Margin="10,10,10,0" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" ItemsSource="{x:Bind subtasks}" IsItemClickEnabled="True" ItemClick="ItemClick" ItemTemplate="{StaticResource SubTaskDataTemplate}"/>
<DataTemplate x:DataType="data:ZTask" x:Key="SubTaskDataTemplate">
<RelativePanel Margin="10,10,20,10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Red" >
<TextBox Background="Aqua" BorderThickness="0,0,0,0" BorderBrush="#8888" HorizontalContentAlignment="Stretch" KeyDown="Box_KeyDown" RelativePanel.AlignLeftWithPanel="True" Name="SubTaskTitle" PlaceholderText="+ Subtask" FontSize="16" Margin="0"/>
<Line Name="Line" Stretch="Fill" Margin="10 0 0 0" Stroke="#8888" X2="1" Opacity="0.2" RelativePanel.Below="SubTaskTitle"/>
</RelativePanel>
</DataTemplate>
I have tried HorizontalAlignment="Stretch" and HorizontalContentAlignment="Stretch" but it doesn't work.Please Help me solve this issue

I believe, this is due the lack of exact alignment instructions, as Relative Panel is a bit conservative to minimize potential conflicts between inner elements and their layout desires. So, could you try to explicitly set both left and right alignment, like this:
... RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True" ...
Upd: and yes, it seems in your case the layout could be simplified by using Grid element because there are too few inner controls (just two) so it's not an issue to position them.

Using Grid instead of relative panel worked for me
<Grid Margin="10,10,20,10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBox BorderThickness="0,0,0,0" BorderBrush="#8888" HorizontalContentAlignment="Stretch" KeyDown="Box_KeyDown" Name="SubTaskTitle" PlaceholderText="+ Subtask" FontSize="16" Margin="0"/>
<Line Name="Line" Stretch="Fill" Margin="10 0 0 0" Stroke="#8888" X2="1" Opacity="0.2" Grid.Row="1"/>
</Grid>
But I still am not able to figure out why it does not work with relative panel, Someone please post the answer using relative panel.

WPF C# reducing render time, for mutli usercontrol layout

Hello I have problem with my WPF page loading it took more than 2 seconds, my page contains 2 listview one listview contains ~70 items and second one contains ~355 items, of course everyone would say use virtualization and you done, yes it used but not on listview but on higher level, since my app use one scrollviever = one page method, I highly think due to this method virtualization does not work as expected since if it would work loading times be much better, one row took between 15-25ms to render
This is my problematic code:
<UserControl x:Class="app.OS.Tabs.Controls.SectionATabs"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:helpButton="clr-namespace:app.COMMON.USERCONTROLS.HelpButton"
xmlns:Buttons="clr-namespace:app.COMMON.USERCONTROLS.Buttons"
mc:Ignorable="d"
Height="Auto"
Width="Auto"
MinHeight="120">
<VirtualizingStackPanel IsVirtualizing="True" ScrollViewer.CanContentScroll="True" >
<TextBlock MaxWidth="948" Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book." TextWrapping="Wrap" Style="{StaticResource GrayText}" Margin="0,15,0,7"/>
<ListView x:Name="DataList"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
VirtualizingPanel.IsVirtualizing="False"
ScrollViewer.CanContentScroll="False"
SelectionMode="Single" ItemContainerStyle="{StaticResource ListViewItemWithGridStandard}" BorderBrush="{x:Null}" Foreground="{x:Null}"
>
<ListView.View>
<GridView ColumnHeaderContainerStyle="{StaticResource HeaderRemover}" AllowsColumnReorder="False">
<GridViewColumn Width="400">
<GridViewColumn.CellTemplate>
<DataTemplate>
<DockPanel Height="47">
<TextBlock TextTrimming="CharacterEllipsis" ToolTip="{Binding Description,IsAsync=True,Mode=OneWay}" MaxWidth="360" Style="{StaticResource BlackText}" Height="21" DockPanel.Dock="Top">
<Run Text="{Binding Description,IsAsync=True,Mode=OneWay}"/>
<helpButton:HelpButton KeyToSearch="{Binding KeyToSearch,IsAsync=True,Mode=OneWay}" SectionToUse="sectionA" HeaderButton="False" />
</TextBlock>
<TextBlock Style="{StaticResource GrayText}" VerticalAlignment="Bottom" >Current: <Run Text="{Binding CurrentValue,IsAsync=True,Mode=OneWay}"/><LineBreak/>Good Value:<Bold>0%</Bold></TextBlock>
</DockPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Width="540">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Width="528">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<StackPanel>
<Buttons:Buttons x:Name="DefaultValueButton" OnClick="DefaultValueButton_OnOnClick" ButtonContent="Default" ButtonData="{Binding Index,IsAsync=True,Mode=OneWay}" DisabledBorderBrush="{StaticResource SeparatorColor}" DisabledBackgroundBrush="{StaticResource WhiteColor}" DisabledTextForegroundBrush="{StaticResource GrayForText}" ActiveBackgroundBrush="{StaticResource HeaderColor}" ActiveBorderBrush="{StaticResource BorderColor}" ActiveTextForegroundBrush="{StaticResource BorderColor}" IsActive="{Binding IsDefault,IsAsync=True,Mode=OneWay}"/>
<TextBlock HorizontalAlignment="Center" Style="{StaticResource GrayText}">(<Run Text="{Binding DefaultValue,IsAsync=True,Mode=OneWay}"></Run>)</TextBlock>
</StackPanel>
<StackPanel Margin="9,0,0,0">
<Buttons:Buttons x:Name="RecommendedValueButton" OnClick="RecommendedValueButton_Click" ButtonContent="Recommended" ButtonData="{Binding Index,IsAsync=True,Mode=OneWay}" DisabledBorderBrush="{StaticResource SeparatorColor}" DisabledBackgroundBrush="{StaticResource WhiteColor}" DisabledTextForegroundBrush="{StaticResource GrayForText}" ActiveBackgroundBrush="{StaticResource HddColor}" ActiveBorderBrush="{StaticResource BorderColor}" ActiveTextForegroundBrush="{StaticResource WhiteColor}" IsActive="{Binding IsRecommended,IsAsync=True,Mode=OneWay}"/>
<TextBlock HorizontalAlignment="Center" Style="{StaticResource GrayText}">(<Run Text="{Binding RecommendedValue,IsAsync=True,Mode=OneWay}"></Run>)</TextBlock>
</StackPanel>
<Rectangle Width="1" Fill="{StaticResource SeparatorColor}" Height="24" Margin="16,0" VerticalAlignment="Top" />
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Buttons:Buttons x:Name="EnableCustomValuesButton" OnClick="EnableCustomValuesButton_Click" ButtonContent="Custom" ButtonData="{Binding Index,IsAsync=True,Mode=OneWay}" DisabledBorderBrush="{StaticResource SeparatorColor}" DisabledBackgroundBrush="{StaticResource WhiteColor}" DisabledTextForegroundBrush="{StaticResource GrayForText}" ActiveBackgroundBrush="{StaticResource CpuColor}" ActiveBorderBrush="{StaticResource BorderColor}" ActiveTextForegroundBrush="{StaticResource WhiteColor}" IsActive="{Binding IsCustom,IsAsync=True,Mode=OneWay}"/>
<StackPanel Orientation="Horizontal" Visibility="{Binding IsCustomEnabled,IsAsync=True,Mode=OneWay}" VerticalAlignment="Top" >
<Border CornerRadius="3" BorderThickness="1" BorderBrush="{StaticResource SeparatorColor}" Width="90" Margin="7,0">
<Border.Clip>
<RectangleGeometry RadiusX="5" RadiusY="5" Rect="0 0, 90 25"/>
</Border.Clip>
<TextBox Width="86" Height="23" x:Name="CustomValue" Text="{Binding CustomInputValue,IsAsync=True,Mode=OneWay}" BorderBrush="{x:Null}" HorizontalAlignment="Center" />
</Border>
<Buttons:Buttons x:Name="CustomValueApply" OnClick="CustomValueApply_Click" ButtonContent="Apply" ButtonData="{Binding Index,IsAsync=True,Mode=OneWay}" DisabledBorderBrush="{StaticResource BorderColor}" DisabledBackgroundBrush="{StaticResource WhiteColor}" DisabledTextForegroundBrush="{StaticResource BorderColor}"/>
</StackPanel>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</VirtualizingStackPanel>
This which may raise questions Buttons:Buttons is usercontrol inside it is border and inside border is textblock, helpButton:HelpButton is usercontrol inside it is border inside it is canvas with textblock and image(after some time image is disabled and on first time only image is shown only), headerremover sets GridViewColumnHeader visibility to collapsed, ListViewItemWithGridStandard is style which modify Control.Template adding inside Border and inside it adds GridViewRowPresenter, as you can see SectionATabs is tabcontrol > tabitem child, but tabcontrol is in page between page and tabcontrol is scrolviewer. page and scrollviewer has fixed height(maxheight also same) which is 501, also page is created way before user clicks for the first time, I think I told everything, now what can be done to reduce loading times? Thank you.

C# XAML Listbox collapse when clicked

I'm new in XAML for Windows Phone 8.1 and have some troubles with
making a Stackpanel clickable
collapse Item, when clicked
My work so far looks like that:
And the Code to that (please correct me, if there are major flaws):
<Border CornerRadius="15" Background="#FF595656" Margin="0" Grid.ColumnSpan="2" Height="80">
<StackPanel Orientation="Horizontal">
<StackPanel Width="20" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel HorizontalAlignment="Left" Height="80" Margin="0,0,0,0" VerticalAlignment="Center" Width="51">
<Image HorizontalAlignment="Left" Height="51" Margin="0,15,0,0" Width="51" Source="Assets/fish.png" Stretch="Fill" RenderTransformOrigin="2.307,0.881" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Width="10" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel HorizontalAlignment="Left" Height="80" Margin="0" VerticalAlignment="Top" Width="310">
<TextBlock HorizontalAlignment="Left" Height="25" Margin="0,20,0,0" TextWrapping="Wrap" Text="Entry 1" Width="310" VerticalAlignment="Top" FontSize="18" Foreground="Black" FontWeight="Bold"/>
<TextBlock HorizontalAlignment="Left" Height="17" Margin="0" TextWrapping="Wrap" Text="Short description Entry 1" Width="310" VerticalAlignment="Top" Foreground="#FF0097FF"/>
</StackPanel>
</StackPanel>
</Border>
This code will later be wrapped inside a ListBox with Image, Entry 1 and the short description being bound:
<ListBox x:Name="ListBox1" Margin="0"
Width="400" Height="200" HorizontalAlignment="Left"
ItemsSource="{Binding}" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2" >
<ListBox.ItemTemplate>
<DataTemplate>
// the code above
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
So my question is:
How can I make a nice looking expansion/collapse of each Item in the ListBox, whenever I click on it?
Thank you very much in advance.

The real question is here is what do you want it to collapse to? There are too many possible ways to collapse some visual data item. Do you just want to change the height of the item or do you want some fancy animation that collapse some property?
If the height is what you're looking for it's pretty easy. Just attach an Tap Event on that Border of yours. On a sidenote, you probably want to edit the ItemContainerStyle to have <Setter Property="HorizontalContentAlignment" Value="Stretch"/> so the Listbox will stretch across the screen, otherwise imho it's un-useable.
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Red" BorderThickness="0,1" Tap="Border_Tap">
<StackPanel>
<!--- rest of template --->
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
Then calculate the Minimum height you want to show (make sure it's actually useable, meaning... I can Tap on it again to show the whole thing without using a Mag Glass).
private void Border_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
int minHeight = 40; // change to whatever you want
Border b = sender as Border;
if (b.ActualHeight > minHeight)
{
b.Height = minHeight;
}
else
{
b.Height = double.NaN; // this will change the height back to Auto, showing everything
}
}
Code In Action
This is just a quick solution to your question. Some people on here would rather have you create a StoryBoard Animation on the Height Property of the Selected state in the VisualStateManager. If you reword or create a new question explicitly stating you want a VisualStateManager solution, I will provide you one as well. Good luck.

Dynamically changing coloration of TextBlock

I have Windows 8 application and trying to create landing view for it. It's still needs to spupport Windows 8, so Hub control is unavailable. But it looks similar. First section will contain darker picture and second one will contain GridView like elements on almost white background. And during scrolling application title should stay in place.
But as a result I have a problem with title TextBlock. While it's placed over an image it should be white, but after scrolling further it should invert color of the text part over white background.
Here is a sample markup:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ScrollViewer ZoomMode="Disabled" VerticalScrollMode="Disabled"
VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
<StackPanel Orientation="Horizontal">
<Rectangle Width="500" Fill="Purple"/>
<Rectangle Width="5000" Height="500" VerticalAlignment="Center" Fill="LightCyan"/>
</StackPanel>
</ScrollViewer>
<TextBlock Text="Application Name" Foreground="White"
FontSize="32" FontFamily="Segoe UI"
FontWeight="Bold" Margin="48 24 0 0"
HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Grid>
Maybe someone has ideas on how it should be implemented?

Windows Store App - XAML UI element not visible in C# code

I have the following XAML code and the only element available in the C# code behind are the Grid and the FlipView. How can I make the ScrollViewer, Image or the Viewbox visibile in the code?
XAML:
<Grid x:Name="gridViewPages">
<FlipView x:Name="FlipView1" Loaded="FlipView1_Loaded" Style="{StaticResource FlipViewPreviewIndicator}" Tapped="FlipView1_Tapped">
<FlipView.ItemTemplate>
<DataTemplate>
<ScrollViewer x:Name="pagesScrollViewer" ZoomMode="Enabled"
HorizontalAlignment="Center"
VerticalAlignment="Center"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
MinZoomFactor="1.0"
MaxZoomFactor="3.0"
Margin="0"
Width="1500" DoubleTapped="PagesScrollViewer_DoubleTapped">
<Viewbox x:Name="pagesViewbox">
<Image Source="{Binding}"
Height="730"
x:Name="pageImage" Stretch="Uniform" Loaded="MainImage_Loaded"/>
</Viewbox>
</ScrollViewer>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
The flipview is customized and contains also a listview defined in which is not visible in the code too...:
<Page.Resources>
...
<ListView x:Name="pagesPreview" HorizontalAlignment="Center" Height="100" VerticalAlignment="Bottom" Width="Auto"
ItemsSource="{TemplateBinding ItemsSource}"
SelectedItem="{Binding SelectedItem, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollMode="Disabled"
Background="AliceBlue"
Opacity="1"
SelectionChanged="pagesPreview_SelectionChanged"
Visibility="Visible">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="{Binding}" Stretch="UniformToFill"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
...
</Page.Resources>

See the basic concept of the flipview is to have multiple pages to have a flip effect. So whatever the Data template contains is repeated multiple times. So if you want the x:Name to come up then you wont have any success.
There are two ways As per my knowledge :
VisualTreeHelper -> for a better detail of it go through this link
Get elements from data template
you can manually iterate over the flipview elements and track down the children of the flipview. Try that in debug mode you'll get a fair idea of what comes after what. Just keep track of the element at which selected index position you want modified
Thanks.