I'm having some trouble displaying a rotated progress bar. Ideally I would like to have no gap between the progress bar and textblock. Any suggestions?
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<ProgressBar Height="20" Width="430">
<ProgressBar.RenderTransform>
<RotateTransform Angle="-90" />
</ProgressBar.RenderTransform>
</ProgressBar>
<TextBlock Width="100" Height="500" Text="test" />
</StackPanel>
Try LayoutTransofrm instead of RenderTransform:
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<ProgressBar Height="20" Width="430">
<ProgressBar.LayoutTransform>
<RotateTransform Angle="-90" />
</ProgressBar.LayoutTransform>
</ProgressBar>
<TextBlock Width="100" Height="500" Text="test" />
</StackPanel>
Related
I use LibVLCSharp.WPF in a WPF application.
I want to put some icons and buttons above the video.
But after the VideoView control has loaded, it overwrite everything.
<Canvas Width="325" Height="182">
<Image Source="/Resource/BgLoading_1.png"
Width="325"
Height="182"
Stretch="Fill"
StretchDirection="Both"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Panel.ZIndex="0"
Visibility="Visible" />
<fa:ImageAwesome Foreground="White"
Icon="Spinner"
Spin="True"
Height="48"
Width="48"
Visibility="{Binding LoadImageStatus}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Canvas.Left="139"
Canvas.Top="67" />
<Image x:Name="imgLeftIcon"
Width="30"
Height="30"
Source="{Binding LeftIconSource}"
Stretch="Fill"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10,10,10,10"
Visibility="{Binding LeftIconStatus}"
Panel.ZIndex="2" />
<Image x:Name="imgRightIcon"
Width="30"
Height="30"
Source="{Binding RightIconSource}"
Stretch="Fill"
Margin="285,10,10,142"
Visibility="{Binding RightIconStatus}"
Panel.ZIndex="2" />
<!--Video-->
<vlc:VideoView Grid.Row="0"
Height="182"
Width="325"
Visibility="{Binding VideoPlayerStatus}"
Panel.ZIndex="1" />
</Canvas>
RTFM
The controls that must appear on top of the video should be placed as children of the VideoView element.
<Window ...
xmlns:vlc="clr-namespace:LibVLCSharp.WPF;assembly=LibVLCSharp.WPF"
...>
<Grid>
<vlc:VideoView x:Name="VideoView">
<Button x:Name="PlayButton"
Click="PlayButtonOnClick"
Content="Play"
Margin="8"
HorizontalAlignment="Right"
VerticalAlignment="Bottom" />
</vlc:VideoView>
</Grid>
</Window>
Avoid Canvas since they are pretty dumb.
Working example sources based on the manual.
I haven't used vlc, if it covers the icons, I think it should be a window drawn with a separate handle. just like WindowsFormHost. try use Popup control, it can be displayed on top of any control.
<Grid>
<!--video control-->
<Grid Name="video">
<!--Video-->
<vlc:VideoView Grid.Row="0"
Height="182"
Width="325"
Visibility="{Binding VideoPlayerStatus}"
Panel.ZIndex="1" />
</Grid>
<Popup PlacementTarget="{Binding ElementName=video}" Placement="Center">
<Grid>
<Image x:Name="imgLeftIcon"
Width="30"
Height="30"
Source="{Binding LeftIconSource}"
Stretch="Fill"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10,10,10,10"
Visibility="{Binding LeftIconStatus}"
Panel.ZIndex="2" />
</Grid>
</Popup>
</Grid>
I have a long list coming from my Business logic which I need to display on the UI. As the list is long, I tried adding Scrollviewer but I am unable to scroll.
please find the XAML code below
<Grid Margin="0,32,0,0">
<TextBlock Text="{Binding IDC_WiFi, Source={StaticResource Resources}}" FontFamily="Segoe UI" FontSize="20" Foreground="#4cb5ab" HorizontalAlignment="Left" />
<Button Command="{Binding HardwareWifiAccordionCommand}" BorderThickness="0" Width="16" HorizontalAlignment="Right" Height="16" >
<Button.Background>
<ImageBrush ImageSource="{Binding AccordionImageHardwareWifi}" />
</Button.Background>
</Button>
</Grid>
<TextBlock Text="Klein's, Anil's" FontFamily="Segoe UI" FontSize="15" Foreground="#8fa3ad"/>
<StackPanel Height="200" Visibility="{Binding IsAccordionHardwareWifi, Converter={StaticResource Bool2Visible}}">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding WifiList,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,32,0,0">
<Grid>
<Image Source="/Images/Assets/da_wifi1_16x16.png" Height="16" Width="16" HorizontalAlignment="Left" />
<TextBlock Margin="25,0,0,0" Text="{Binding NetworkName}" FontSize="15" Foreground="#FFFFFF" />
<TextBlock Text="" FontSize="15" Foreground="#8fa3ad" HorizontalAlignment="Right" />
</Grid>
<TextBlock Text="" FontSize="15" Foreground="#8fa3ad" HorizontalAlignment="Left" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</StackPanel>
Put it into a ScrollViewer.
<ScrollViewer>
<StackPanel >
</StackPanel>
</ScrollViewer>
As #StepUp points out you can just wrap it with a ScrollViewer but I believe this breaks virtualization. That's outside the scope of this question of course but it's something to keep in mind. If performance is likely to become an issue then I'd suggest implementing this as shown in the answer to this question.
The scrollviewer needed a Height to be set
<Grid Margin="0,32,0,0">
<TextBlock Text="{Binding IDC_WiFi, Source={StaticResource Resources}}" FontFamily="Segoe UI" FontSize="20" Foreground="#4cb5ab" HorizontalAlignment="Left" />
<Button Command="{Binding HardwareWifiAccordionCommand}" BorderThickness="0" Width="16" HorizontalAlignment="Right" Height="16" >
<Button.Background>
<ImageBrush ImageSource="{Binding AccordionImageHardwareWifi}" />
</Button.Background>
</Button>
</Grid>
<TextBlock Text="Klein's, Anil's" FontFamily="Segoe UI" FontSize="15" Foreground="#8fa3ad"/>
<StackPanel Height="200" Visibility="{Binding IsAccordionHardwareWifi, Converter={StaticResource Bool2Visible}}">
<ScrollViewer VerticalScrollBarVisibility="Auto" Height="350">
<ItemsControl ItemsSource="{Binding WifiList,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,32,0,0">
<Grid>
<Image Source="/Images/Assets/da_wifi1_16x16.png" Height="16" Width="16" HorizontalAlignment="Left" />
<TextBlock Margin="25,0,0,0" Text="{Binding NetworkName}" FontSize="15" Foreground="#FFFFFF" />
<TextBlock Text="" FontSize="15" Foreground="#8fa3ad" HorizontalAlignment="Right" />
</Grid>
<TextBlock Text="" FontSize="15" Foreground="#8fa3ad" HorizontalAlignment="Left" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</StackPanel>
I've been working on how to do layouts and I've come across something that is bugging the heck out of me. Now, if I use the code below, the window takes up the entirety of my screen.
<Window x:Class="HDD_Drill_View.Windows.WndwMain"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="HDDC"
WindowStartupLocation="CenterScreen"
Name="wndwMain"
Closing="WindowClosing"
ResizeMode="NoResize"
WindowState="Normal"
SizeToContent="WidthAndHeight">
<Grid>
<DockPanel Width="Auto"
LastChildFill="False"
HorizontalAlignment="Left">
<DockPanel.Background>
<ImageBrush ImageSource="..\Resources\background.png"
Stretch="UniformToFill"
TileMode="None" />
</DockPanel.Background>
<StackPanel DockPanel.Dock="Top"
Height="Auto"
Width="Auto"
Orientation="Horizontal"
HorizontalAlignment="Center">
<Button HorizontalAlignment="Left"
Name="bttnGenerateReports"
VerticalAlignment="Top"
UseLayoutRounding="False"
Click="BttnGenerateReportsClick"
Margin="10">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"><Run Text="Generate" /><LineBreak /><Run Text=" Reports" /></TextBlock>
</Button>
<Button HorizontalAlignment="Left"
Name="bttnSurveyReport"
VerticalAlignment="Top"
UseLayoutRounding="False"
Click="BttnSurveyReportClick"
Margin="10">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"><Run Text="Survey" /><LineBreak /><Run Text="Report" /></TextBlock>
</Button>
<Button HorizontalAlignment="Left"
Name="bttnTimeChart"
VerticalAlignment="Top"
UseLayoutRounding="False"
Click="BttnTimeChartClick"
Margin="10">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"><Run Text=" Time" /><LineBreak /><Run Text=" Chart" /></TextBlock>
</Button>
<Button HorizontalAlignment="Left"
Name="bttnMaterialAcquisition"
VerticalAlignment="Top"
UseLayoutRounding="False"
Click="BttnMaterialAcquisitionClick"
Margin="10">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"><Run Text=" Material" /><LineBreak /><Run Text="Acquistion" /></TextBlock>
</Button>
</StackPanel>
<StackPanel DockPanel.Dock="Bottom"
Height="Auto"
Width="Auto"
Orientation="Horizontal">
<!--MaxWidth="800"
MaxHeight="80"-->
<StackPanel.Background>
<ImageBrush ImageSource="..\Resources\drildata2.jpg" />
</StackPanel.Background>
</StackPanel>
</DockPanel>
</Grid>
</Window>
Yet, if I uncomment the Max Height and Max Width in the last StackPanel, then it seems fine. Basically, I'm wanting my background image to NOT affect my window size. Is this possible? I'm trying to set the background of a StackPanel to an image.
Remove the SizeToContent="WidthAndHeight" from the Window.
i put progress bar but its not look proper
<ProgressBar Height="30" Width="300" VerticalAlignment="Center" BorderThickness="0" HorizontalAlignment="Center" Foreground="#0A8098" BorderBrush="Transparent" Name="pbProcessing" >
<ProgressBar.Background>
<ImageBrush ImageSource="/ClientApplication;component/Images/ProgressBackground.png"/>
</ProgressBar.Background>
<ProgressBar.Clip>
<RectangleGeometry RadiusX="20.5" RadiusY="20.5" Rect="0,0,300,19"/>
</ProgressBar.Clip>
</ProgressBar>
but i shown
Any idea how to put image on progress bar perfrectly? Thanks.
Try this
<ProgressBar Value="30" Height="30" Width="300" VerticalAlignment="Center" BorderThickness="0" HorizontalAlignment="Center" Foreground="#0A8098" BorderBrush="Transparent" Name="pbProcessing" >
<ProgressBar.Template>
<ControlTemplate>
<Grid>
<Image Name="PART_Track" Source="bird1.jpg" Stretch="Fill"/>
<Rectangle Name="PART_Indicator"
Fill="BlanchedAlmond"
HorizontalAlignment="Left"/>
</Grid>
</ControlTemplate>
</ProgressBar.Template>
</ProgressBar>
<Slider Name="photoZoomSlider" Width="180" Minimum="100" Maximum="700" Value="300" />
<ScrollViewer >
<Viewbox Width="{Binding ElementName=photoZoomSlider, Path=Value}" Height="{Binding ElementName=photoZoomSlider, Path=Value}">
<StackPanel>
<Image Name="Photo" Source="C:\dic.bmp" Width="100" Height="100"/>
<TextBox Width="100"></TextBox>
<TextBox Width="200" Padding="5"></TextBox>
<TextBox Width="10"></TextBox>
<TextBox Width="500"></TextBox>
</StackPanel>
<!--<Viewbox.LayoutTransform>
<ScaleTransform x:Name="uiZoomTransform"
ScaleX="{Binding ElementName=photoZoomSlider, Path=Value}"
ScaleY="{Binding ElementName=photoZoomSlider, Path=Value}"/>
</Viewbox.LayoutTransform>-->
</Viewbox>
</ScrollViewer>
</StackPanel>
Adjust Slider,TextBox can't to show focus when i click textBox,Please,How to solution?
Thanks!
I tried what you gave, and with some minor adjustments it works fine:
<StackPanel>
<Slider Name="photoZoomSlider" Width="200" Height="50" Value="50" />
<ScrollViewer>
<Viewbox Width="{Binding ElementName=photoZoomSlider, Path=Value}" Height="{Binding ElementName=photoZoomSlider, Path=Value}">
<StackPanel>
<TextBox Text="ff" />
<TextBox Text="ss" />
<TextBox Text="zz" />
<TextBox Text="cc" />
</StackPanel>
<Viewbox.LayoutTransform>
<ScaleTransform x:Name="uiZoomTransform" ScaleX="{Binding ElementName=photoZoomSlider, Path=Value}"
ScaleY="{Binding ElementName=photoZoomSlider, Path=Value}"/>
</Viewbox.LayoutTransform>
</Viewbox>
</ScrollViewer>
</StackPanel>