I would like to bind a TabItem's visibility property to a bool property in my viewmodel (via converter, true=visible false=collapsed), but the visibility property on the TabItem does not hide the tab. I don't want to hide all of the tab, just individual ones.
Does anyone know how this can be achieved?
I wanted to have something similiar. I asked the developer about it, but this is not possible with Dragablz (which is Tabablz). The TabItem itself is not used in dragablz.
A workaround for this could be using materialdesign radiobuttons as tab headers instead of dragablz. Radio buttons can be collapsed.
<StackPanel Orientation="Horizontal" Margin="4">
<RadioButton x:Name="FirstTab" Style="{StaticResource MaterialDesignTabRadioButton}" Margin="4" Visibility="Collapsed" IsChecked="True" Content="FIRST" />
<RadioButton Style="{StaticResource MaterialDesignTabRadioButton}" Margin="4" IsChecked="False" Content="SECOND" />
<RadioButton Style="{StaticResource MaterialDesignTabRadioButton}" Margin="4" IsChecked="False" Content="THIRD" />
</StackPanel>
now you just have to create some grids below them, which have their visibility bound to the IsChecked attribute of the corresponding radio button. This way you can show only the grid which is bound to the currently selected radio button. You need a bool2visibility converter, maybe the default one shipped with wpf works (the one in my example is a custom one).
<Grid Visibility="{Binding IsChecked, Source={x:Reference FirstTab}, Converter={StaticResource Bool2VisibilityConverter}}">
Related
Say I have a simple Windows 10 UWP app
<Page
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
<!-- etc -->
>
<Grid>
<ListView>
<TextBlock Text="Sample text"/>
<TextBlock Text="Sample text"/>
<TextBlock Text="Sample text"/>
<!-- & many more -->
</ListView>
</Grid>
</Page>
The large number of ListView items causes it to overflow and scroll, as expected:
However, if I need to add another control as a sibling of the ListView, like so (replacing the Grid with a StackPanel for simplicity)
<Page...>
<StackPanel>
<ListView>
<TextBlock Text="Sample text"/>
<TextBlock Text="Sample text"/>
<TextBlock Text="Sample text"/>
...
</ListView>
<StackPanel>
<TextBlock Text="StackPanel at the bottom"/>
<Button Content="Click me"/>
</StackPanel>
</StackPanel>
</Page>
then the scrollbar disappears and the ListView isn't scrollable anymore. The content just gets clipped / cut off past the bottom of the window.
What's going on here and how can I make it scroll again?
The key to this is the ScrollViewer control. The reason ListViews and GridViews can scroll in the first place is because they have a ScrollViewer built in.
When you place a ListView inside a parent layout panel (e.g. a StackPanel or a Grid row), if the ListView height is greater than the viewport, the parent panel becomes the full height of the ListView. But StackPanel doesn't implement ScrollViewer so it can't scroll, and you end up with a StackPanel extending off the bottom edge of the viewport.
The fix is simple: put the parent layout panel in question inside a ScrollViewer
<Page...>
<ScrollViewer VerticalScrollBarVisibility="Auto"> <!--default is "Visible"-->
<StackPanel>
<ListView>
<TextBlock Text="Sample text"/>
<TextBlock Text="Sample text"/>
<TextBlock Text="Sample text"/>
...
</ListView>
<StackPanel>
<TextBlock Text="StackPanel at the bottom"/>
<Button Content="Click me"/>
</StackPanel>
</StackPanel>
</ScrollViewer>
</Page>
ScrollViewer API reference - MSDN
Going to add more context to binaryfunt's answer: It depends on the layout logic of the panel you're using!
To note beforehand: ListView internally has it's own ScrollViewer by default.
When laying out it's children, a Grid will typically tell its children they should fit inside the bounds the grid. In the case of the ListView, it's happy to do this, and it's own internal ScrollViewer handles it's children scrolling.
StackPanel on the other hand tells its children they have virtually infinite space to layout in in it's stacking direction - so your ListView has no idea it has to constrain itself to the height of your StackPanel because the StackPanel does not tell it do so and so the ListView never needs to use it's own ScrollViewer as it thinks it has infinite space.
Now, put a StackPanel in a ScrollViewer by itself doesn't help - if you put that ScrollViewer inside a StackPanel you have the same problem as the ListView does - it thinks it has infinite space and so never needs to scroll it's content. But, put the ScrollViewer in a Grid and the grid will give the ScrollViewer a defined size to layout in, and so anything inside the ScrollViewer will now scroll if it get's too big.
Put a ListView inside this StackPanel inside this ScrollViewer? The ListView still thinks it has infinite space and so never needs to use its own scroller, BUT it's also disables and virtualization and performance enhancements the ListView would normally have, as they rely on it's interal ScrollViewer actually being put a too use.
(binaryfunt's XAML answer will work.)
I am beginer on Xamarin. What did I do wrong here. I am trying to add Conext Menu to ListView and compiler is not happy with this.
<ListView x:Name="VehicleList">
<ListView.ItemTemplate>
<DataTemplate>
<ImageCell
ImageSource="152x152#1x.png"
Text="{Binding Title}"
Detail="{Binding SubTitle}"
TextColor="#f35e20"
DetailColor="#503026" />
<!-- adding this caused error
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Clicked="OnDelete" CommandParameter="{Binding .}"
Text="Archive"
IsDestructive="True" />
</ViewCell.ContextActions>
</ViewCell>
-->
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You are defining two viewcells in one data template. this is not possible!
You should create a DataTemplateSelector and declare the ViewCells in separate classes. Then you can make the selector choose a viewcell based on the logic implemented in the DataTemplateSelector. The xamarin documentation has a nice explanation: https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/templates/data-templates/selector/
I have a UWP application, I have added a button but when I debug the application, I can't see the button. If I add a texblock or textBox I can see them, but not the button.
I have set IsEnabled to true and visibility to visible but I am not able to solve the problem.
Also I have tried to click in the place where it should be the button but nothing happens.
This happens when I debug in local machine and when I debug in a emulator of windows phone 10.
Thank you so much.
EDIT: the axml code
<Page
x:Class="SqliteEF7UWP.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SqliteEF7UWP"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="Transparent">
<Button x:Name="GetVideos" IsEnabled="True" Visibility="Visible" Background="Aquamarine" Content="Buscar Videos" HorizontalAlignment="Left" Margin="120,98,0,510" VerticalAlignment="Stretch" Click="button_Click"/>
<TextBlock x:Name="textBlock" Foreground="BlueViolet" HorizontalAlignment="Left" Margin="101,59,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Height="34" Width="132"/>
<TextBox x:Name="textBox" HorizontalAlignment="Left" Margin="213,59,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top"/>
</Grid>
</Page>
The margin you set for the Button is too aggressive. The object is now "squeezed". For example set Margin to "120,98,0,200" (or simply "120,98") instead of "120,98,0,510" and it should be visible.
BTW using hardcoded margins to setup the user interface is probably not a good idea. Use for example the Grid with columns and rows instead of margins.
I'm currently trying to design a table for contact information including a column for icons like telephone, email or similar symbols and I want to align them with the text from the next column
icon | Telephone:
| +1212354567
icon | Email:
| x#y.com
Is there any Layout which can be compared in functionality to Androids RelativeLayout? I tried to work with the Grid Layout but this seems to be error prone and not exact enough. I don't want to divide my layout into columns and rows, instead I want to describe their position as it is used in RelativeLayout (toLeft, toRight, AlignParentBottom etc.).
The StackPanel can be compared to the LinearLayout, which I want to avoid as it is not suitable for my current design.
Is there any comparison between Windows Phone and Android Layouts on which I can orientate? This one is incomplete and does not give advise for the RelativeLayout.
I know you said you did not want to use a Grid but I feel that you have to in this case.
I would structure it with both a grid and stack panels though.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- Image for first row item -->
<Image Grid.Column="0" Grid.Row="0" Source="icon-url" />
<!-- Container for the details of the first row item -->
<StackPanel Grid.Column="1" Grid.Row="0">
<TextBlock Text="Telephone:" />
<TextBlock Text="+1212354567" />
</StackPanel>
<!-- Image for second row item -->
<Image Grid.Column="0" Grid.Row="1" Source="icon-url" />
<!-- Container for the details of the second row item -->
<StackPanel Grid.Column="1" Grid.Row="1">
<TextBlock Text="Email:" />
<TextBlock Text="x#y.com" />
</StackPanel>
<!-- Just add rows to the grid to continue the list -->
</Grid>
There is no panel that compares, but someone that was adventurous could create one. There are many articles on how to do this, but here's one for reference. http://www.switchonthecode.com/tutorials/wpf-tutorial-creating-a-custom-panel-control
That said, there's no reason not to use Grid for what you're trying to do. It's not "error prone" or "not exact enough". SharedSizeGroup should become your friend here, though.
I have the following problem. I keep getting 'ToolTip' cannot have a logical or visual parent error when i try to style tooltip for the toggle button. What went wrong? When i take out the tooltip control under ToggleButton.ToolTip it works !
<ToggleButton x:Name="toggle" OverridesDefaultStyle="True" Template="{StaticResource ExpanderToggleButton}" Margin="0,4,0,0" VerticalAlignment="Top" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
<ToggleButton.ToolTip>
<ToolTip Style="{StaticResource tooltipstyle}">
<TextBlock Background="Transparent"/>
</ToolTip>
</ToggleButton.ToolTip>
</ToggleButton>
If you write code like this using property element syntax, you call already the constructor of the ToolTip class.
<ToggleButton.ToolTip>
<TextBlock></TextBlock>
</ToggleButton.ToolTip>
There is no need to instantiate another ToolTip inside like this...
<ToggleButton.ToolTip>
<ToolTip Style="{StaticResource tooltipstyle}">
<TextBlock Background="Transparent"/>
</ToolTip>
</ToggleButton.ToolTip>
Besides, on my system (using .NET 4.5) there is no error.
It seems that WPF can handle both versions meanwhile as intended by the developer.