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# uwp change "Splitview.Content" in MVVM

To be honest I somehow have a hard time with MVVM.
To be more exact I have a hard time with creating/changing pages in MVVM.
This is my MainPage containing my SplitView:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<!--#region Splitview-->
<Grid.RowDefinitions >
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<RelativePanel >
<Button
FontFamily="Segoe MDL2 Assets"
Content=""
FontSize="30"/>
</RelativePanel>
<SplitView Grid.Row="1"
x:Name="SplitView"
DisplayMode="CompactOverlay"
IsPaneOpen="False"
CompactPaneLength="49"
OpenPaneLength="160"
PaneBackground="DarkGray"
>
<SplitView.Pane>
<StackPanel>
<ListBox SelectionMode="Single"
x:Name="lbHamburgerMenue"
Background="Gray"
HorizontalAlignment="Left">
<ListBoxItem Margin="0,5,0,2.5"
Background="DarkGray">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
FontSize="30"
VerticalAlignment="Center"/>
<TextBlock Margin="15,0,0,0"
Text="Home"
FontSize="20"
VerticalAlignment="Center"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Margin="0,2.5,0,2.5"
Background="DarkGray">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
FontSize="30"
VerticalAlignment="Center"/>
<TextBlock Margin="15,0,0,0"
Text="New Movie"
FontSize="20"
VerticalAlignment="Center"/>
</StackPanel>
</ListBoxItem>
</ListBox>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<!--#endregion-->
<!--#region content area-->
<Grid Grid.Row="1" Grid.Column="1" >
</Grid>
</SplitView.Content>
</SplitView>
</Grid>
For the Content I am kinda lost.
How do I get a View displayed when another ListBox.Item gets selected?
I know I need a Frame and inside that Frame the View has to be, but I would like some help in that regard because I am stuck here. (or with views in MVVM in general).

Yes, you are correct on your first assumption. You need to replace your GridView in the SplitView.Content section with a Frame. Then when you want to navigate to a particular view, you call Frame.Navigate.
For MVVM to keep your main page ViewModel from having intimate knowledge of your views, you can define a NavigationService that encapsulates page and view structure and the view types.
Here is a good article about the basics of MVVM and building a NavigationService: https://msdn.microsoft.com/en-us/magazine/jj651572.aspx (go to 'Setting up Navigation' section).
Another great description from StackOverflow: Navigating to a new page from the View Model in Windows Phone 8.1 universal app.

Due to "not understanding everything quite right" I ended up with a "bad" solution - works fine, but should be much less code/work.
This helped me very much understanding switching between Views! And I ended up using it.
Sadly I could not find a good tutorial to just change the <SplitView.Content> so I "Copy & Paste" it on every View.

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.

Layout of list with different elements type in WPF

