XF Rg.Plugins.Popup inputtransparent content PopUpPage - c#

I need advice. There is some way in PopupPage to make content InputTransparent = "True".
I'm trying to create an inputtransparent content pop-up page.
Unfortunately, InputTransparent = "True" does not work for x: Name = "GridRoot" in PopUpPage. It should go click on the Button in MainPage.
I have the following XAML code here:
here is the code-behind:
PopUpTest.cs

Use RowDefinitions to explicitly say what areas are NOT part of the clickable content.
<Grid RowDefinitions="*,Auto,*" InputTransparent="True" CascadeInputTransparent="False" >
<Grid Grid.Row="1" BackgroundColor="Red">
...
</Grid>
</Grid>
This makes an outer 3-row grid. Inside that, on the second row (Row=1) is your visible content. Surrounded by Rows 0 and 2, which divide the extra space between them - but have no content, so they should not block input.
I don't think you need to put anything in rows 0 and 2, but if the above doesn't work, try:
...
<BoxView Grid.Row="0" VerticalOptions="Fill" InputTransparent="True" />
<Grid Grid.Row="1" BackgroundColor="Red">
...
</Grid>
<BoxView Grid.Row="2" VerticalOptions="Fill" InputTransparent="True" />
I don't know if the BoxView's need HeightRequest attributes. If above doesn't work, try adding HeightRequest="999" to them. The Grid logic will limit each BoxView's height to fit in its row.

Related

Can't see whole object in StackPanel?

I am a newbie in WPF trying to create his first normal project which is a notes application.
Every note is linked to a button and I thought it'll look beautiful in StackPanel.
I am dynamically creating buttons within StackPanel, but the problem is that when I scroll down the list of Buttons last Button can't be seen fully. I thought it was because of the Margin and tried to adjust it, but it didn't help, also auto Height and Width didn't help. StackPanel is within ScrollViewer and when I reach the end of ScrollBar I just can see half of last button ?
Here is StackPanel's XAML code:
<ScrollViewer VerticalScrollBarVisibility="Auto"
Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Grid.RowSpan="3" Margin="50 -50 50 5" >
<StackPanel x:Name="ButtonPanel"/>
</ScrollViewer>
That is how I create Button:
dynamicTextBox.Add(SearchNotes);
dynamicTextBox[index_of_buttons] = new TextBox();
Grid.SetRow(dynamicTextBox[index_of_buttons], 1);
Grid.SetColumn(dynamicTextBox[index_of_buttons], 0);
this.ButtonPanel.Children.Add(dynamicTextBox[index_of_buttons]);
dynamicTextBox[index_of_buttons].IsReadOnly = false;
dynamicTextBox[index_of_buttons].Text = "";
Where dynamicTextBox is List<> of TextBoxes to which is applied Template(I think it is not necessary to see Template to resolve the problem)
This is how it looks like:
Can't see the whole button(the last one)
So I wanna see the whole button.
As Andy wrote in the comment section, ListBox is best solution for this problem.
I tried this one to make it look like exactly same as it was in StackPanel
Xaml:
<ListBox Name="ListBoxOfButtons" Background="#404040" BorderThickness="0"
HorizontalContentAlignment="Stretch" Grid.Row="1" Grid.Column="0"
Grid.ColumnSpan="3" Grid.RowSpan="3" Margin="50 -20 50 5">
</ListBox>
C#:
var txtBox = new TextBox();
txtBox.Template = FindResource("TemplateForTextBox") as ControlTemplate;
ListBoxOfButtons.Items.Add(txtBox);
This is how last button looks like now

Xamarin: Elements are cut off/not rendered in ScrollViewer

