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>
Related
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.
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.
moving from actionscript (flex) to titanium and I'm experimenting with the xml markup. What I have is a template that I picked up from the doc
<ItemTemplate name="template">
<ImageView left="0" bindId="pic" id="icon" />
<Label bindId="info" id="title"/>
</ItemTemplate>
</Templates>
my question is if someone clicks on the pic or a listitem itself, how does one handle the events. through xml markup? Then how do you reference any of the control wrap in the template?
I have tried
<ImageView left="0" bindId="pic" id="icon" onclick="doClick()" />
function doClick(e) {
alert($.info.text);
}
This just produces a error and I still would not know what pic was clicked.
any help would be great..
thanks Mike
Have you checked out the Alloy Quick Start? I think many of your questions can be answered there.
Anyway, for ListViews, you cant add an event listener to an item in the template, its just a template not an actual thing on the screen (yet), refer here, and look at the alloy section.
Instead you need the itemclick event listener on the ListView itself. Check , below for a simple example of what the XML markup looks like.
<ListView id="listView" defaultItemTemplate="template" onitemclick="yourEvent" >
<!-- The Templates tag sets the ListView's templates property -->
<Templates>
<!-- Define your item templates within the Templates tags or use the
Require tag to include a view that only contains an ItemTemplate -->
<ItemTemplate name="template">
<ImageView bindId="pic" id="icon" />
<Label bindId="info" id="title" />
<Label bindId="es_info" id="subtitle" />
</ItemTemplate>
</Templates>
<ListSection headerTitle="Fruit / Frutas">
<!-- You can specify any ListItem or ListDataItem properties in ListItem -->
<!-- Specify data to bind to the item template with inline attributes
defined as <bindId>:<Ti.UI.Component.property> -->
<ListItem info:text="Apple" es_info:text="Manzana" pic:image="/apple.png" />
<ListItem info:text="Banana" es_info:text="Banana" pic:image="/banana.png" />
</ListSection>
</ListView>
Also, you need any JavaScript to be in the controller files, not in the XML markup files. *.js has javascript that is behind the view, which is *.xml.
I have template like here:
http://www.mkyong.com/jsf2/jsf-2-templating-with-facelets-example/
i add menu navigation:
<h:form id="form">
<div id="page">
<div id="header">
<ui:insert name="header" >
<ui:include src="/pages/template/header.xhtml" />
</ui:insert>
<f:ajax render="ContentLoader">
<h:commandLink actionListener="#{contentPage.setPage('/pages/first.xhtml')}" value="About Us" />
<h:commandLink actionListener="#{contentPage.setPage('/pages/login.xhtml')}" value="Contact Us" />
</f:ajax>
</div>
<h:panelGroup id="ContentLoader" >
<div id="content">
<ui:insert name="content" >
<ui:include src="#{contentPage.page}" />
</ui:insert>
</div>
</h:panelGroup>
</div>
</h:form>
links are working fine, but i have problem with redirect content by useing <h:commandButton action="link"> which is in content
how can i fix this problem?
maybe it's something wrong with my layout?
or how to correctly redirect from content to another content, useing buttons which are in contents?
As to your concrete problem, it's likely caused by the combination <ui:include src="#{...}"> and a view scoped bean. This construct works only if you upgrade to at least Mojarra 2.1.18. Otherwise, the view scoped bean will fail to restore and be newly recreated and therefore the default value of #{contentPage.page} will be considered when any form actions inside the page are to be decoded. Upgrading to at least Mojarra 2.1.18 should fix your problem. You can get it at http://javaserverfaces.java.net. It's currently already at 2.1.25.
As to your concrete functional requirement, using command links/buttons for plain page-to-page navigation is a poor practice. You should be using output links/buttons for this.
<h:button value="navigate" outcome="link" />
or
<h:link value="navigate" outcome="link" />