In my FluentTorrent app I want to have a file list inside a listview item that contains a torrent. So the child of a listview is a Pivot which, among others, has this PivotItem:
<PivotItem Header="Files" x:Name="PivotFiles">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" x:Name="RowDef2" />
</Grid.RowDefinitions>
<ListView Grid.Row="0" Grid.Column="0" x:Name="FilesView" SelectionMode="Extended" ScrollViewer.VerticalScrollBarVisibility="Visible" />
</Grid>
</PivotItem>
....
The problem is that this file-list containing listview height goes beyond the available height when the torrent has too many files. There is no scroll bar so many of the files are not visible (only these that would fit the space taken by the height of the entire window are visible).
Is there a way to tell the listview item (a StackPanel) that its available height should be automatically adjusted? The main ListView takes the whole HWND height anyway.
You could try to enforce the height of your Grid row:
<Grid.RowDefinitions>
<!-- full size row -->
<RowDefinition Height="*" x:Name="RowDef2" />
</Grid.RowDefinitions>
--- disclaimer:
I am not particular sure since it might depend on your full page's layout.
Related
I am working on a Nativescript-vue app, and am having a strange problem with the Image component not sizing correctly.
I am trying to use stretch="aspectFill" to correctly size an image for a component. It works initially when live previewing in the ios simulator, but when you next render the component it reduces size to fit the space rather than aspectFill. My component code is below.
<StackLayout>
<Image :src="promo.image" stretch="aspectFill" height="200" />
<StackLayout class="promocontainer" row="1" padding="0">
<GridLayout columns="*,*" class="region">
<Label col="0" :text="promo.region" />
<Label col="1" :text="'$' + promo.price" textAlignment="right" />
</GridLayout>
<Label :text="promo.inclusions_heading" class="heading" />
<Label :text="promo.heading" padding="10" textWrap="true" class="tagline" />
<Label :text="promo.introText" padding="10" textWrap="true" class="text" />
</StackLayout>
</StackLayout>
When you change the strech option, the live preview in ios show the intended behavior as shown below
When interacting with the app, navigating away from this page and back, or previewing on a physical ios device, the image is show as below, instead of the intended aspect filled image as above.
I am hoping someone has run into this before and might be able to assist with working out a solution.
The component was being added to a ListView, which was causing the rendering issues above. I resolved this by instead wrapping the components in a ScrollView and StackLayout. This solved the stretch rendering issue straight away.
Original code with stretch bug:
<ListView for="promo in promos" #itemTap="onPromoTap">
<v-template>
<PromoListItem :promo="promo" />
</v-template>
</ListView>
Solution:
<ScrollView>
<StackLayout>
<PromoListItem margin="10" v-for="promo in promos" :key="promo.heading" :promo="promo" />
</StackLayout>
</ScrollView>
It looks like ListView calculates it's item sizing differently, and is not compatible with Image stretch, at least when there is other content involved.
I am fairly new to UWP but I am familiar with Android programming in XML and Java/Kotlin.
I want to create a button which has its corners cut out and basically looks like this:
.
I have created this shape above using Polygon XAML element and its Points attribute as following:
<Polygon Points="10,0,100,0,110,10,110,50,100,60,10,60,0,50,0,10" />.
Can I use this Polygon or can I achieve this another way?
Thanks for your help in advance!
Can I use this Polygon
Sure, UWP contains Polygon class, and you could use it directly. And this is sample tutorial that you could refer.
And if you want to make Polygon as content for Button, you could refer the following code
<Button Background="Transparent" Visibility="Visible">
<Button.Resources>
<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="Transparent" />
<SolidColorBrush x:Key="ButtonForegroundPressed" Color="Transparent" />
<SolidColorBrush x:Key="ButtonBorderBrushPointerOver" Color="Transparent" />
</Button.Resources>
<Grid>
<Polygon Fill="Red" Points="10,0,100,0,110,10,110,50,100,60,10,60,0,50,0,10" />
<TextBlock Text="Hello Btn" TextAlignment="Center" VerticalAlignment="Center" FontSize="22"/>
</Grid>
</Button>
I have an UWP C++ app for getting some information which takes a long time to load .While startup,its taking time to get the information and update the UI.So I thought of putting a progress ring while the UI is getting data. I need the progress ring to show on the UI during the loading time in MainPage.xaml thereby making the existing controls invisible.But it is not coming on top of UI.After getting data to UI,progress ring should disappear and all the controls should be visible.
<Page
x:Class="Ft_Information.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Ft_Information"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Loaded="MainWindow_Loaded" BorderThickness="10" IsTabStop="True">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="ftnfoGrid" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="25*" />
<RowDefinition Height="500*" />
<RowDefinition Height="100*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="500*" />
<ColumnDefinition Width="800*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Row="1" Grid.Column="1">
<TextBox x:Name="ProductNameText" x:Uid="ProductName" TextWrapping="Wrap" BorderThickness="0" IsTabStop="False" FontSize="13" IsReadOnly="True" />
<StackPanel Grid.Row="2" RenderTransformOrigin="0.5,0.5" Grid.ColumnSpan="1" HorizontalAlignment="Stretch" Margin="55,5.333,0.333,-5" VerticalAlignment="Stretch">
<ProgressRing Name="ProgressRingLbl" Height="120" Width="109" HorizontalAlignment="Left"
Foreground="Blue" IsActive="True" Visibility="Visible" VerticalAlignment="Center" Margin="0,0,0,0"/>
</StackPanel>
</Grid>
</Grid>
</Page>
MainPage::MainPage()
{
ProductNameText->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
ProgressRingLbl->IsActive = true;
ProgressRingLbl->Visibility = Windows::UI::Xaml::Visibility::Visible;
}
MainPage::FuntouploadUI()
{
.............
//after getting data
ProgressRingLbl->IsActive = false;
ProgressRingLbl->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
ProductNameText->Visibility = Windows::UI::Xaml::Visibility::Visible;
}
Still the progress bar is not showing anywhere in the UI.
I write a simple demo below.You can use this code in your application to test if the progress ring can show in the UI.
<Page ...>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Background="AliceBlue">
<TextBlock x:Name="MyTextBlock" Height="50" FontSize="16" Margin="0,20,0,20">Hello,world</TextBlock>
<Button x:Name="MyButton" Click="Button_Click">click me</Button>
<ProgressRing x:Name="MyProgressRing" Height="120" Width="109" Foreground="Blue" IsActive="True" Visibility="Visible" HorizontalAlignment="Center" VerticalAlignment="Center"></ProgressRing>
</StackPanel>
</Grid>
</Page>
MainPage::MainPage()
{
InitializeComponent();
MyTextBlock->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
MyButton->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
MyProgressRing->IsActive = true;
MyProgressRing->Visibility = Windows::UI::Xaml::Visibility::Visible;
}
The reason why progress ring not working was we are using another view to show the mainpage.xaml as a child to its root grid.When I moved the progress ring part to that xaml ,it is working fine. Since progress ring is working as a seperate UI thread it is not called by the mainpage.
I'm developing UWP app and want to set 2 columns for GridView or ListView by code.
Code:
GridView ^gView = ref new GridView();
ListView ^lView = ref new ListView();
I can't find any code or documentation how to do it programmatically. Thanks.
Yes I want 2 columns for the Grid. For example first column is property, second - data. How to achieve it by code.
I could not understand why you want to do it programmatically. In general, customizing its DataTemplate on XAML page directly is easy. For example:
<GridView ItemsSource="{Binding xx}">
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding property}"></TextBlock>
<TextBlock Grid.Column="1" Text="{Binding data}"></TextBlock>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
If you have to specify the DataTemplate programmatically, you could do like the following:
<Page.Resources>
<DataTemplate x:Key="datatemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding property}"></TextBlock>
<TextBlock Grid.Column="1" Text="{Binding data}"></TextBlock>
</Grid>
</DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<GridView x:Name="gd" ItemsSource="{Binding}">
</GridView>
</Grid>
public MainPage()
{
this.InitializeComponent();
gd.ItemTemplate = this.Resources["datatemplate"] as DataTemplate;
}
It's C# code, you would need to convert it to C++.
I'm having trouble selecting the correct template to manage the content of an expander control.
I'd like the content of an expander -- regardless of the type of control that is the content -- to be indented.
For example, an expander might have an expander as content, then the child expander might have a listbox, or a collection of textblocks.
Any help would be appreciated....
UPDATE:
Experimenting with a DataTemplate like this:
<DataTemplate x:Key="DataTemplate1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Row="1" /> <!-- With this in place, content doesn't show at all -->
</Grid>
</DataTemplate>
And using it like this:
<controls2:Expander Header="Two" ContentTemplate="{StaticResource DataTemplate1}">
So far, any attempts to deal with the content crashes the app when the Expander is expanded.
I Think This Code Should Help You
<toolkit:Accordion x:Name="SearchAcco" Grid.Row="0" Margin="3" ExpandDirection="Down" HorizontalAlignment="Stretch" SelectionMode="ZeroOrOne">
<toolkit:AccordionItem Header="Advance Search" Style="{StaticResource AccordianPanalStyle}" HorizontalContentAlignment="Left">
<--Add Content Here-->
</toolkit:AccordionItem>
</toolkit:Accordion>