I've following situation.
<ScrollView BackgroundColor="DeepPink">
...
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<ContentView Opacity="{Binding ViewProvider.IsCancelling, Converter={StaticResource BoolToOpacityConverter}}" Content="{Binding ViewProvider.CurrentView}"/>
</Grid>
...
</ScrollView>
The Content View contains multiple elements and one of them is a StackLayout with BindableLayout.ItemsSource
<StackLayout BindableLayout.ItemsSource="{Binding Rings}" Margin="12,0,0,0">
<BindableLayout.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
The Rings will be added by different actions while the View is open. As soon as this happens, the height of the ScrollViewer increases, but the parts below are cut off or just not rendered. (It cut's the height off, which the rings are using - I guess because the Grid doesn't resize? But why?)
I've tried to call InvalidateMeasure() and ForceLayout() after adding rings but without any changes. Any ideas?
Edit
As requested in the comments I've uploaded a simple demo on github to reproduce this issue.
https://github.com/Valronicon/ScrollViewerIssue
Thank you!
Edit 2
I was able to fix this by wrapping the ScrollViewer within an additional Grid. Don't know why it works, but it works...
As Rich Mentioned wrapping the scrollview in a grid seemed to solve this issue for me as well, so im posting it as an answer
<Grid>
<ScrollView>
...
</ScrollView>
</Grid>

Get around grid in uwp

I'm trying to create 2 grid the first one have two buttons and the other one have a title I want to make the second grid get around the first one ...
here's my code>>
<Grid x:Name="pgtitle" >
<StackPanel x:Name="btn" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<AppBarButton Icon="More" Tapped="more_Tapped"/>
<AppBarButton Icon="List" Click="view_Click"/>
</StackPanel>
</StackPanel>
<RelativePanel x:Name="title">
<TextBlock x:Name="titletxt" Text="{Binding ViewModel.SelectedItem.Title}" FontSize="18" FontWeight="Bold" TextWrapping="Wrap"/>
</RelativePanel>
</Grid>
here's a picture for what am I trying to do>>
If you mean "get around" as in flow around, similarly to news articles and texts, that is not possible. All layout elements in XAML are rectangular and they don't take other sibling elements into account.
You can display the inner Grid in one column and other elements in second column, but the contents of such columns must be known beforehand.
Look into the RelativePanel element in UWP where you can place elements right or left of other elements. I think this can be achieved with that control.
For example, the RelativePanel will contain the smaller grid you have in your picture and will be the anchor to all other elements. You will have to set the other elements (children of the larger grid) to go on the right or bottom of the smaller grid.

How to align RibbonGroup to the right?