I need to fix a list with elements that have different types. Each of the type has it's own datatype to represent the viewmodel for each type. The following code works for me, but for some reason the data inside gets truncated, to some value (looks like default). I need to remove this trancation.
Here is what I have. This code is in the control, that could be placed in a list as well (it could be doubled or tripled). But I Don't think it's relevant.
<ScrollViewer VerticalScrollBarVisibility="Visible">
<ListView DockPanel.Dock="Top" Name="testCaseResultListView"
ItemsSource="{Binding LogItems}"
ItemContainerStyleSelector="{StaticResource fixSideViewLogItemStyleSelector}"
SelectionMode="Single"
>
<ListView.View>
<GridView x:Name="gridView2">
<GridView.ColumnHeaderContainerStyle>
<Style TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="Visibility" Value="Collapsed" />
</Style>
</GridView.ColumnHeaderContainerStyle>
<GridViewColumn CellTemplateSelector="{StaticResource fixSideViewLogItemTemplateSelector}"/>
</GridView>
</ListView.View>
</ListView>
</ScrollViewer>
</DockPanel>
fixSideViewLogItemTemplateSelector and fixSideViewLogItemStyleSelector are the selectors, that return different datatypes or styles for each of the type in LogItems. The common datatype is a grid with two columns, but that also seems irrelevent - I tried to put a textbox there, and it still gets truncated.
I would like this column to be stretched to the whole gridView. When I set width, of the column, I see the column resizing, but I want it to occupy the whole space. This should be elastic - if I put one control in the window, it should occupy the whole window, and properly resize (with it's column) when the window is resized. If I put two controls, they should divide the space by halves, and still should be resized when the window is resized.
Any help, tips?
Upd
Here is an example of the template I'm using.
<DataTemplate x:Key="testCaseDataResultTemplate">
<!-- Test case results -->
<Grid Margin="50,0,0,0" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<!--Test case result property-->
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<!--Is retry / Name-->
<RowDefinition />
<!--Test case number-->
<RowDefinition />
<!--Low limit-->
<RowDefinition />
<!--High limit-->
<RowDefinition />
<!--Measured-->
<RowDefinition />
<!--State-->
<RowDefinition />
<!--Test time-->
<RowDefinition />
<!--Comment-->
</Grid.RowDefinitions>
<!--Is retry / Name-->
<Image Grid.Column="0" Grid.Row="0"
Source="..\Resources\retry16.png"
Stretch="None" HorizontalAlignment="Left"
Visibility="{Binding Path=IsRetry, Converter={StaticResource boolToVisibilityConverter}}" />
<TextBlock Text="fh fhgfhg fhfhfhgfhg fhgfhfhgfhgfhgfhgfhgfhgf hgfhgfhgfhgfhgfhg fhfhgfhgf hgfhgfhfhg fhfhgf rdederserswerv 2" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" TextWrapping="Wrap" MaxWidth="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}}"/>
<!--Test case number-->
<TextBlock Text="Number:" Grid.Column="0" Grid.Row="1" />
<TextBlock Text="{Binding Path=TestCaseNumber}" Grid.Column="1" Grid.Row="1" />
<!--Low limit-->
<TextBlock Text="Low limit:" Grid.Column="0" Grid.Row="2" />
<TextBlock Text="{Binding Path=TestCaseData.LimitData.LowLimit}" Grid.Column="1" Grid.Row="2" />
<!--High limit-->
<TextBlock Text="High limit: " Grid.Column="0" Grid.Row="3" />
<TextBlock Text="{Binding Path=TestCaseData.LimitData.HighLimit}" Grid.Column="1" Grid.Row="3" />
<!--Measured-->
<TextBlock Text="Measured" Grid.Column="0" Grid.Row="4" />
<TextBlock Text="{Binding Path=MeasuredValue, Converter={StaticResource valasaConverter}}" Grid.Column="1" Grid.Row="4" />
<!--State-->
<TextBlock Text="Passed: " Grid.Column="0" Grid.Row="5" />
<TextBlock Text="{Binding Path=Passed}" Grid.Column="1" Grid.Row="5" />
<!--Test time-->
<TextBlock Text="Test time: " Grid.Column="0" Grid.Row="6" />
<TextBlock Text="{Binding Path=TestTime, StringFormat={}{0:hh':'mm':'ss'.'ff}}" Grid.Column="1" Grid.Row="6" />
<!--Comment-->
<TextBlock Text="{Binding Path=ShortMessage}"
Grid.Column="0" Grid.Row="7" Grid.ColumnSpan="2"
Visibility="{Binding Path=HasComment, Converter={StaticResource boolToVisibilityColConverter}}"
VerticalAlignment="Stretch"
MaxWidth="400"
TextAlignment="Center">
<TextBlock.ToolTip>
<StackPanel>
<TextBlock Text="{Binding Path=FullMessage}"/>
</StackPanel>
</TextBlock.ToolTip>
</TextBlock>
</Grid>
</DataTemplate>
It's a bit messy, but it is very simple. It has two columns - the captions, and the values. These columns are nothing to do with truncation.
I have tried also this template:
<DataTemplate x:Key="testCaseDataResultTemplate">
<TextBlock Text="Long long text goes here...... ->" HorizontalAlignment="Stretch"/>
</DataTemplate>
The text was of course longer :) It was still truncating, so I blame the listView/GridView, but not the inner template.

I think that this issue maybe is that you need to set the ListView.HorizontalContentAlignment to Stretch. Also the item container style and the item template must have the HorizontalAlignment to Stretch and the Width property must be Auto. Hope this tips helps...
EDIT
Also I think the problem could be the width of the GridViewColumn, that fix the items width
to it's own width. If you are using a single column, maybe you can change the ListView to a ListBox or an ItemsControl, just an idea.

I don't know what your templates looks like but I see a problem like this, it normally lies with a TextBlock that isn't wrapping and/or that the TextBlock's width is longer than it's parent.

Cannot say that I solved the puzzle, but at least it works as I expected. I removed the whole definition with GridView and columns inside, and put ItemTemplateSelector directly in ListView.
So my ListView looks now like this:
<ListView DockPanel.Dock="Top" Name="testCaseResultListView"
ItemsSource="{Binding LogItems}"
ItemContainerStyleSelector="{StaticResource fixSideViewLogItemStyleSelector}"
SelectionMode="Single"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
ItemTemplateSelector="{StaticResource fixSideViewLogItemTemplateSelector}">
That did it! Hope that will help to somebody as well.