I use RibbonControlsLibrary. How to align one RibbonGroup to the right? It should be only one group in tab. All other groups should be aligned to the left.
You cannot align the RibbonGroup to the right. The Ribbon doesn't provide the ability to do this.
What you can do is to align page header items... but I don't know if it's enough for you:
DevExpress
I had the same issue, and I finally found something to do this :
I have 3 RibbonGroupBox. Groupe1 may be aligned on left, Groupe3 may be aligned on right. Groupe2 is just an empty RibbonGroupBox I inserted between Groupe1 and Groupe3.
Code XAML :
<Fluent:Ribbon DockPanel.Dock="Top" Title="{x:Static p:Resources.MiseEnBarre}" x:Name="mainRibbon">
<Fluent:RibbonTabItem x:Name="MainMenu" Header="{x:Static p:Resources.MainMenu}" SizeChanged="MainMenu_SizeChanged">
<Fluent:RibbonGroupBox x:Name="Groupe1">
<Fluent:Button x:Name="autoNest" SizeDefinition="Large" LargeIcon="img\image_bar_Nesting.png" Header="{x:Static p:Resources.MenuAutoNest}" Click="AutoNest_Click" />
<Fluent:Button x:Name="saveFile" SizeDefinition="Large" LargeIcon="img\image_save.png" Header="{x:Static p:Resources.MenuSauvegarder}" Click="Sauvegarder_Click" />
</Fluent:RibbonGroupBox>
<Fluent:RibbonGroupBox x:Name="Groupe2">
</Fluent:RibbonGroupBox>
<Fluent:RibbonGroupBox x:Name="Groupe3">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Path=AvailableCNClist}" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1" Text="{Binding Path=AvailableCNClist2}" HorizontalAlignment="Right"/>
</Grid>
</Fluent:RibbonGroupBox>
</Fluent:RibbonTabItem>
</Fluent:Ribbon>
Then to manage the Windows redimensioning, I add on my main window the event SizeChanged="MainWindow_SizeChanged" (In the case your RibbonGroupBox dimensions could also change, just add the same event on them).
private void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
{
UpdateAlignRibbon();
}
private void UpdateAlignRibbon()
{
Groupe2.Width = MyWindow.ActualWidth - Groupe1.ActualWidth - Groupe3.ActualWidth;
}
In my case the Groupe3 RibbonGroupBox may change of dimension, so I call UpdateAlignRibbon() from 3 points :
After Initialization of my window(including defining the GroupBoxes content)
When the MainWindow has its dimensions changed
When Groupe1 or Groupe3 have its dimensions changed
Rover, You can try add RibbonGroup between last left RibbonGroup and Right align RibbonGroup and assign size to newly added ribbon related to window size.
example <RibbonGroup Width="400"></RibbonGroup>
it's looks following image
You can sort of hack in alignment but I'd recommend against it.
<r:RibbonGroup Header="This is a Filler Header With No Functionality but to Take Up Space" Visibility="Hidden">
<s:RibbonButton2/>
<s:RibbonButton2/>
<s:RibbonButton2/>
<s:RibbonButton2/>
</r:RibbonGroup>
The customer wanted their logo on the ribbon across the top of the page, but the more you add "false" elements to the bar, the quicker "true" elements will collapse when shrinking the window size.
Try this:
<RibbonTab Header="Home" x:Name="rtabHome" FlowDirection="RightToLeft" >
<RibbonGroup Header="Group">
<TextBlock Text="Example"/>
</RibbonGroup>
</RibbonTab>
Works with FlowDirection="RightToLeft".

How to bind item values in an accordion header template

I'm trying to create a simple header template for an accordion object in silverlight 4.
I've added an image and a TextBlock to the header template of the AccordionItem. I want to hide or show the image dependant on the values entered on the page.
Because i want to bind these values directly to the actual accordion item, I've created a new type 'AccordionItemWithIcons' that simply inherits from AccordionItem but adds a couple of dependancy properties to handle this. I'm only showing a couple of those properties for brevity. :)
So, here's my accordion with my 'AccordionItemWithIcons' control. Note that the property 'CheckIsVisible' is of type 'Visibility'
<Grid x:Name="LayoutRoot">
<Controls:Accordion Height="100">
<my:AccordionItemWithIcons
x:Name="FirstItem"
Content="Content Text"
Header="Header Text"
CheckIsVisible="Collapsed"
EventSummary="Summary Text"
HeaderTemplate="{StaticResource AccordionItemHeaderTemplate1}"/>
</Controls:Accordion>
</Grid>
And here is the header template.
<DataTemplate x:Key="AccordionWithIcons_HeaderTemplate1" >
<Grid >
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<TextBlock Text="{Binding EventSummary}" />
<Image Visibility="{Binding CheckIsVisible}" Source="/Labyrinth;component/cross.png"/>
</StackPanel>
</Grid>
</DataTemplate>
Can anyone explain how I can bind the TextBlock's text and the Image's Visibility to the values set in the underlying AccordionItemWithIcons object? I've spent hours messing about with different DataContext's and sources and cannot seem to get this to work!
I don't know if helps to explain what I'm trying to achieve, but ultimately in the code behind i want to be able to say something like (shown below), to show or hide the icon in the header template.
FirstItem.CheckIsVisible = Visibility.Visible
For this, there exists a VisibilityToBooleanConverter
<BooleanToVisibilityConverter x:Key=”boolVisConverter”/>
[...]
Visibility="{Binding ElementName=anyCheckbox,
Path=IsChecked,
Converter={StaticResource boolVisConverter}}"

Categories